React(TypeScript) + ViteのアプリをGitHub Pagesにデプロイする！

はじめに

Reactで作成したページをGitHub Pagesでデプロイする方法についての備忘です。
下記ページを参考にしています。

手順

アプリの作成

• Github リポジトリを作成してローカルにcloneし、Reactアプリを作成します

npm create vite@latest

• コードをGitHubリポジトリにpushします

vite.config.tsの修正

vite.config.ts

// https://vitejs.dev/config/
export default defineConfig({
  base: '/<GitHubリポジトリ名>/',
  plugins: [react()],
})

gh-pagesパッケージのインストール

gh-pagesパッケージをインストールする。

npm install gh-pages --save-dev

package.jsonの修正

predeployスクリプトは、アプリケーションをデプロイする前に自動的にビルドプロセスを実行します。
deployスクリプトは、gh-pages パッケージを使用して、dist ディレクトリの内容を GitHub リポジトリの gh-pages ブランチに公開します。
（npm run buildコマンドを実行すると、distディレクトリが作成され、Reactアプリの全ての最適化されたファイルが格納されます。）

package.json

{
  "homepage": "https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/",
    ～略～
  "scripts": {
    ～略～
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    ～略～
  },
  "devDependencies": {
    ～略～
  }
}

デプロイ

デプロイコマンドでデプロイを実行する。

npm run deploy

ページの表示

GitHubのSettings->Pagesの項目のVisit siteからページに飛べます。

表示されました！