분류 Gatsbyjs

정적사이트 생성기 Gatsby를 Nginx 웹서버로 직접 배포하기

컨텐츠 정보

본문

1. 들어가며 


정적사이트 생성기를 이용하면 DB 및 PHP가 필요없기 때문에 대부분 배포 서비스를 이용할 것입니다.


특히 nextjs를 개발하고 있는 vercel을 이용하면, 서울 CDN을 무료 플랜에서도 쓸 수 있습니다.


vercel의 경우 해당 지역의 사용자가 많으면 그 지역 CDN을 열어주는 편인데요.


미국과 한국 모두 사용자가 많다면 둘다 열어줍니다.


이와 같은 배포 서비스를 이용하지 않고, 개인 홈서버나 클라우드 인스턴스를 이용하여 직접 배포할 수도 있습니다.


음.. 직접 배포하는 이유는 vercel을 제외한 배포 서비스에 우리나라 CDN이 거의 없기 때문에 


우리나라 사용자들에게 최고의 접속환경을 보여드리고 싶기 때문입니다.



2. 기본 준비사항


로컬 컴퓨터에 정적사이트 생성기를 사용할 수 있는 준비가 되어있고,


깃허브와 연동되었으며, 이미 정적사이트 생성기를 이용하여 파일을 만들었다는 가정하에 진행해봅니다.


저의 경우 gatsby로 생성한 파일이 /gatsby/gatsby-minimal에 있습니다.



로컬 컴퓨터에서 Nginx로 바로 배포하려면 그냥 Ngixn에서 /gatsby/gatsby-minimal/public 폴더를 root로 잡으면 끝입니다.


상세한 Nginx 설정은 4번에서 알려드리겠습니다.



3. 빌드 후 빌드된 파일만 깃허브에 업로드하기


저는 오라클 클라우드에 있는 무료 인스턴스를 이용하여 배포할 것입니다.


이제 빌드된 파일이 저장될 /gatsby/gatsby-minimal-public 폴더를 새로 생성하고, 해당 폴더를 새로운 깃허브 저장소와 연결할 것입니다.


우선 로컬 컴퓨터에서 /gatsby/gatsby-minimal-public와 같은 폴더를 생성 후, 


깃허브에 빌드된 파일이 저장될 개인용 저장소(레포)를 생성합니다.


참고로 Private으로 생성하면 git clone이나 git pull 할때 아이디와 비번을 계속 넣어줘야되는 귀찮음이 있습니다.


그리고 로컬 컴퓨터에서 gatsby 파일이 있는 폴더로 갑니다.



gatsby build


위 명령어로 빌드를 진행합니다.



cp -r public ../gatsby-minimal-public


위 명령어로 빌드로 생성된 public 폴더를 원하는 폴더로 복사합니다.



cd .. && cd gatsby-minimal-public/public


이제 위 명령어를 내려서 public 폴더로 갑니다.



git init
git add -A
git commit -m "initial commit"


위 명령어들을 내려, git을 초기화하고, 추가된 파일들을 커밋합니다.



git remote add origin https://github.com/자신의깃허브계정/개인용저장소


위와 같은 형식으로 빌드된 파일이 저장될 개인용 저장소(레포)와 연결합니다.


git push --set-upstream origin master


위 명령어로 파일을 업로드합니다.


이렇게 하면 빌드된 파일만 원하는 저장소에 저장이 됩니다.


다음에 로컬에서 작업 후 바로 배포하게 될 명령어를 한줄로 만들어보았습니다.



gatsby build && cp -r public ../gatsby-minimal-public && cd .. && cd gatsby-minimal-public/public && git add -A && git commit -m "public" && git push origin master && cd .. && cd .. && cd gatsby-minimal


위 명령어를 내리면 빌드하고, 빌드된 폴더를 복사 후 깃허브에 올리고, 원래 폴더로 돌아옵니다.


이제 원하는 결과물을 깃허브에 올렸습니다. 



4. 클라우드에서 다운 받고, Nginx와 연동하기


클라우드에서 원하는 폴더로 가서 git clone을 합니다.


git clone https://github.com/자신의깃허브계정/개인용저장소


위와 같이 다운 받을 수 있습니다.


저는 /var/www/gatsby-minimal-public 이 경로에 파일을 다운 받았습니다.


본격적으로 Nginx 설정을 넣을 때 입니다.



nano /etc/nginx/sites-available/static.site


위와 같이 nginx 설정파일을 만듭니다.


server {
    listen 80;
    listen [::]:80;
    server_name static.hubs.tk; # 사이트 도메인 지정
    location / {
            rewrite ^ https://$host$request_uri? ;
    }
}

server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_tokens off;
server_name static.hubs.tk; # 사이트 도메인 지정
index index.html;
autoindex off;
charset urtf-8;

root /var/www/gatsby-minimal-public; # public root 설정하기

error_page 404 /404.html;
rewrite ^([^.\?]*[^/])$ $1/ permanent;
try_files $uri $uri/ $uri/index.html =404;

        location ~* \.(?:html)$ {
          add_header Cache-Control "public, max-age=0, must-revalidate";
          add_header X-Frame-Options SAMEORIGIN;
          add_header X-Content-Type-Options nosniff;
          add_header X-XSS-Protection "1; mode=block";
          add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
        }

        location /page-data {
          add_header Cache-Control "public, max-age=0, must-revalidate";
        }

        location = /sw.js {
          add_header Cache-Control "public, max-age=0, must-revalidate";
        }

        location = /manifest.webmanifest {
          add_header Cache-Control "public, max-age=604800, must-revalidate";
        }

        location /static {
          add_header Cache-Control "public, max-age=31536000, immutable";
        }

        location ~* \.(?:js|css|png|jpg)$ {
          add_header Cache-Control "public, max-age=31536000, immutable";
        }

