【Laravel×React】サブディレクトリにViteでビルドしたReactアプリをアップしたら真っ白になった

ルートディレクトリではなくサブディレクトリにLaravelとReactで作成したアプリをアップした際に真っ白になってしまって詰まったので備忘録を残したいと思います。

環境

  • Laravel9
  • React17
  • React Router DOM v6
  • Vite

詰まった個所

https://example.comのようなルートディレクトリではなくhttps://example.com/testのようなサブディレクトリにLaravelとReactで作成したアプリをビルドしてアップしたら真っ白になって表示されなくなりました。
ディベロッパーツールを確認してみますとまずViteでビルドしたcssとjsが読み込めていないことがわかりました。
この点に関してはLaravelのドキュメントにも書かれていますがベースURLのカスタマイズで解決します。

ASSET_URL=https://example.com/test

念のため、package.jsonの編集も行います。

{
	"private": true,
	"homepage": "./", //追記
	.
	.
}

しかし、それでも解決せず…

解決策

今回React Router DOMを使ってルーティングを設定していたのですが、それがうまく読み込まれていなかったのが原因でした。
これはreact-router-domのBrowserRouterにbasenameを付与することで解決します。
ここを追記するとbasenameで設定したurlをベースとして画面が表示するようになりました。
また今回はこのbasenameを環境変数から呼び出すようにしました。

Laravel×Viteでは環境変数はVITE_ というプレフィックスを付与したうえで、import.meta.envオブジェクトを介して呼び出すことができます。

https://readouble.com/laravel/9.x/ja/vite.html
https://ja.vitejs.dev/guide/env-and-mode.html

VITE_BASENAME=/test/
<BrowserRouter basename={import.meta.env.VITE_BASENAME}> // 追記
	<Routes>
		<Route exact path="/" element={<Top />} />
		<Route exact path="/about" element={<About />} />
	  .
	  .
	</Routes>
</BrowserRouter>

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。