SPAで「xキャッシュ：cloudfrontからのエラー」を解決する方法
クライアントルーター（リアクタールーター）でSPAを動作させようとすると問題が発生します。静的ファイルを提供するためにDOMAIN -> CDN (CloudFront) -> S3の概念を使用しています。
静的ファイルを提供するためにS3を構成しました。 CDNはS3からのオリジンを持つように構成され、エラーをキャッチするためにカスタムエラーページを構成しました。
この構成では、次のようなエラーをキャッチできます。
https://www.example.com/custom-url
CDNはすべての404/403エラーをメインにリダイレクトしますindex.htmlおよびreact routerは正しいルーティングを取得します。
サイトは機能しており、クライアントルーターは正常に機能していますが、CDNの応答にx-cache: Error from cloudfront：
メインURLにアクセスする場合https://www.example.com（クエリ文字列ではなく）クエリパラメータなしですべて正常に動作します。
この問題を解決して、すべての動的URLを機能させるにはどうすればよいですか？
ありがとう。
Amazon CloudFrontは、その設定とエラーコードのデバッグに注意が必要です。根本的な原因まで追跡するには、数時間かかる場合があります。ただし、ログに入る前に次のチェックを行うことをお勧めします。
バケット名！
バケット名は、ホストしているWebサイトの名前と一致する必要があります。
たとえば、Amazon S3でyour-domain.comウェブサイトをホストするには、your-という名前のバケットを作成しますdomain.com。
www.your-domain.comでWebサイトをホストするには、バケットにwww.your-domainという名前を付けます.com。
Your-domain.comとwww.your-domain.comの両方のバケットを作成するのがベストプラクティスです。
これらのバケットのいずれかの設定/構成にある既存のロジックを使用し、それを使用して静的Webサイトを提供します。他のバケットを使用して、リクエストを元のバケットにリダイレクトします。
正直なところ、システムをAmazon CloudFrontと統合しているため、問題が発生することはありません。これは、任意の名前のAmazon S3バケットを使用するように構成できます。
Amazon CloudFrontを使用すると、ドメインにアクセスするユーザーはCloudFrontディストリビューションから直接データをフェッチし、S3バケットからコンテンツをキャッシュします。
ディストリビューションのオリジン設定を構成します。
Amazon CloudFrontでディストリビューションを作成する際に、関連するAmazon S3エンドポイントとオリジンドメイン名をメモします。必ずWebサイトのエンドポイントを使用し、[〜＃〜]ではない[〜＃〜]RESTエンドポイントを使用してください。CloudFrontによって自動提案されたエンドポイントを使用しないでください。
アマゾンウェブサービスで説明されているように、動作には違いがあります 公式ドキュメント
4XXエラーコード！
コンソールログから、ディストリビューションインスタンスが禁止された要素、ページ、またはリソース、つまり403ステータスコードにアクセスしようとしていることが示唆されます。
404は単にページが見つからないためです。ただし、エラーリダイレクト後-構成で処理されるように、ユーザーはindex.htmlにリダイレクトされ、そこで403が検出されます。
詳細情報- CloudFrontがオリジンからのHTTP 4xxおよび5xxステータスコードを処理およびキャッシュする方法
その他の通常の容疑者には、Amazon CloudFrontディストリビューションのキャッシング設定、AWS Route53設定、Amazon Certificate Managerなどがあります。
冒頭で述べたように、そのようなエラーを追跡している間、それはかなり困惑することができます。上記が役に立ったかどうかをお知らせください。また、調査や調査結果に関する最新情報を投稿していただければ幸いです。
読んでくれてありがとう。