Next.jsで作ったアプリをGitHub Pagesにデプロイする

概要

• Next.jsで作ったアプリをGitHub Pagesで公開するまでの手順
  • はまりどころがあったのでその備忘です
• 以下の例ではGitHub Actionsを使ってmasterにPushされたら自動でデプロイされるようにしてます

はまりどころ①URLのbasepath問題

• GitHub Pagesで公開したアプリのURLはhttps://{アカウント名}.github.io/{リポジトリ名}/の形式になります
• {リポジトリ名}の部分のことをbasepathと呼んでいますがこれを設定する必要があります
  • 設定しないとJSファイルなどのリソースをhttps://{アカウント名}.github.io/xxx.jsとbasepathが無いURLでとりにいってしまいます
• next.config.jsにassetPrefixを入れることで設定できます

next.config.js

module.exports = {
  assetPrefix: '/repository-name',
};

• basepathが不要な環境で動かすこともあるので自分の場合は以下のようにしてます
  • dotenvはnpm i -D dotenvで追加しています

next.config.js

require('dotenv').config();

module.exports = {
  assetPrefix: process.env.GITHUB_PAGES ? '/repository-name' : '',
};

• GITHUB_PAGESという環境変数が渡された時だけbasepathの設定を入れるようにしています
• これをGitHub Actionsでデプロイするための設定は以下のような感じです
  • package.jsonのscriptsの"export": "next export"を入れるのを忘れずに

.github/workflows/deploy.yml

name: deploy
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 12
        uses: actions/setup-node@v1
        with:
          node-version: 12
      - name: install
        run: |
          yarn install
      - name: build
        run: |
          yarn build
        env:
          GITHUB_PAGES: true
      - name: export
        run: |
          yarn export
      - name: deploy
        uses: peaceiris/actions-gh-pages@v2.3.1
        env:
          PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
          PUBLISH_BRANCH: gh-pages
          PUBLISH_DIR: ./out

• buildのタイミングで環境変数にGITHUB_PAGESを設定しています
• GitHub Pagesにデプロイする処理はactions-gh-pagesを使っています
  • 詳しい使い方はこちらの記事をご参照ください

はまりどころ②JSファイルが404になってしまう問題

• ここまでの手順でデプロイに成功し画面を表示することはできますが、JSファイルなどの取得が全て404になってしまいます
  • URLは正しいはずなのになぜ？？？とはまりました

• 原因はGitHub Pagesの仕様として_から始まるディレクトリが見えないというものでした
  • 404が出てるファイルは_next以下に配置されている
• 回避するためには.nojekyllというファイルをデプロイ対象のディレクトリに配置する必要があります
• GitHub Actionsの設定ファイルのexportの後にtouch out/.nojekyllを追加します

.github/workflows/deploy.yml

name: deploy
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 12
        uses: actions/setup-node@v1
        with:
          node-version: 12
      - name: install
        run: |
          yarn install
      - name: build
        run: |
          yarn build
        env:
          GITHUB_PAGES: true
      - name: export
        run: |
          yarn export
          touch out/.nojekyll
      - name: deploy
        uses: peaceiris/actions-gh-pages@v2.3.1
        env:
          PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
          PUBLISH_BRANCH: gh-pages
          PUBLISH_DIR: ./out

• これでGitHub PagesでNext.jsアプリを公開することができました！

追記

• 記事を書こうとしてより詳しく調べていたら公式のwikiにちゃんと説明が書いてありました
  • https://github.com/zeit/next.js/wiki/Deploying-a-Next.js-app-into-GitHub-Pages