상현에 하루하루
개발자의 하루

gatsbyjs docker

( 업데이트: )

By

https://github.com/gatsbyjs/gatsby-docker

gatsbyjs의 공식 docker images 제작 가이드로 위를 참고하면서 만들었다.

왜 docker image를 만드나?

4log의 version2를 기약하면서 gatsbyjs로 제작한 4log를 보존하고싶었다.

gatsby로 이전하기 전의 wordpress로만 제작했던 블로그또한 보존되어있기 때문에 더더욱 나의 히스토리를 남기기 위해서!

README install을따라하면서 문제 발생

README.md 부분의 install 부분을 따라서 Dockerfile에서 gatsbyjs 이미지를 가지고 이미지 생성하는 것을 실행하는데 계속 public/ /pub 이런 디렉토리가 없다는 에러를 띄우는데 해결방법이 안나와있어서 issues에서 찾아보다가 gatsby images를 사용하지 않는 방법으로 해결 방법이 나와있어서 해결할 수 있었다.

https://github.com/gatsbyjs/gatsby-docker/issues/38#issuecomment-616043649

nas에서 reversproxy로 요청을 보내줄꺼여서 nginx의 서버이름의 url은 _ 으로 설정하고 구성했다.

위에 archive 브랜치에 version1을 구성해서 dockerfile로 보존시켰다.

도커 (nginx, node, gatsby build)

Dockerfile은 프로젝트 루트폴더에 넣어서 docker build -t myproject/imagename:1.0.0 설정

나는 github의 새로생긴 packages에 저장하려고 docker build -t ghcr.io/hansanghyeon/4log:1.14.3으로 설정해서 이미지를 만들고 푸시했다.

ARG GATSBY_ACTIVE_ENV=production
FROM node:12-buster AS build
RUN yarn global add gatsby-cli
ARG GATSBY_ACTIVE_ENV
ENV GATSBY_ACTIVE_ENV=$GATSBY_ACTIVE_ENV
WORKDIR /app
ADD . ./
RUN yarn install
RUN gatsby build
RUN ls -la *<em>/</em>
FROM nginx
COPY --from=build /app/public /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80Code language: Dockerfile (dockerfile)
worker_processes    1;
user                nginx;

error_log /var/log/nginx/error.log warn;
pid       /var/run/nginx.pid;

events {
  worker_connections 1024;
}

http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;

  log_format  main '$remote_addr - $remote_user [$time_local] "$request" '
                   '$status $body_bytes_sent "$http_referer" '
                   '"$http_user_agent" "$http_x_forwarded_for"';

  keepalive_timeout  15;
  autoindex          off;
  server_tokens      off;
  port_in_redirect   off;
  sendfile           on;
  tcp_nopush         on;
  tcp_nodelay        on;

  client_max_body_size        64k;
  client_header_buffer_size   16k;
  large_client_header_buffers 4 16k;

  gzip             on;
  gzip_vary        on;
  gzip_proxied     any;
  gzip_types       application/javascript application/x-javascript application/rss+xml text/javascript text/css image/svg+xml;
  gzip_buffers     16 8k;
  gzip_comp_level  6;

  access_log         /var/log/nginx/access.log main;

  server {
    listen 80;
    server_name  neonlaw.com  www.neonlaw.com;

    autoindex off;
    charset utf-8;
    error_page 404 /usr/share/nginx/html/404.html;

    location / {
      if ($http_x_forwarded_proto = "http") {
        return 301 https://$server_name$request_uri;
      }

      root /usr/share/nginx/html;
      index index.html indx.htm;
    }

    location ~* \.(html)$ {
      if ($http_x_forwarded_proto = "http") {
        return 301 https://$server_name$request_uri;
      }

      root /usr/share/nginx/html;
      add_header Cache-Control "no-store";
      expires    off;
    }

    location ~* \.(ico|jpg|jpeg|png|gif|svg|js|jsx|css|less|swf|eot|ttf|otf|woff|woff2|json)$ {
      if ($http_x_forwarded_proto = "http") {
        return 301 https://$server_name$request_uri;
      }

      root /usr/share/nginx/html;
      add_header Cache-Control "public";
      expires +1y;
    }

  }
}Code language: Nginx (nginx)

Docker folder를 만들어서 해당 폴더에서 도커에 관련된 모든것을 설정하고 싶어서 docker/Dockerfile 에서 상위 폴더를 복사해서 설정해봤는데 계속 오류가나서 실패했다.