React + Vite アプリを GitHub Pages にデプロイする方法

はじめに

今回は React + Vite で作成したアプリを GitHub Pages を使って無料で公開する手順を解説します。
手順は以下の通りです。

手順

1. プロジェクトの準備
2. Vite 設定を変更する
3. デプロイ用パッケージを導入
4. package.json にスクリプト追加
5. アプリをビルド
6. GitHub Pages にデプロイ
7. GitHub リポジトリ設定を変更
8. 公開URLを確認

1.プロジェクトの準備

まずは React + Vite でプロジェクトを作成し、開発します。

npm create vite@latest プロジェクト名 -- --template react
cd プロジェクト名
npm install
npm run dev

2. Vite 設定を変更する

vite.config.js に base を設定します。

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

export default defineConfig({
  base: '/react_todo_list/', 
  plugins: [react()],
})

3. デプロイ用パッケージを導入

ビルド後のファイルを GitHub Pages の gh-pages ブランチに自動でアップするため、gh-pages パッケージをインストールします。

npm install --save-dev gh-pages

4. package.json にスクリプト追加

package.json の scripts に以下を追加し、コマンドでデプロイできるようにします。

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "deploy": "gh-pages -d dist"
}

5. アプリをビルド

以下を実行して、本番用に静的ファイルを生成します。

npm run build

6. GitHub Pages にデプロイ

ビルドしたファイルを gh-pages ブランチに自動でアップロードします。

npm run deploy

7. GitHub リポジトリ設定を変更

GitHub のリポジトリページを開く

「Settings」タブ → 左側メニューの「Pages」をクリック

「Source」で gh-pages ブランチを選択し、保存する

数分待つと公開URLが表示されます
⇩Your site is live at の後がURLです

8. 公開URLを確認

公開URLにブラウザからアクセスすると、あなたの React アプリが公開されています！

これで React + Vite アプリを簡単に GitHub Pages で公開できます。