Viteで作成したReactアプリをGitHub Pagesにデプロイする

はじめに

本記事では、Vite を用いて作成した React アプリを GitHub Pages にデプロイする手順を解説します。前提として、npm create vite で React 環境を構築済みであることを想定しています。
https://ja.vite.dev/guide/#最初の-vite-プロジェクトを生成する

GitHub Actions による自動ビルドについて

今回の手順では、ローカルで npm run build を実行せずに、GitHub Actions による自動ビルド＆デプロイを行います。ただし、ビルドの流れを理解しやすくするために、あえてローカルでのビルド手順も最初に紹介します。

手順

以下の流れで進めます。

1. React アプリのローカルでのビルド手順の確認
2. vite.config.js の設定
3. GitHub Actions のワークフロー作成
4. GitHub Pages にデプロイ

https://ja.vite.dev/guide/static-deploy.html#github-pages

1. React アプリのローカルでのビルド手順の確認

package.json に記載されている build コマンドを使います。

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build", 👈️ これ！
    "lint": "eslint .",
    "preview": "vite preview"
  },
}

ターミナルにてこちらのbuildコマンドを実行します。

terminal

npm run build

実行後、下記のようにビルド結果がプロジェクト直下のdistディレクトリに出力されます。
こちらを github Pages 等のプラットフォームにデプロイすることでアプリを公開できるようになります。

terminal

dist/
├── assets
│   ├── index-BD5lPyyF.css
│   └── index-DrXMdGPY.js
├── index.html

それではビルドのイメージが付いたところで、実際のデプロイ手順を見ていきましょう。

2. vite.config.js の設定

GitHub Pages の URL に対応するように base にリポジトリ名を設定します。
下記公式の手順に従って、私の場合は/react_todo_list/としました。

https://<USERNAME>.github.io/<REPO>/ にデプロイする場合（例: リポジトリーは https://github.com/<USERNAME>/<REPO>）、base を '/<REPO>/' と設定してください。

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vite.dev/config/
export default defineConfig({
  base: '/react_todo_list/',  👈️ リポジトリ名を設定
});

3. GitHub Actions のワークフロー作成

プロジェクト直下に.github/workflowsディレクトリを作成して、deploy.ymlを配置します。

terminal

.github/
└── workflows
    └── deploy.yml

そしてdeploy.ymlにワークフローを記載します。こちらのコードを参考にしてください。

また、今回mainブランチではなく、トピックブランチであるreact-todoブランチへのプッシュ時にワークフローの実行を想定していたので、対象ブランチを修正しています。

deploy.yml

# 静的コンテンツを GitHub Pages にデプロイするためのシンプルなワークフロー
name: Deploy static content to Pages

on:
  # 対象ブランチプッシュ時に実行されます
  push:
    branches: ['react-todo'] 👈️ プッシュ先のブランチ指定

  # Actions タブから手動でワークフローを実行できるようにします
  workflow_dispatch:

# GITHUB_TOKEN のパーミッションを設定し、GitHub Pages へのデプロイを許可します
permissions:
  contents: read
  pages: write
  id-token: write

# 1 つの同時デプロイメントを可能にする
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # デプロイするだけなので、単一のデプロイジョブ
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # dist フォルダーのアップロード
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

4. GitHub Pages にデプロイ

Github Actions のワークフローが作成できたので、対象ブランチにプッシュしましょう。
GitHub Actions の実行が完了すると、GitHub Pages にデプロイされます。
デプロイ結果を確認するには、GitHub リポジトリの「Settings」→「Pages」に移動し、表示されている URL にアクセスしてください。

デプロイ対象のブランチが許可されていない場合の対応

私の場合、react-todoブランチにプッシュしたのですが、なぜかデプロイに失敗しました。
「Actions」に記載していたエラー文を確認したところ、react-todoブランチはルールによりデプロイが許可されていないことが原因のようでした。

Branch "react-todo" is not allowed to deploy to github-pages due to environment protection rules.

こちらの対処として、「Settings」>「Environments」より protection rules の変更を行う必要があります。デフォルトだとmainブランチのみデプロイが許可されているため、他のブランチを対象にする場合は追加する必要があります。

下記のようにreact-todoブランチを追加しました。

そして再度、ワークフローを実行したところ無事デプロイできるようになりました。

おわりに

本記事では、Vite 製 React アプリを GitHub Pages にデプロイする手順を紹介しました。

デプロイ後、変更を加えたい場合は react-todo ブランチにプッシュすれば、GitHub Actions により自動的に再デプロイされるようになっています。

最後に私がデプロイしたアプリを共有しておきます！🚀

https://otaki0413.github.io/react_todo_list/