CDNキャッシュが原因で画像が更新されない時の対処法｜現場で使える実践テクニック

こんにちは！

今日は「CDNキャッシュが原因で画像が更新されない時の対処法」について解説します。

CDNキャッシュで画像が古いまま表示される理由

クライアントから「新しい商品画像をアップロードしたのに、古い画像が表示されたままなんです」っていう連絡を受けることって、ほんまにありますよね。
これはブラウザキャッシュだけじゃなく、CDN（Content Delivery Network）のキャッシュが原因になってることが多いんです。

CDNは複数のサーバーに画像を保持して、ユーザーに最適な場所から配信するサービスです。
例えば CloudflareやAmazon CloudFront、BunnyCDN などが該当します。
このCDNが古い画像をキャッシュしてると、いくらサーバーに新しい画像をアップロードしても、ユーザーには古い画像が配信され続けてしまうわけです。

重要なポイントは、CDNキャッシュはサーバーレベルで発生するため、クライアント側の「キャッシュをクリア」では解決しないってこと。
だから多くの初心者さんが「あれ、何で効かないんだろう」って困惑するんですよ。

僕が現場で経験した失敗談

僕もフロントエンジニアになって2年目のとき、このミスで大きな失敗をしました。
ECサイトのセール画像を更新したときのことなんですが、本番環境にアップロードしたのに「古いバナーが表示されたまま」って報告が上がってきたんです。

その時の僕は「あ、ブラウザキャッシュやな」って軽く考えて、クライアント側に Ctrl+Shift+Delete でキャッシュ削除を勧めたんです。
でもそれでも変わらない。
その時初めて「あ、CDNのキャッシュか！」って気づいたわけです。
めっちゃ焦りました（笑）

結局、CDNの管理画面でキャッシュをパージ（削除）して解決したんですが、その時に「キャッシュ戦略って大事やな」って痛感しました。

実践的な3つの対処方法

1. CDNの管理画面でキャッシュをパージする

一番直接的な方法は、CDNプロバイダーの管理画面でキャッシュを削除することです。
例えば Cloudflare を使ってる場合は、ダッシュボードから「キャッシング」→「キャッシュパージ」を選んで、該当の画像URLを指定します。
すると即座に古いキャッシュが削除されて、新しい画像が配信されるようになります。

ただしこの方法は、その都度 CDN の管理画面にログインする必要があるので、頻繁に画像を更新する場合は手間がかかります。

2. キャッシュバスティング（URLに識別子を付ける）

これは僕が現場で最もよく使うテクニックです。
画像の URL に クエリパラメータを付けて、ファイルが更新されるたびに URL を変わらせるという方法です。

例えば、元々のURLが https://example.com/images/banner.jpg だとしたら、更新時に https://example.com/images/banner.jpg?v=20240115 というようにバージョン番号を付けるわけです。
CDN の目線では「あ、これ違う URL や」って認識して、古いキャッシュじゃなく新しい画像を配信します。

WordPress を使ってる場合は、テーマファイルで画像を読み込む時に filemtime() 関数を使って自動でバージョンを付与できます。
これでうっかり忘れることもなくなります。

3. キャッシュTTLを短く設定する

CDN の設定画面でキャッシュの有効期間（TTL：Time To Live）を調整するという方法もあります。
デフォルトでは数時間〜数日間キャッシュされることが多いんですが、重要な画像なら TTL を短く（例えば 1時間）設定しておくといいですよ。
ただしこれはCDNへのリクエストが増えるので、オリジンサーバーへの負荷が上がる可能性があります。

今後のキャッシュ戦略

実務で大事なのは「どれくらいの頻度で画像が更新されるか」を事前に把握することです。
頻繁に更新されるならキャッシュバスティングで対応するべきだし、ほぼ変わらない素材なら積極的にキャッシュを活用すべきです。

また、プロジェクト開始時にクライアントと「画像はどうやって管理するのか」「キャッシュはどのくらい有効にするのか」を一度話し合っておくと、あとあとトラブルになりにくいですよ。

まとめ

CDNキャッシュによる画像の更新反映遅延は、初心者さんが陥りやすいトラブルです。
でもメカニズムを理解して、キャッシュバスティングやCDN管理画面の使い方を覚えておけば、ほぼ問題なく対応できるようになります。

特にキャッシュバスティングは実装も簡単で効果的なので、今日から実践してみるといいですよ。