かっぱの記録

かっぱさんのいろいろな記録。主にプログラム関連。

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の設定でルートディレクトリを変更していました。その場合には、変更後のルートディレクトリに置かないといけません。