【React】React + Vite のアプリを GitHub Pages にデプロイする

React + Vite で作ったアプリを GitHub Pages にデプロイする方法をまとめます。
既にアプリの実装が終わってGitHubのPublicリポジトリにプッシュしている前提で進めますので、最初のセットアップなどはnpm create vite@latestのコマンドで行ってください。
デプロイにあたっては下記の記事を参考にさせていただきました。

• Deploying REACT+VITE website in Github Pages | DevelopersIO

gh-pagesのインストール

ReactアプリをGitHub Pagesにデプロイするためのパッケージがあるので下記のコマンドでインストールします。

npm install gh-pages --save-dev

設定を追加

下記の行を追加します。

package.json

{
+ "homepage": "https://<GitHubのユーザー名>.github.io/<アプリをプッシュしたリポジトリ名>/",
  "name": "todo-list",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    中略
}

vite.config.js

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

// https://vite.dev/config/
export default defineConfig({
+ base: '/<アプリをプッシュしたリポジトリ名>/',
  plugins: [react()]
});

デプロイする

下記のコマンドでデプロイしましょう。画像のように「Published」と表示されればOKです。

npm run deploy

アプリにアクセスする

リポジトリにアクセスして Settings → Pages と進み、画像のようになっていることを確認したら、Visit siteでアプリにアクセスしましょう。
実際に反映されるまでラグがあるのかわかりませんが、先程のデプロイコマンド直後だとまだアプリが表示されない場合があるため、少し時間をおいてアクセスすると表示されるかと思います。