## SSL settings
ssl_certificate /etc/letsencrypt/live/hubs.tk/fullchain.pem; # SSL 경로 지정
ssl_certificate_key /etc/letsencrypt/live/hubs.tk/privkey.pem; # SSL 경로 지정
ssl_trusted_certificate /etc/letsencrypt/live/hubs.tk/chain.pem; # SSL 경로 지정
ssl_dhparam snippets/dhparams.pem; # dhparams.pem 경로 지정
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 1d;
ssl_session_tickets off;
ssl_ecdh_curve X25519:sect571r1:secp521r1:secp384r1;
ssl_stapling on;
ssl_stapling_verify on;
resolver 8.8.8.8 8.8.4.4 valid=300s;
resolver_timeout 10s;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers off;
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
}


위 내용을 메모장에 복사 후 한글로 표시한 부분을 자신의 상황에 맞게 수정 후 붙여넣으면 됩니다.


참고로 SSL 인증서 생성은 


https://blog.wsgvet.com/letsencrypt-wildcard-certification-issue-and-mariadb-install/


위 링크를 참조하시면 됩니다.



# dhparams.pem 경로 지정 부분은


https://blog.wsgvet.com/php7-4-install-and-gnuboard-5-4-install/


4. Nginx 설정파일 만들기에서 (3)dhparams.pem 생성하기를 참조하세요.



이제 거의 끝났습니다. 



ln -s /etc/nginx/sites-available/static.site /etc/nginx/sites-enabled/


위 명령어로 설정을 복사한 뒤



nginx -t


위 명령어로 nginx 설정파일에 이상이 없는지 체크 후, 문제가 없다면



service nginx reload


위 명령어로 재시작하면 됩니다.



5. 참조 사이트


https://docs.microsoft.com/ko-kr/azure/static-web-apps/publish-gatsby


https://raghuvirkasturi.com/gatsby-nginx-conf/


https://stackoverflow.com/questions/56963293/define-specific-cache-control-header-for-selected-file-only


https://www.gatsbyjs.org/docs/caching/

관련자료

  • 서명
    우성군의 NAS를 운영하고 있습니다.

    저의 즐거움이 여러분의 즐거움이면 좋겠습니다.

댓글 6개 / 1페이지

Computist님의 댓글


git push --set-upstream origin master
이러 처음엔 이렇게 해줘야 하더라고요.

이거 몰라서 예전에 반나절 날렸어요
git push 했다가

우성군님은 천재아니실까 생각합니다.

Computist님의 댓글의 댓글

전 git pull
git commit
git push
git clone
뭐 이정만 쓰는 라이트 유저입니다.

방송대 이메일 있으면 git 학생플랜 쓸수 있어서 어제
등록했어요

Computist님의 댓글의 댓글

저는 이제 1학기 남았습니다.
방송대 첫학기는 장학금 줘요
그것으로 중간에 자퇴하셔도 되고
시험을 안보셔도 되고

목적은
구글계정이빈다.
 
구글 계정 한개 만드시면
평생씁니다.
Total 7 / 1 Page
RSS
Vercel을 이용하여 정적사이트를 무료로 운영하기 댓글 2

소개 1. 정적사이트 생성기 소개 요새 nextjs, gatsbyjs, hugo, jekyll 등 정적사이트 생성기를 이용하며 블로그를 많이 만들고 …

Gatsby 테마 선택 후 Vercel로 홈페이지를 배포하기

Gatsbyjs 1. 들어가며제가 여러가지 방법으로 테마를 선택 후 배포(호스팅)을 해봤는데, 이 방법이 가장 빠르고 편하며, 관리하기 좋다고 생각합니다.2. …

Vercel에서 정적사이트 도메인 변경 및 Git 시작하기

Gatsbyjs 1. 도메인 변경하기지난 글에서 우리는 이미 홈페이지를 가지게 되었습니다.그런데 대시보드에서 자신의 프로젝트를 클릭하면, 위와 같이 주소가 엄청…

내 컴퓨터에서 정적사이트를 수정 후 Vercel에 배포하기 댓글 3

Github 1. 들어가며이제 홈페이지(정적사이트) 파일을 깃허브에서 다운 받았습니다.깃허브와 Vercel은 정확하게 연동이 되었지만, 내 컴퓨터와 깃허브는…

정적사이트 블로그 개발을 위한 도구 설치하기 댓글 5

Gatsbyjs 1. 들어가며이제 본격적으로 블로그 수정 및 개발을 할 시간입니다.nodejs, yarn, gatsby-cli를 설치할 예정입니다.2. node…

정적사이트를 내 컴퓨터에 띄우고 글 작성 후 배포하기 댓글 4

Gatsbyjs 1. 들어가며이때까지 따라오셨다면(1) 깃허브 계정과 Vercel과 연결되어 자동으로 배포되어 있고,(2) 내 컴퓨터와 깃허브 계정이 연동되어 …

최근글


새댓글