CloudFrontの新定額プランで「LimitExceeded」エラー？画像大量リクエストが原因だった話

2025/12/22

# AWS # Amazon CloudFront # Amazon S3 # Next.js

こんにちは、クラウドソリューション事業部の常井です。

2025年も残すところあとわずかですね。私は今年シーズに転職し、初めてのAWS実務やAWS Jamへの参加など、刺激的な経験をたくさんさせていただきました。例年以上に時が経つのが早く感じます。

さて、先日React/Next.jsの脆弱性対応としてバージョンアップ作業を行っていた際、LimitExceeded from cloudfrontという見慣れないエラーに遭遇しました。今回はその原因と、私が取った解決策について共有します。

経緯

弊社の採用サイトは Amazon S3 + CloudFront による静的サイトホスティングで構成されており、フレームワークにはNext.jsを採用しています。バージョンアップ後、検証環境で動作確認を行っていたところ、「技術のこと」ページで画像が表示されていない（リンク切れのような状態）ことに気づきました。

ローカル環境や以前のバージョンでは問題なく表示されていたため、ブラウザの開発者ツールで詳細を確認したところ、以下のレスポンスが返ってきていました。

1technology/:1  GET https://recruit.seeds-std.co.jp/image/technology/codepipeline.png 503 (Service Unavailable)

1content-type
2text/html
3date
4Mon, 15 Dec 2025 04:03:59 GMT
5server
6CloudFront
7via
81.1 xxxxxxxxxxx.cloudfront.net (CloudFront)
9x-amz-cf-id
10XXXXXXXXXXXXXXXXXXXXXXX
11x-amz-cf-pop
12KIX50-P1
13x-cache
14LimitExceeded from cloudfront

CloudFrontに個別のレート制限を設定した覚えはなかったため、「なぜこのタイミングで？」と頭を悩ませることになりました。

原因の推測：新プランの「自動レート制限」

調査の結果、原因はCloudFrontの「定額料金プラン（フリープラン）」の仕様にあると推測しました。

実際には、React/Next.jsのバージョンアップ作業と、この定額料金プランの導入タイミングが偶然重なったことで、今回の事象が顕在化したものと考えています。

弊社が CloudFront 定額料金プラン（フリープラン）に注目し、実際に導入・検証を進めてきた背景については、弊社CTOがこちらの記事で詳しく解説しています。

CloudFront 定額料金プラン(flat-rate pricing plans)フリープランへの道

2025年11月に発表されたこのプランでは、デフォルトでDDoS対策やIPベースのレート制限が有効になっています。

参考：

AWS がウェブサイトの配信とセキュリティ用の定額料金プランを発表
CloudFront flat-rate pricing plans（DeveloperGuide）
- Always-on DDoS protection（DDoS攻撃からの保護）
- IP-based rate limiting（5分間のリクエスト数が一定を超えると自動ブロック）

今回の「技術のこと」ページでは、技術ロゴの画像を約50個表示していました。

従来の<img>タグを使用していたため、ページアクセス時にこれら全てのリクエストが一斉に送信され、新プランの制限値に抵触してしまったと推測されます。

（※12/19現在、このエラー文言に関する公式ドキュメントは未確認ですが、状況からこのように推測しました。）

解決策：Imageコンポーネントによる遅延読み込み

解決のため、画像表示を従来の<img>タグからNext.jsの<Image>コンポーネントに置き換えました。

1- <img className="p-technology__image" src="../image/technology/ecs.png”>
2+ <Image className="p-technology__image" src="/image/technology/ecs.png">

<Image> コンポーネントは標準で遅延読み込み（Lazy Loading）が有効になるため、ブラウザの表示領域外にある画像のリクエストを遅らせることができます。これにより、ページ読み込み時に一度に大量のリクエストがCloudFrontへ飛ぶのを防ぐことができました。

修正後、検証環境で確認したところエラーは解消され、全ての画像がスムーズに表示されるようになりました！

最後に

今回の件を通して、改めてCloudFrontの定額料金プランの強力さを実感しました。

「設定不要で、導入した瞬間から強力なDDoS保護やレート制限が常に効いている」というのはセキュリティ面において非常に心強いです

ただ、その「守りの堅さ」の裏返しとして、今回のように画像リクエストが集中するページなどでは、意図せず制限に抵触してしまう可能性があります。

CloudFront側：標準で強力なセキュリティを提供してくれている
開発側：その恩恵に預かりつつ、無駄な一斉リクエストを避ける実装（Next.jsの<Image>活用など）を心がける

この両方のバランスが大切だと学びました。

同じように「何も変えていないはずなのに画像が表示されなくなった」と悩んでいる方の助けになれば幸いです。それでは、良いお年を👋