VercelにSPAをデプロイするときに少し躓いた話
VercelにReact Routerを使ったページをデプロイしました。
その際、ページ遷移はReact Routerにお願いしているので、トップページ以外のURLを直接叩かれた場合に何も対処していないと404ページになってしまいます。
そういった場合、Webサーバの機能でURLを書き換えてアクセスする必要があります。また、そういった機能をURL Rewriteといいます。
VercelにもURL Rewriteを設定することができ、vercel.json
ファイルに次のような内容を記載しておきます(URL Rewriteから引用し、少し編集)。
{ "rewrites": [ { "source": "/about", "destination": "/about-our-company.html" }, { "source": "/resize/:width/:height", "destination": "/api/sharp" } ] }
今回躓いたのは、このvercel.json
ファイルの置き場所です。プロジェクトのルートに置けばいいと思っていたので、プロジェクトのルートに置いていたのですがうまく反映しませんでした。
今回は、Vercelの設定でルートディレクトリを変更していました。その場合には、変更後のルートディレクトリに置かないといけません。