Webサイトの完全なURLを介してページにアクセスしようとするとAccessDeniedを受け取る
しばらくの間、私は自分のWebサイトのコンテンツを単にs3バケットに格納していただけで、完全なURLを介してすべてのページに問題なくアクセスできました。 SSLを追加してウェブサイトをより安全にしたかったので、s3バケットを指すようにCloudFrontディストリビューションを作成しました。
サイトは問題なく読み込まれますが、ユーザーがページを更新しようとした場合、または完全なURL（www.example.com/homeなど）を使用してページにアクセスしようとした場合、AccessDeniedページが表示されます。
OriginのアクセスIDのみにアクセスを制限するs3バケットのポリシーがあり、index.htmlがドメインルートオブジェクトとして設定されています。
何が欠けているのか理解できません。
デモを行うには、私の site にアクセスしてください。
あなたがkurtking.me/homeにリダイレクトする方法に気づくでしょう。エラーを再現するには、ページを更新するか、完全なURL（kurtking.me/life）でページにアクセスしてください
私はこれに頭を抱えて数日間答えを検索しようとしてきたので、どんな助けも大歓迎です。
私はそれを理解し、誰かがこの問題に遭遇した場合に備えて私の解決策を投稿したいと思いました。
この問題は、Angular SPA（シングルページアプリ）であり、S3バケットを使用して保存しているためです。URLアクセスで特定のページに移動しようとすると、CloudFrontは（たとえば、/ about）を選択してS3バケットに移動し、そのファイルを探します。AngularはSPAであるため、そのファイルは技術的にはS3バケットに存在しません。このため、エラー。
修正するために必要なこと
Cloudfrontでディストリビューションを開くと、[エラーページ]タブが表示されます。 400と403を処理する2つの「カスタムエラー応答」を追加する必要がありました。詳細は400と403で同じなので、400の写真のみを含めます。以下を参照してください。 
基本的に、起こっていることは、Cloudfrontに400または403エラーに関係なく、index.htmlにリダイレクトするように指示しているため、Angularに制御を渡して、パスに移動できるかどうかを決定することですクライアントに400または403エラーを提供する場合は、Angularでこれらのルートを定義する必要があります。
2つのカスタムエラー応答を設定した後、私は自分のCloudfrontソリューションとWallahをデプロイしましたが、うまくいきました！
私は次の article を使用して、このソリューションを案内しました。
これを解決するより良い方法は、リストバケットの許可を許可し、cloudfrontがindex.htmlを指すように404エラーカスタムルールを追加することです。 403エラーもWAFによって返され、カスタムエラー処理のためにindex.htmlに追加された場合、追加のセキュリティ問題が発生します。したがって、angularアプリの場合、最初にS3から403エラーが発生するのを回避する方が適切です。
受け入れられた答えはうまくいくようですが、それは良い習慣のようには見えません。代わりに、cloudfront OriginがS3バケット（静的ファイルがある場所）またはに設定されているかどうかを確認します実際のs3 URLエンドポイント。 s3バケットではなく、s3 urlエンドポイントである必要があります。
エンドポイントの後のURLはオリジンでなければなりません
