vue-routerを使っったVueのSPAをVercelにホストするときの注意点
何も考えずVue + vue-routerで作ったSPA(CSR)をVercelにデプロイしたところ、ページ遷移は正常に動くが、リロードで 404エラーになる問題が発生した。 CloudFrontやNetlifyでもSPAをホストするときには必要な、「デフォルトのルートオブジェクトの指定」ができてないのが原因だとすぐに当たりがついたが、VercelではここらへんもNo Configでケアされているものだと勝手に思っていたので、少し困った。
また、「vue-routerを使っったVueのSPA」に限定した話でもない。
routerの設定は以下
code:typescript
import Index from './pages/Index.vue'
import Authenticate from './pages/Authenticate.vue'
const routes: RouteRecordRaw[] = [
{
path: '/',
component: Index,
},
{
path: '/authenticate',
component: Authenticate,
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
リポジトリのルートに置いた vercel.json に以下の記述すると解決した
code:json
{
"rewrites": "source": "/:path*", "destination": "/index.html" }
}
Next.jsやNuxt.jsなどスキーマが決まったconfigファイルやファイルパスベースでルーティングが定義されているフレームワークの場合はVercel側でよしなに設定を解釈してここらへんの設定を自動でやってくれるようだが、古き良きSPAでは手動で設定しないといけなかったという話だった。 参考など
Vercelのrewritesのdoc
vercel/serveに上がってるそれっぽいIssue
この コメントのとおりだが、Issueが投稿された当時とは現在(2021/06)ではrewritesの正規表現の記法が変わっている