Github actions를 활용한 Gatsby 앱 배포 자동화

나는 github pages를 이용하고 싶다!

구글에 검색해서 나오는 대부분의 gatsby 튜토리얼 들은 netlify에 배포하는 케이스를 다루고 있었다. 아무래도 배포가 간단하고 netlify에서 제공하는 cms를 붙이기도 쉽다보니 많이들 활용하는것 같았다. 근데 나는 github.io 페이지가 갖고 싶어서 무작정 github page부터 찾아보기 시작했다.

일단 그냥 배포해보자

사실 그냥 배포하는 건 쉽다.

우선 gh-pages 패키지를 설치하고 아래와 같이 명령어를 입력하면 된다.

gatsby build && gh-pages -d public -r [리파지토리 주소] -b [브랜치명]

물론 그 전에 github에 pages 사용 설정을 해야하는데 그건 귀찮으니 잘 정리된 블로그로 대체! GitHub Pages를 이용한 무료 홈페이지 만들기

여기까지만 하면 사실 잘 배포되고 모두가 해피하지만 문제는 정적홈페이지라는 특성상 컨텐츠가 업데이트될 때마다 빌드해서 배포해줘야하는 귀찮음이 있다.

Github actions 활용하기

우선 나는 리파지토리의 master브랜치에 소스코드를 담고 gh-pages브랜치에 실제 빌드되어 배포될 정적파일들을 저장하는 구조를 택했다.

그렇다면 master브랜치에 push될 때 gh-pages 브랜치로 빌드를 해주면 된다. 다행스럽게 누군가 이미 만들어놓은 템플릿이 있어서 잘 가져다 쓰기만 하면 됨.

gatsby-gh-pages-action

이걸 가지고 workflows yml파일을 만들어 보자

name: Gatsby Publish
on:
  pull_request:
    branches:
      - master
    paths-ignore:
      - '**/README.md'
  push:
    branches:
      - master
    paths-ignore:
      - '**/README.md'
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: enriikke/gatsby-gh-pages-action@v2
        with:
          access-token: ${{ secrets.ACCESS_TOKEN }}
          deploy-branch: gh-pages
          skip-publish: false

master 브랜치에 푸시되거나 풀리퀘스트가 보내졌을 때 action이 돌도록 설정했고 readme파일의 업데이트시에는 스킵하도록 paths-ignore를 설정해줬다.

하나 중요한 점은 repo scope를 갖는 personal access token이 필요한데 github 계정의 settings - Developer settings - Personal access token에서 생성가능하다.

이렇게 생성한 토큰을 해당 리파지토리의 secret에 저장해두고 secret name을 yml파일의 access-token 항목에 넣어주면 끝.

이제 마스터 브랜치에 푸쉬 할 때마다 자동으로 deploy되는 것을 확인할 수 있다.

포스트 작성해서 푸쉬하는것도 귀찮아

이제 cms를 붙일 차례다. netlify를 먼저 고려했었는데 뭔가 netlify에 deploy되지 않은 앱에 붙이는건 귀찮아보여서 다른 cms서비스를 찾던 중 Forestry라는걸 발견했다.

간단하게 리파지토리 연동해주고 블로그 포스트의 frontmatter들을 설정해주면 포스트 작성 시 알아서 해당 리파지토리에 md파일이 생성된다.

이제 master에 md파일이 푸쉬되었으니 배포는 github action이 처리해줄 것이다.