CDNキャッシュが邪魔をする理由と、画像更新が反映されない時の解決策｜現場で使える実践テクニック

こんにちは！

今日は「CDNキャッシュが画像更新を妨害する仕組みと、その対処策」について解説します。

CDNキャッシュって何？僕が現場で失敗した話

CDNって言葉、聞いたことありますか？
Content Delivery Network の略で、要するに「世界中の色々な場所にあるサーバーから、一番近い場所からコンテンツを配信してくれるサービス」やん。
CloudflareとかAmazon CloudFrontとか、色々なCDNサービスがあります。

僕も入社して最初の現場では、このCDNキャッシュでめっちゃ痛い目に遭いました。
クライアントから「トップページのメイン画像を新しいのに差し替えといてや」って指示をもらって、FTPで古い画像を削除して新しい画像をアップロード。
「よし、完了や」って自分のパソコンで確認したら新しい画像が表示されてる。
でもクライアントが別のネットワークから見たら、古い画像がまだ表示されてるんですよ。

その時は「あ、ブラウザキャッシュの問題かな」って軽く考えて、Ctrl+Shift+Delで強制更新してもらったんですけど、実はそれじゃ解決してなかった。
本当の原因は、CDNの方でキャッシュされた古い画像を配信し続けてたんです。
ほんまに焦りました。

画像を更新したのに古いのが表示される理由

CDNがキャッシュする仕組みを理解する必要があります。
例えば、あなたが /images/banner.jpg という画像をアップロードしたとします。
最初のリクエストが来たら、CDNは元のサーバー（オリジンサーバー）から画像を取得して、その画像をCDNのサーバーに保存しておくわけですね。

次のリクエストが来たら、CDNはわざわざオリジンサーバーに問い合わせたりせず、自分のとこで持ってるキャッシュを配信しちゃう。
この方が早いし、オリジンサーバーの負担も減るから、良いシステムなんですよ。

ただし、ここが罠なんです。
あなたがオリジンサーバー上の /images/banner.jpg を新しい画像に上書きしても、CDNはまだ古い画像をキャッシュしてることがあるんですよ。
CDNは「あ、このファイルはさっき配信したから、もうしばらく新しい版は来ないだろう」って思ってるわけです。
これがキャッシュの有効期限（TTL：Time To Live）の考え方。

つまり、世界中のユーザーが古い画像を見せられ続けるっていう、なかなか厄介な状況が発生するんですね。

すぐに使える3つの解決策

1. CDNのキャッシュを手動で削除する（パージ）

これが一番手っ取り早い方法です。
CloudflareやCloudFrontなんかは、管理画面からキャッシュを削除できる機能があります。

例えばCloudflareなら、ダッシュボードから「キャッシュの削除」（Purge Cache）を選んで、該当のURLを入力するだけ。
僕も現場で何度もお世話になっています。
クライアントに「少し待ってください」って言ってから、パッと削除して「更新完了です」って言うと、スマートに見えますよ。笑

2. ファイル名にバージョン番号やハッシュ値を付ける

これは根本的な対策です。
例えば、古いファイル名が /images/banner.jpg だったら、新しいのは /images/banner-v2.jpg とか /images/banner-abc123def.jpg みたいにするんです。

CDNの視点からすると、これは「全く新しいファイル」に見えるので、キャッシュなんか無視して新しい画像を配信するわけですね。
ビルドツール（WebpackとかViteとか）を使ってると、このハッシュ値の付与は自動でやってくれたりします。

3. Cache-Controlヘッダーを調整する

サーバー側で、CDNにどのくらいの期間キャッシュするか指示できます。
例えば、頻繁に更新される画像なら Cache-Control: max-age=3600 みたいに、1時間でキャッシュを削除するよう指定する。

逆に、ほぼ変わらない画像（アイコンとか）なら Cache-Control: max-age=31536000 で、もう1年キャッシュしちゃえ、みたいな感じです。
ほんまに実装の内容によって使い分けるのが大事ですね。

まとめ

CDNキャッシュで画像更新が反映されない問題は、本当によく起きる案件のあるあるです。
ブラウザキャッシュと違って、ユーザー側では絶対に解決できないから、余計にクライアントからの「なんで？」って質問がしつこくなるんですよ。

大事なのは、事前にこういう仕組みを理解しておくこと。
そして、実装の段階で「頻繁に更新される画像は、ファイル名にバージョンを付けておきましょう」みたいなアドバイスができると、ほんまにプロフェッショナルに見えます。

もしもの時は、CDNの管理画面からキャッシュを削除する。
これだけ覚えておくと、焦らず対応できますよ。