Vercel に SPA をデプロイする

クライアントサイドルーティング(React Router 等)の SPA を Vercel に載せるときの必須設定(gbf-navi)。

  • 全パスを index.html に rewritevercel.json
    { "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }
    これが無いと /characters 等のディープリンク直アクセスや再読み込みで 404(サーバーにその パスのファイルが無く、ルーティングは JS 側にあるため)。全部 index.html に寄せて JS に任せる。
  • ビルド:Vite なら vite buildnpm run build)→ dist/ を Vercel が配信。
  • .vercel/(プロジェクト紐付け情報)はローカルに生成される。

注意:gbf-navi はローカルでは Viteとローカル保存サーバーを同時起動 の Express 永続化を使うが、 Vercel(静的ホスティング)にはその API サーバーは無い。デプロイ版で永続化を使うなら別途バックエンドが要る。

出典:gbf-navivercel.json