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

GitHub Actions で React アプリを GitHub Pages にデプロイする際、設定が上手くいかずに詰まりました。意外にも日本語の記事が見当たらないので、防備録を兼ねて投稿しておきます。

参考記事

こちらの記事を参考にすることで自動デプロイに成功しました。
Deploying a React App to GitHub Pages automatically

GitHub Actions による自動デプロイの流れ

ワークフローを作成するまで

まずは GitHub のリポジトリを選択し、「Settings」タブ >「Pages」>「Build and deployment」下の「Source」で「GitHub Actions」を選択します。

次にワークフローを作成します。プロジェクトのルートに「.github」というディレクトリを作成し、その中に「workflows」というディレクトリを作成します。次に「workflows」の中に .yml ファイルを作成します。.yml ファイルの名前は何でも OK です。この例では「deploy-gh-pages.yml」という名前にしました。

ワークフローの内容

こちらが「deploy-gh-pages.yml」の中身です。

.github/workflows/deploy-gh-pages.yml

name: Deploy GitHub Pages

on:
  push:
    branches: ['main']

  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  build:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm ci && npm run build
        env:
          PUBLIC_URL: /Example_App
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: './build'

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

カスタマイズが必要な部分のみ簡単にご説明します。

.github/workflows/deploy-gh-pages.yml

name: Deploy GitHub Pages

「name:」に続けてワークフローの名前を記入します。この例では「Deploy GitHub Pages」という名前にしました。

.github/workflows/deploy-gh-pages.yml

on:
  push:
    branches: ['main']

「branches:」に続けてデフォルトブランチの名前を記入します。この例では「main」ブランチです。

.github/workflows/deploy-gh-pages.yml

- name: Setup Node
  uses: actions/setup-node@v3
  with:
    node-version: 18

「uses: actions/setup-node@v3」の下に使用中の Node.js のバージョンを記入します。この例では「18」です。

.github/workflows/deploy-gh-pages.yml

- name: Build
  run: npm ci && npm run build
  env:
    PUBLIC_URL: /Example_App

「PUBLIC_URL:」に「/リポジトリの名前」を記入します。この例では「/Example_App」です。

.github/workflows/deploy-gh-pages.yml

- name: Upload artifact
  uses: actions/upload-pages-artifact@v1
  with:
    path: './build'

「uses: actions/upload-pages-artifact@v1」の下の「path:」に、「npm run build」で生成されるディレクトリの名前を記入します。「create-react-app」でプロジェクトを生成した場合は「./build」です。

ワークフローの実行

ワークフローが完成したら commit して push します。その後デフォルトブランチに merge すると、自動的にワークフローが実行されます。

「Actions」タブの「All workflows」下に実行中および実行済みのワークフローが一覧で表示されます。成功すると緑色のチェックマークが付きます。

失敗した場合は赤い×マークが付きます。この場合は、失敗したワークフローをクリックすると、「Annotations」の下に失敗した理由が表示されます。
また、.yml ファイル名の下の Job 名（この例では「build」と「deploy」）をクリックするとログが表示されるので、エラーの詳細を知ることができます。

ワークフローの実行が成功したら、GitHub Pages にデプロイできたはずです。
GitHub Pages の URL にアクセスしても 404 だった場合は、「uses: actions/upload-pages-artifact@v1」の下の「path:」の設定が間違っている可能性がありますので確認してみましょう。

最後に

ここまで読んでくださってありがとうございました。大雑把な説明になってしまいましたが、どなたかのお役に立てば幸いです。