初心者必見!cdnとcacheとcontrolの基本をわかりやすく徹底解説

目次

はじめに

本調査の目的

本調査は、CDN(コンテンツ配信ネットワーク)におけるキャッシュコントロールの仕組みと運用方法を分かりやすく整理することを目的としています。読み込みが速くなる仕組みや、古い情報を誤って配信しないための工夫を具体例で示します。例えば画像や動画は長めに、ニュースは短めに設定するなど実務で役立つ指針を示します。

本書の範囲と構成

第2章でCDNとキャッシュの基本を説明し、第3章でCache-Controlヘッダーの役割と設定方法を解説します。第4章では主要なディレクティブを使い方とともに紹介し、第5章でキャッシュ可能かを判断する条件をまとめます。運用やセキュリティ面での注意点も取り上げます。

想定する読者

ウェブサイトの運用担当者、フロントエンド開発者、または導入を検討している方を想定しています。専門用語は最小限にし、実務で使える例を優先して説明します。

CDNとキャッシュの基本概念

CDNとは

CDN(コンテンツ配信ネットワーク)は、世界中に分散したサーバー群です。ウェブサイトのデータをエンドユーザーの近くに置くことで、通信距離を短くして応答を速くします。例えば、日本の利用者に対して日本のエッジサーバーが画像を返すイメージです。

キャッシュとは

キャッシュはファイルの一時コピーです。ブラウザやCDNがコピーを持つと、元のサーバーに問い合わせずに配信できます。キャッシュがあると最初の応答時間(TTFB)が短くなり、表示が速くなります。

キャッシュの動作(ヒットとミス)

キャッシュヒットは、要求したファイルがエッジにあり即時配信できる状態です。キャッシュミスはファイルがないか期限切れで、オリジンサーバーへ取りに行きます。ミス時は遅延が大きくなります。

実務での注意点

静的ファイル(画像、CSS、JS)はキャッシュしやすいです。頻繁に更新するデータは短い有効期限にします。用途に合わせて使い分けると効果的です。

Cache-Controlヘッダーの役割と制御方法

概要

Cache-Controlヘッダーは、ブラウザやCDNに対して「このリソースをどれくらい保存して良いか」を伝える指示です。例えば「max-age=3600」と書くと、3600秒(1時間)は再取得不要と伝えます。実際には保存場所(利用者のブラウザか共有キャッシュか)や更新方法も指定できます。

よく使う振る舞い(例を交えて)

  • max-age=3600:1時間はキャッシュを使います。画像やCSSに向きます。例:サイトのロゴ画像。
  • no-cache:必ず再検証します。HTMLや頻繁に変わるデータに使います。
  • no-store:保存しないように強く指示します。個人情報などに使います。
  • public / private:共有キャッシュ(CDN)で使えるかを指定します。publicは共有キャッシュで保存可能、privateはブラウザのみ有効です。

CDNとの関係とTTL設定

CDNは通常、オリジンサーバーからのCache-Controlヘッダーを優先します。オリジンに何も指定がない場合、CDNのDefault Cache TTLを使います。Defaultは「オリジンが無指定のときの基本的な保存時間」です。
Override Cache TTLは、CDN側でオリジンの指示を上書きしたいときに使います。たとえばオリジンが長めに設定しているが安全に短くしたい場合や、オリジンが無指定でも短くしたい場合に有効です。設定方法はCDN製品ごとに異なりますので、意図どおり働いているか確認してください。

実務上の注意点

  • 静的ファイルは長め、HTMLは短めに設定するのが一般的です。
  • 変更したファイルはバージョン付きURL(クエリやファイル名)で配布すると確実に反映されます。
  • 挙動確認はcurl -Iなどでヘッダーを確認してください。

主要なCache-Controlディレクティブ

概要

CDNでよく使うCache-Controlの主な指示を、目的と具体例で分かりやすく説明します。各項目は実務でよく出てくるため、挙動と使いどころを押さえます。

no-cache(再検証を要求)

意味: キャッシュに置いてよいが、使う前に必ずオリジンサーバーで確認(再検証)します。
例: Cache-Control: no-cache
使いどころ: 頻繁に更新されるけれど完全に捨てたくないリソースに向きます。ユーザーの表示はサーバーの確認後に最新になります。

max-age(キャッシュ有効期限)

意味: ローカルやCDNがその秒数だけつまりTTLだけ有効に保存します。
例: Cache-Control: max-age=3600
使いどころ: 変更が少ない画像やスクリプトなど、一定時間だけ高速配信したい場合に使います。

s-maxage(共有キャッシュ専用TTL)

意味: CDNなど共有キャッシュに対するTTLを指定し、max-ageより優先します。
例: Cache-Control: s-maxage=86400, max-age=60
使いどころ: ブラウザは短時間しかキャッシュしないが、CDNは長く保持したいケースに便利です。

proxy-revalidate(CDNに再検証を要求)

意味: shared cacheがキャッシュの使用前に必ずオリジンサーバーで確認します。ブラウザ側は影響を受けません。
例: Cache-Control: proxy-revalidate, max-age=3600
使いどころ: CDNにだけ厳しい整合性を求めたいときに使います。

no-store(キャッシュ禁止)

意味: どこにも保存しないよう明示します。機密データに必須です。
例: Cache-Control: no-store
使いどころ: クレジット情報や個人情報など、絶対に残してはいけないレスポンスに使います。

private(ユーザー単位のキャッシュ限定)

意味: レスポンスをユーザーのブラウザだけが保存できます。共有CDNは保存してはいけません。
例: Cache-Control: private, max-age=300
使いどころ: ログイン後の個人ページやユーザー固有のデータに使います。

キャッシュ可能性の条件

必要な基本条件

CDNがアセットをキャッシュするには、いくつかの条件を満たす必要があります。代表的な条件は次の通りです。1) HTTPリクエストメソッドがGETまたはHEADであること、2) レスポンスコードが200、206、301、302のいずれかであること、3) レスポンスにcache-controlまたはExpiresの指示が含まれていることです。これらを満たさないと、多くのCDNはキャッシュしません。

ステータスコードの扱い方

200は通常の成功応答でキャッシュ対象になります。206(部分コンテンツ)もファイルの一部配信でキャッシュされることがあります。301や302はリダイレクトですが、一部のCDNはこれらをキャッシュします。CDNによって扱いが異なる点に注意してください。

キャッシュ指示子(Cache-Control / Expires)

レスポンスに有効なcache-controlヘッダーやExpiresがなければ、CDNは独自の既定値を使うかキャッシュしないことがあります。たとえば、静的ファイルには明示的にmax-ageやpublicを設定すると確実です。

CDNごとの既定期間の差

キャッシュ期間はCDNプロバイダーにより変わります。例としてIONOSでは、明示的な指示がない200レスポンスを24時間キャッシュし、301・302・404は約10分間キャッシュされることがあります。プロバイダーのドキュメントを確認してください。

実務での確認方法(簡単な手順)

1) ブラウザやcurlでヘッダーを確認する(例: curl -I URL)。
2) cache-controlやExpiresの有無、ステータスコードを確認する。
3) CDNのドキュメントで既定値とオプションを確認し、必要ならヘッダーを明示的に設定します。

これらを守ると、期待するファイルがCDNに正しくキャッシュされやすくなります。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

目次