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

こんにちは！
今回はVite で作成した React のアプリを
GitHub Pages へデプロイする方法についてアウトプットしていきます！

手順

1. 初期セットアップ
2. Vite の設定を変更
3. デプロイ用パッケージを導入
4. package.json の設定
5. デプロイ
6. GitHub リポジトリ設定を変更
7. 公開 URL を確認

1. 初期セットアップ

以下のコマンドをターミナルで実行することで Viteを使った環境構築をします。

npm create vite@latest

コマンドを実行すると以下のことを求められます。
今回は以下の箇条書きの矢印の右側の言葉を入力、選択しました。

• プロジェクト名 → react_todo_list02
• フレームワーク → React
• バリエーション選択 → JavaScript

バリエーション選択を終了しましたら以下のような画面になります。

その次にやることは3つ

1. プロジェクトのディレクトリに移動
   → cd react_todo_list02
2. コマンドを2つ実行
   1. npm install
   2. npm run dev

上記2つのコマンドを実行することで初回セットアップが完了します。

npm run devをするとローカルサーバーが立ち上がります。
上記画像ではhttp://localhost:5174でアクセスできます。

上記画像が表示されたら初期セットアップは完了です。

アプリのコードは割愛します。

以降はローカルで開発が終わり
アプリをPublicリポジトリへプッシュした前提で話を進めます。

2. Vite の設定を変更

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

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

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

• スタイルはデフォルトの設定＋Tailwind CSSを採用したため
  pluginsに追記している
• baseはGitHubで設定したリポジトリ名を設定

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

GitHub Pagesへデプロイするためのパッケージを下記コマンドでインストール

npm install gh-pages --save-dev

4. package.json の設定

以下の3つを追加します。

• homepage
• predeploy
• deploy

{
  "name": "react_todo_list2",
+ "homepage": "https://<GitHubのユーザー名>.github.io/<リポジトリ名>/",
  "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": {
     中略
}

5. デプロイ

以下のコマンドを実行することでGitHub Pagesへアプリをデプロイできます。

npm run deploy

npm run deploy だけで十分ですが
ビルドエラーを事前に確認したい場合は npm run build を実行してもOK

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

以下の順序で変更を行いましょう

• GitHubのリポジトリページの Settings → Pages へ遷移
• Build and deployment - Branch を gh-pages に変更して Saveをクリック
• 数分待ってから Visit Site をクリックすると作成したアプリが表示される

7. 公開 URL を確認

Visit Siteをクリックして動作確認をして問題なければデプロイ成功です！

これで Vite で作成した React のアプリを GitHub Pages へデプロイすることができます。

参考文献

https://blog.logrocket.com/gh-pages-react-apps/
https://qiita.com/u_i_f_v/items/d203010b2b07874cabc1
https://qiita.com/keyizhen/items/cf3d1cfa16d60c470401#react%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92github-pages%E3%81%A7%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91
https://qiita.com/shugo1125/items/76979e6a7974bbd32ce3
https://qiita.com/Tohru-f/items/c91714615c80ab0e7fe3