投稿日:2024/10/18 最終更新日:2024/10/18
【5分で解決】Vite/Reactでビルドしたときに真っ白で映らない時の対処法
何が発生したか？
Vite/Reactで作成した環境にてビルドしたファイルをサーバーアップしたところ真っ白で何も映らなかった。
run devの開発環境では問題無かったのにエラー表示もなくかなり修正に時間が掛かってしまった。
原因
baseパスの問題でした（しばらくやってなかったから忘れてた）
サーバーではサブディレクトリでアップしたため正しくパスを読み込めていませんでした。
そのためBrowserRouterのコンポーネント設定でパスが正しく読み込めなくなってしまうため真っ白な画面になっていました。
かといって直接パス指定をすると開発環境で動作しなくなるため、baseパスの設定を開発用と本番環境に分けてあげる流れになります。
原因が分かるとサクッと解決できます。
解決方法
まずはvite.config.jsを下記に修正します。
export default defineConfig(({ mode }) => {
// .envファイルを使うためのもの
process.env = {...process.env, ...loadEnv(mode, process.cwd())};
// modeがproduction(本番環境)ならprocess.env.VITE_PRODUCTION_PATHを設定
// modeがproductionでない(開発環境)ならルートパスを設定
let basePath = (mode === "production" ? process.env.VITE_PRODUCTION_PATH : "/");
return {
base: basePath,
plugins: [
react(),
env({ prefix: "VITE", mountedPath: "process.env" }),
]
};
});
次にApp.tsxを下記に修正します。
import { BrowserRouter, Route, Routes } from "react-router-dom";
import OtherPage from "./hogehoge/OtherPage";
import TopPage from "./hogehoge/TopPage";
function App() {
return (
<BrowserRouter basename={import.meta.env.DEV ? "/" : process.env.VITE_PRODUCTION_PATH}>
<Routes>
<Route path="/" element={<TopPage />} />
<Route path="/other" element={<OtherPage />} />
</Routes>
</BrowserRouter>
);
}
export default App;
最後に環境変数を設定します。
VITE_PRODUCTION_PATH = "サブディレクトリの相対パス"
// 例 https://hoge.com/fuga/なら /fuga/ を設定これでrun devとサーバーアップのページで両方映ればOKです。
