CloudFront+S3構成のSPA Webアプリでルートページ以外に直で行ったときにAccessDeniedになった件について

React+React-router-domでパスで画面遷移ができるアプリケーションを作り、CloudFront+S3の構成でデプロイしました。

そうしたら、ルートページ「/」にはアクセス可能。
また、ルートページから「/hoge」に遷移した時にはAccessDeniedにならずに遷移する。

しかし、「/hoge」に直で移動するとAccessDeniedになるという事象に遭遇しました。

この現象はSPAはindex.htmlにアクセスしているから発生したのではないかと思います。

つまり、ルートページ経由で「/hoge」にアクセスした場合は、あくまでも"index.html"を見ていることになっているのですが、直接「/hoge」にアクセスした場合は"index.html"ではなく"hoge.html"を見ているとS3が認識しているようなのです。

実際には"hoge.html"は存在しないので、存在しないファイルにアクセスしているということでAccessDeniedになってしまうということですね。(たぶん)

ということで、CloudFrontでエラーページの設定をします。

403エラーの時に「/」に飛ばすことでこの問題が解決します。

まず最初にCloudFrontのエラーページ設定画面に行きます。

そしたら「カスタムエラーレスポンスを作成」をクリックして下記のように設定します。

「"403: Forbidden"の時に即時(0s)で"/"に200で飛ばす」という設定です。
これにより、常にindex.htmlにアクセスしているという状態にできます。

カスタムエラーレスポンスを作成できるとこんな感じになります。

これにて終了です。

「/hoge」に直接アクセスしてみてください。
アクセスできるようになっているはずです。