Edited at

React Next アプリを GitHub Actions で GitHub Pages にデプロイ

React.js で作成したアプリケーション、とりわけ今回は Next.js で始めたプロジェクトを例に GitHub Actions を使って GitHub Pages へのデプロイを自動化する方法を紹介します。

Vue, Nuxt についての記事もあります。


Create Next App

上記を参考に Next のプロジェクトを作成してください。この記事作成時の Next バージョンは 9.0.5 です。


GitHub Actions の設定

peaceiris/actions-gh-pages: GitHub Actions for deploying to GitHub Pages with Static Site Generators を利用します。

peaceiris/actions-gh-pages - GitHub

GitHub Actions を用いた GitHub Pages へのデプロイ自動化方法についてより詳しく知りたい方は上記記事を参考にしてください。ACTIONS_DEPLOY_KEY の設定方法もこちらの記事で解説しています。

ACTIONS_DEPLOY_KEY を設定した後、以下のファイルを master ブランチに Push してください。自動で GitHub Actions による Next のビルドと GitHub Pages へのデプロイが始まります。

名称が username/username.github.io の repository であれば https://username.github.io/ 形式の URL で Web app が公開されます。


.github/workflows/gh-pages.yml

name: github pages

on:
push:
branches:
- master

jobs:
build-deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@master

- name: setup node
uses: actions/setup-node@v1
with:
node-version: '10.x'

- name: Cache dependencies
uses: actions/cache@v1
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-

- name: install
run: yarn install

- name: build
run: yarn build

- name: export
run: yarn export

- name: add nojekyll
run: touch ./out/.nojekyll

- name: deploy
uses: peaceiris/actions-gh-pages@v2.4.0
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
PUBLISH_BRANCH: gh-pages
PUBLISH_DIR: ./out



Project pages

User and Organization リポジトリ (username/username.github.io) の場合は GitHub Actions の workflow を追加するだけで十分です。一方で Project pages (username/project_name 形式のリポジトリ) の場合は next.config.js に対して以下のような修正が必要です。

Web app は https://username.github.io/project_name/ 形式の URL で公開されます。


next.config.js

module.exports = {

// some configuration
assetPrefix: process.env.NODE_ENV === "production" ? "/project_name" : ""
// another configuration
};


package.json

"scripts": {

"build": "env NODE_ENV='production' next build"
}


独自ドメイン

GitHub Pages へデプロイした React, Next アプリケーションを独自ドメインで公開する手順です。

User and Organization リポジトリで公開するために next.config.js を修正していた場合は取り消しておきます。

以下の記事でも独自ドメインの設定方法を解説しているので参考にしてください。

CNAME./out に加える step を export step の後に追加します。

- name: add CNAME

run: cp ./path/to/CNAME ./out/


参考