github page blog 배포 빌드 자동화 Github Action

github을 이용해서 포스팅하는 경우 빌드하는 과정이 한번 필요해요. PC에서 해도 되기는 하는데 다른 PC에서 하는 경우 조금 불편한 경우가 있어요. 그런 경우 Github Action을 통해서 자동화가 가능합니다. 이미 github page 블로그가 있다고 가정합니다.

토큰 생성

자동 배포하는 과정에서 사용할 토큰이 있어야 합니다. 여러개 만들 수도 있고요. 깃헙 설정에서 개발자 설정 메뉴로 들어가세요. Settings 메뉴에서 Developer settings에 있는 Personal access tokens 메뉴로 들어가세요. 링크로 접속해도 됩니다. Generate new token를 눌러서 생성 링크로 바로 접속하세요. 만료 기간을 선택하고 repo 부분을 모두 선택하고 생성하세요.

생성한 토큰을 잘 복사해서 메모해두세요. 이 토큰은 명령어로 깃헙을 관리할 때도 사용할 수 있어요. 이 토큰을 자동화에서도 사용해야 합니다. 레파지토리 설정으로 이동하세요. Settings에 Secrets에 있는 Actions를 누르고 나오는 New secret으로 이동하세요. GITHUB_TOKEN이라고 입력하고 Secret 부분에 복사했던 토큰을 넣으세요.

Actions 생성

deploy.yml 파일을 생성 하세요. 깃헙 웹 페이지에서 바로 작성할 수 있어요. 

.github/workflows/deploy.yml

아래 내용을 복사 붙여넣기 하세요.

name: build gatsby
on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: '16.x'
      - name: Cache node_modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{runner.OS}}-build-${{hashFiles('**/package-lock.lock')}}
          restore-keys: |
            ${{ runner.OS }}-build-${{ runner.OS }}-
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
        env:
          NODE_ENV: production
      - uses: peaceiris/actions-gh-pages@v2
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          PUBLISH_BRANCH: deploy
          PUBLISH_DIR: ./public

서브 주소를 사용하는 경우

깃헙 계정 여러 개를 사용하는 경우 주소가 prefix가 있을 수 있는데요. 이럴 경우 추가 설정을 해야 합니다.

const path = require('path');

module.exports = {
  pathPrefix: '/경로',

  siteMetadata: {
      ...
  },
  plugins: [
    ...
  ],
};

또한 package.js 파일을 열어서 build 부분을 수정하세요.

gatsby build --prefix-path

이게 푸시가 일어날때마다 자동으로 빌드되어 내용이 갱신됩니다.