GitHub Action으로 Next.js 배포하는 방법

Next

필자는 Nextjs를 자주 애용하는데 리액트의 개발 환경을 매우 간단하게 구축할 수 있고 간단한 것에 비해 상당히 합리적인 개발환경을 가지고 있다고 생각하기 때문이다. 또한 SSR까지 손쉽게 가능하니 좋아하지 않을 수가 없다. 현재까지는 동적으로 렌더링이 필요한 경우에만 사용했기에 도커에 올려서 사용해 왔다. 그러다 최근에는 정적 페이지도 Nextjs를 이용해서 개발하고 싶어졌는데 방법을 찾아보니 매우 간단하더라.

next build
next export

위 명령어를 실행하면 out 디렉터리에 빌드된 페이지가 생성된다.

Command for Deploy

이제 위 방식을 이용해서 여러가지 방법을 동원하면 자신이 원하는 공간에 손쉽게 호스팅이 가능할 것이다. 필자는 그 중에서도 깃허브 페이지에 호스팅하고 싶었는데 직접 다른 브런치에 올리려면 아래와 같은 명령어를 입력해야 한다.

touch out/.nojekyll # jekyll 페이지 빌드를 막기 위함
git add out/
git commit -m 'deploy to gh-pages'
git subtree push --prefix out origin gh-pages

누군가 개발자는 '자동화 괴물'이라고 그랬다. 우리는 그 명성에 걸맞게 이 작업을 자동화할 의무가 있다. 커밋만 올리면 알아서 빌드와 배포를 진행해주는 방법을 고민해보자.

Travis

필자가 가장 먼저 발견한 자동화 배포는 https://travis-ci.com 이 외부 사이트를 이용하는 것이었다. yml 파일을 리포에 만들어 놓으면 커밋을 올릴때 마다 빌드를 도와주는 것 같다. 간단해 보였지만 현 상황에선 '굳이?' 라는 생각이 들었다. 우리에겐 더 훌륭한 깃허브 액션이 있지 않은가?

GitHub Action

리포 속 .github/workflows 안에 아래 파일을 생성하면 된다.

name: Build and Deploy
on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2.3.1
        with:
          persist-credentials: false

      - name: Install and Build
        uses: actions/setup-node@v1
      - run: npm install
      - run: npm run build
      - run: npm run export
        env:
          CI: true
          DEPLOY_TARGET: gh-pages
      - run: touch out/.nojekyll

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@3.7.1
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages  # 배포될 브랜치
          FOLDER: out # 이 폴더에 있는 파일을 배포
          CLEAN: true # 배포 브랜치에 있는 파일들을 자동으로 삭제

이제 메인에 푸시를 하면 깃허브 액션이 자동으로 빌드를 해주고 위 설정한 브랜치에 페이지가 올라간다.

Reference

• nextjs gh-pages로 배포하기 · boramyy @boram kim #
• Deploying a Next.js app to GitHub Pages · Dev To @James Wallis #