画像が CloudFront からロードされないのはなぜですか?

簡単な説明

画像は、許可や設定上の問題、または 403 もしくは 404 エラーのためにブロックされる可能性があります。

エラーメッセージが原因となって画像のロードが妨げられているかどうかを判断するには、ブラウザのデベロッパーツールを開きます。[Network] (ネットワーク) タブで、画像リクエストのネットワークコールを見つけます。リクエストのレスポンスヘッダーで、404 または 403 エラーコードがないか確認します。

[Server] (サーバー) の値が Amazon Simple Storage Service (Amazon S3) またはカスタムオリジンサーバー名のいずれかに設定されている場合、オリジンはエラーコードを返しています。

解決方法

CloudFront には Amazon S3 オリジンにアクセスする許可がない

Amazon S3 Rest API エンドポイントから画像にアクセスするように CloudFront で オリジンアクセスアイデンティティ (OAI) を設定している場合は、バケット内のコンテンツへの OAI アクセス権を付与するバケットポリシーがバケットにあることを確認します。ポリシーがない場合、CloudFront からリクエストが行われると、「403: Access Denied」(403: アクセス拒否) エラーが返され、画像はロードされません。

このエラーを解決するには、S3 バケットポリシーの許可を確認してください。

画像が S3 オリジンまたはカスタムオリジンに存在しない

リクエストされた画像ファイルがバケットに存在しないか、別のフォルダに配置されている場合、403 または 404 エラーが返されます。返されるエラーは、S3 バケットの許可によって異なります。

• バケットに対する s3:ListBucket 許可がある場合、Amazon S3 は「404: No Such Key」(404: そのようなキーはありません) エラーを返します。
• s3:ListBucket 許可がない場合、Amazon S3 は「403: Access Denied」(403: アクセス拒否) エラーを返します。

動作パスパターンがリクエストを正しくないオリジンまたはフォルダに送信する

ディストリビューションに異なるパスパターンを持つ複数の動作がある場合、画像は正しくないオリジン、またはファイルが存在しないフォルダに送信される可能性があります。この場合、404 エラーが表示されます。

このエラーを解決するには、ディストリビューションの動作とパスパターンを確認します。リクエストがパスパターンに一致する正しい動作に到達し、正しいオリジンに送信されることを確認します。

例えば、次の設定では、Behavior1 には、リクエストを S3 オリジンにルーティングするパスパターン「test」があります。Behavior 2 には、トラフィックを Elastic Load Balancing (ELB) オリジンにルーティングするパスパターン「Default(*)」があります。

Behavior1: Path pattern = test ====> S3 origin 
Default Behavior: Path pattern = Default (*)=====> ELB origin

「https://example.com/test/myimage.png」のリクエストが行われると、ディストリビューションは Behavior2 のパスパターンである Default (*) とパスを照合します。test の最後にワイルドカードがないため、リクエストは Behavior1 のパスパターンである test と一致しません。ワイルドカードがない場合、このリクエストはデフォルト動作のパスパターンと一致し、ELB オリジンに送信されます。オブジェクトが ELB オリジンに存在しないため、リクエストは 404 エラーを返し、画像はロードされません。

動作キャッシュ設定が、ヘッダー、cookie、またはクエリ文字列に対して構成されていない

オリジンは、リクエストされた画像を提供するために、特定のヘッダー、cookie、またはクエリ文字列がリクエストで渡されることを要求できます。この場合、CloudFront を使用してリクエストが行われた場合、画像はロードされません。ただし、同じリクエストがオリジンに対して直接行われた場合、リクエストは成功し、オリジンはリクエストされたリソースを返します。

トラブルシューティングするには、オリジンがリクエストを処理するために特定のヘッダー、cookie、またはクエリ文字列を必要とするかどうかを判断します。その後、[Behavior cache settings] (動作キャッシュ設定) で要件が許可されていることを確認します。

オリジンリクエストポリシーを使用して、CloudFront がオリジンに送信するリクエストに含まれる値 (ヘッダー、cookie、クエリ文字列) を許可します。[Legacy cache settings] (レガシーキャッシュ設定) も使用できます。

画像のメタデータがオリジンで正しく設定されていない

オリジンの Content-Type のメタデータが image/png に設定されていない場合、画像は、ブラウザに表示されるのではなく、ダウンロードされます。

この問題を解決するには、Content-Type メタデータを確認します。必要に応じて、S3 またはカスタムオリジンの画像の値を image/png に更新します。

CORS エラーにより画像がロードされない

CloudFront またはオリジンの CORS 構成が正しく設定されていない場合、次のエラーが表示されます:「No 'Access-Control-Allow-Origin' header is present on the requested resource.」(リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。)

この問題を解決するには、CORS 構成が CloudFront とオリジンの両方のために設定されていることを確認します。詳細については、「CloudFront から「リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません」というエラーを解決するにはどうすればよいですか?」を参照してください。

---