【React・CloudFront・S3】ReactのページをリロードするとAccess Denied（404・403）エラーになる

はじめに

S3にデプロイしたReactをCloudFrontでOACを使用して配信した際に、ページ遷移後にリロードするとAccess Denied（404・403）エラーになってしまった為、その解消法を記事にします。

原因

ReactのSPAは、React Routerを使用してクライアントサイドルーティングを実現しています。
これは、URLの変更に応じてJavaScriptがUIを動的に切り替えることで、あたかも別のページに遷移したかのように見せる仕組みです。
しかし実際には、S3上にはindex.htmlというファイルしか存在しません。ユーザーが直接URL（例：/about）にアクセスしたり、ページをリロードしたりすると、S3はそのパスに対応する物理的なファイルを探そうとします。当然ながら/aboutというファイルは存在しないため、404エラーが返されてしまいます。

解決方法

CloudFrontでカスタムエラーページを設定

404エラーが発生した際にindex.htmlを返すよう設定することで、どのURLにアクセスされてもReactアプリケーションが読み込まれ、React Routerがクライアント側で適切なコンポーネントをレンダリングできるようになります。

まず、デフォルトルートをindex.htmlに設定します。

そして、エラーページのタブに入り、404``403に対してindex.htmlとHTTP レスポンスコード 200を返すように設定します。

デメリット

• エラーレスポンスを書き換えるため、ブラウザ側でエラーハンドリングを実装しようとすると機能しなくなる
• SPAと従来のウェブアプリケーションのハイブリッド構成の場合、意図しないレスポンスになることがある