react-router-domを使ったViteアプリをGitHub Pagesで公開する方法【備忘録】

概要

先日、react-router-domを使用したViteアプリケーションをGitHub Pagesで公開した際に、想定していたアプリケーションの画面ではなく、ただ真っ白な画面が表示されてしまいました。
次回以降、同じ現象で困らないようにするため、この現象に対する対処法をまとめます。

方法

vite.config.tsファイルとmain.tsxファイルにbaseの設定を追記します。
<リポジトリ名>の部分は、GitHubのリポジトリ名で置き換えてください。

vite.config.ts

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

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

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { BrowserRouter } from "react-router-dom";


ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter 
+    basename={import.meta.env.DEV ? "/" : "<リポジトリ名>"}
    >
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

参考：Viteによって作成したReactアプリをGithub Pagesを使ってデプロイ！

package.jsonのbuildコマンドを書き換え、rebuildのコマンドを追記します。

package.json

{

// 省略

"scripts": {
    "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "tsc -b && vite build && cp -r dist docs",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
+    "rebuild": "vite build && rm -R docs && cp -r dist docs"
  },
  
// 省略

}

参考：ReactをGitHub Pagesにデプロイしよう〜Vite編〜

ターミナルでnpm run build(2回目以降のビルド時はnpm run rebuild)を実行してビルドしたのち、GitHubへアップロードします。

リポジトリページでSettingsタブを選択し、サイドメニューのPagesを選択します。Build and deploymentのbranchの項目を「main」ブランチの「/docs」に設定して「Save」ボタンを押下します。

Actionsタブでワークフローに✅がついたら、ワークフロー詳細画面の「deploy」カードに表示されているURLにアクセスし、想定通りのページが表示されているかどうかを確認します。