gatsbyjs docker

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

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

왜 docker image를 만드나?

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

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

• https://dan4log.archive.hyeon.pro/
• https://4log-v1.archive.hyeon.pro/

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은 _ 으로 설정하고 구성했다.

• https://github.com/Hansanghyeon/4log/tree/archive/gatsby
• https://github.com/Hansanghyeon/4log/blob/archive/gatsby/Dockerfile
• https://github.com/users/Hansanghyeon/packages/container/4log/660523

위에 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 에서 상위 폴더를 복사해서 설정해봤는데 계속 오류가나서 실패했다.