Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
14
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@ozaki25

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.jsassetPrefixを入れることで設定できます
next.config.js
module.exports = {
  assetPrefix: '/repository-name',
};
  • basepathが不要な環境で動かすこともあるので自分の場合は以下のようにしてます
    • dotenvnpm i -D dotenvで追加しています
next.config.js
require('dotenv').config();

module.exports = {
  assetPrefix: process.env.GITHUB_PAGES ? '/repository-name' : '',
};
  • GITHUB_PAGESという環境変数が渡された時だけbasepathの設定を入れるようにしています
  • これをGitHub Actionsでデプロイするための設定は以下のような感じです
    • package.jsonscripts"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は正しいはずなのになぜ???とはまりました

スクリーンショット 2019-11-14 8.06.20.png

  • 原因は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アプリを公開することができました!

追記

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
14
Help us understand the problem. What are the problem?