はじめに
私は2023年10月より、内定直結型エンジニア学習プログラム「アプレンティス」に2期生として参加しています。
現在、アプレンティスの課題としてオリジナルプロダクトの開発を行っています。
その中で、AWS の S3 にアップロードした画像を、CloudFront を経由してブラウザで表示していたのですが、何度も表題のエラーが発生しました。
今回は、そのエラーの原因が判明したので、まとめようと思います。
参考までに、インフラ構成は以下の通りです。
目次
1.使用環境
2.エラー発生状況
3.試したこと
4.結論
5.最後に
1. 使用環境
今回のエラーとはあまり関係がないのですが、一応載せておきます。
- MacBook Air : M2 チップ / 16 GB
- PHP 8.3.4
- Laravel Framework 10.46.0
- Docker 26.0.0
- docker-compose 1.29.2
- Next.js : 14.0.4
AWS 周り
VPC リージョン
- アジアパシフィック（東京）
アベイラビリティゾーン
- ap-northeast-1a
- ap-northeast-1c
パブリックサブネット ×2
※ ALB（アプリケーション・ロードバランサー）利用のため、２つ作成
プライベートサブネット ×1
EC2 インスタンス AMI イメージ
- Ubuntu Server 22.04 LTS(HVM),SSD Volume Type
S3 バケット
- アジアパシフィック (東京) ap-northeast-1
CloudFront
- SSL 証明書をアタッチ
- セキュリティポリシー：TLSv1.2_2021
- ビューワープロトコルポリシー：HTTP を HTTPS にリダイレクト
2. エラー発生状況
開発をしている中で、度々この画像が表示されないエラーが発生し、気づいたらエラーが解消することを繰り返していました。
すべての画像が表示されないわけでもなく、一部の画像のみエラーが発生している状況で、原因も解決策もしばらく分かりませんでした。
何度かやっているうちに、おそらく Next.js のビルドがきっかけではないかということが分かってきました。
3. 試したこと
- 別ブラウザでの表示確認
➞ スマホでは問題なく表示されている。
ということはブラウザのキャッシュの問題？と思い、
- ブラウザのスーパーリロード
➞ 改善せず。
公式のサイトを参照し、
- セキュリティポリシーを確認。
➞ TLSv1.2_2021 だったので問題なし。
色々調べている間に時間が経つ。
- 改めてリロード
➞ 表示された！！
3. 結論
「ビルドしてすぐには画像が表示できないことってあるの？」と Copilot に聞いてみたところ、以下教えてくれました。
ウェブサイトのビルドやデプロイメントが完了した直後は、すぐにすべてのリソースが正しく読み込まれるとは限りません。これは、以下のような理由で起こることがあります：
キャッシュ: ブラウザやCDN（Content Delivery Network）などが古いリソースをキャッシュしている場合、新しいリソースがすぐには反映されないことがあります。キャッシュがクリアされると、新しいリソースが表示されます。
プロパゲーション遅延: DNSの変更や新しいリソースの配信など、ネットワーク上での変更が全てのサーバーに伝播するまでには時間がかかることがあります。
ビルドやデプロイメントの遅延: 大規模なウェブサイトでは、ビルドやデプロイメントに時間がかかることがあります。その結果、一部のリソースが他のリソースよりも遅れて更新されることがあります。
これらの要因により、ビルドやデプロイメント直後に一時的な問題が発生することがあります。しかし、これらの問題は通常、時間が経つと自然に解決します。
上記により、今回の件では、CloudFront = CDN のキャッシュにより新しいリソースが表示されていなかったということが原因だと理解しました。
そもそも、CloudFront はキャッシュを利用することで高速なコンテンツ配信を実現しているサービスなので、なるほど納得です。
ちなみに、すぐに反映させたい場合は、CloudFrontのキャッシュを削除することも一つの方法のようです。
AWS のマネジメントコンソールに「キャッシュ削除」の項目があります。
ですが公式サイトに、「ファイルを無効にすると、料金が発生する可能性があります。」とあるので、削除する際はお気をつけください。
5. 最後に
エラーが発生すると毎回悩みに悩んで、数日解決しないと泣きたくもなってきますが、解決するたびに学びとなって成長している実感があります。
この記事が同じエラーで困っている方の助けになれば幸いです。