概要
- S3+CloudFrontにデプロイして配信しているSPAで、「/」以外のページでリロードすると403エラーになってしまう時の対処をメモとして残したいと思います。
エラーの詳細
- SPAで、「/」以外のページでリロードすると以下のように403エラーがでてしまう。
- （今回の場合は「/works」でリロードすると下記のような画面が表示されている。）
原因
-
SPAの場合、https://example.com にアクセスするときはサーバ側と通信を行なっているが、それ以外のページ（例えば https://example.com/about 等）に遷移するときは、サーバ側と通信を行なっておらず、仮想的に遷移したことにしています。
-
つまり、index.htmlはあるけど、about.html「/about」は存在していないため、リロードでサーバー側と通信しようとしても403エラーが出てしまうということです。
対処法
- CloudFrontのエラーページで以下のように設すればOK！
- 今回は403エラーが出ていたので、403が出た場合に表示（転送）するページを指定しています。
おわりに
対処法自体は簡単ですが、「なぜ」の部分を自分の中で整理するために記事にしてみました。
間違っているところ等ありましたらコメントいただけますと幸いです
参考