アレについて記す

シングルページアプリケーションでURLを自然にみせるために、history.pushStateを使用することがよくあります。
このURLはサーバーに存在しないリソースを指し示すため、ブラウザリロードなどの操作でリクエストを送ると404 NotFoundになってしまいます。
一般的には、サーバーに404だったらSPAのベースとなるファイル(index.html)にリダイレクトさせる設定をすることでこの問題を回避します。

CloudFront+S3を用いてVue2で作成したSPAを配信する場合も、同様の問題が発生します。
ざっとみた感じでは、CloudFrontのErrorPagesに403エラーハンドリングを設定し、index.htmlへリダイレクトさせる方法がブログなどで多く紹介されています。
上記の方法ではAPIも同じCloudFrontを通してアクセスさせた場合に、そのAPIの結果も同様にハンドリングされてしまう問題が生じます。

本記事ではErrorPagesを利用せずにindex.htmlへリダイレクトさせる方法を紹介します。