【SPA】AWSで運用時のリロードした時のエラー

Question

以下のAWS構成にてSPAアプリを作っています。
・EC2
・S3
・CloudFront
（アクセスはCloudFrontのみに制限）

フロントはReact.jsとreduxで作ってます。

デプロイ後順調に動いているように見えたのですが、同じページをリロードすると、以下のエラーが発生します。

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>A101149E1802ADBB</RequestId>
  <HostId>
  
  EZHyPQru2aN7E6V9aadq/pIdke7rfh4XiO8ycSauUBI5kpGlgPOuY/tb0BxMSUF/9L/EtVB8h3w=
  </HostId>
</Error>

ローカル環境で開発していた時はリロード時にこのようなエラーは出ずに普通にリロードできていました。なので、原因はAWSの設定にあるような気がするのですが、調べても理由がわかりません。

なぜこのような現象が起こるのか、どうやったら解決できるのか。
ご回答よろしくお願いいたします。

ちなみに関係あるかわかりませんが、S3のインデックスドキュメント及びエラードキュメントは共に"index.html"と設定しています。

Answer 1

S3のインデックスドキュメント及びエラードキュメントは共に"index.html"と設定しています。

CloudFrontにもエラードキュメントの設定をする箇所があります。

SPAを S3+CloudFront で表示する方法

"Create Custom Error Response"で403,404を設定してみてください。

Comments

[tarner]

解消できました！ありがとうございます！