Cloudflare(クラウドフレア)のキャッシュを理解する
「キャッシュ」という言葉をよく聞くけど、実際どう動いているのか分かりにくいですよね。
実は私は、Cloudflareに携わった初めのころ、Cloudflareにサイトを登録するとCloudflareがサイトのデータを抽出してコピーしてくれるんだ、みたいなざっくりした、しかも誤った理解をしていました。
この記事では、Cloudflareのキャッシュの基本から実践的な使い方まで詳しく解説します。
キャッシュの基礎
キャッシュとは何か、どういうメリットがあるのか
キャッシュとは、一度取得したデータを「手元に保存しておく」仕組みのことです。
例えば、あなたのウェブサイトに画像があるとします。
通常は訪問者がその画像を見るたびに、毎回ウェブサーバーからデータをとりに行く動きをします。
Cloudflareがある場合はウェブサーバと訪問者の間に入り、
要求された画像をCloudflareのサーバーにキャッシュ(保存)しておいて、次の訪問者には「保存してあったもの」を素早く渡せます。
このような動作をリバースプロキシといいます。
キャッシュはリバースプロキシが持つ機能の一つです。
Cloudflareのサーバをエッジサーバ、ウェブサーバをオリジンサーバと呼びます。
ここがポイント
- 表示速度が速くなる - 訪問者に近い場所から配信できる
- サーバー負荷が減る - オリジンサーバーへのリクエストが減り安定する
- 帯域幅の節約 - オリジンからの転送量が減る
- コスト削減 - サーバーリソースを節約できる
あまりピンとこないかもしれませんが、大量のアクセス集中が発生したときを考えると、なんとなくわかるんじゃないかなと思います。
Cloudflareはドメイン単位で動作する
重要なポイントとして、Cloudflareはドメイン単位で導入するサービスです。
例えば、example.comにCloudflareを導入した場合:
- ✅
https://example.com/image.jpg→ キャッシュされる - ❌
https://other-site.com/image.jpg→ キャッシュされない
つまり、ページ内で外部のドメインの画像やCSS、Javascriptを読み込んでいる場合、それらはCloudflareのキャッシュ対象外になります。
自分のドメインのリソースだけがキャッシュの恩恵を受けられる、ということを覚えておきましょう。
CDNとキャッシュは同じ意味?
よく混同されますが、違います。
CDN (Content Delivery Network)
- 世界中に配置されたサーバーネットワークのこと
- Cloudflareは300以上の都市にサーバーを持つCDN
キャッシュ
- CDNが「データを保存しておく」機能
- CDNの機能の一つ
つまり、CDNはネットワーク、キャッシュはその中で動く機能です。
ブラウザキャッシュとCDNキャッシュの違い
キャッシュには大きく2種類あります。
ブラウザキャッシュ
- 訪問者のパソコン(ブラウザ)に保存される
- その人だけが恩恵を受ける
CDNキャッシュ(Cloudflareのキャッシュ)
- Cloudflareのサーバーに保存される
- 全ての訪問者が恩恵を受ける
一言でキャッシュ、といってしまって混同しないように注意したいところです。
Cloudflareのキャッシュの仕組み
キャッシュはURLベースで行われる
CloudflareはURL単位でキャッシュを管理します。
例:
https://example.com/image.jpg→ キャッシュ1https://example.com/image.jpg?v=2→ キャッシュ2(別物)https://example.com/IMAGE.jpg→ キャッシュ3(大文字小文字も区別)
つまり、URLが少しでも違えば別のキャッシュとして扱われます。
これは便利な反面、注意も必要です。
例えば、クエリパラメータ(?v=1など)を安易に使うと、同じ画像なのにキャッシュが分散してしまいます。
Cloudflareでのキャッシュ対象拡張子
Cloudflareはデフォルトで静的ファイルのみをキャッシュします。
デフォルトでキャッシュされる拡張子(例)
- 画像:
.jpg,.jpeg,.png,.gif,.webp,.svg,.ico - スタイル/スクリプト:
.css,.js - フォント:
.woff,.woff2,.ttf,.eot - ドキュメント:
.pdf - その他:
.xml,.json,.txt
キャッシュされない拡張子(例)
.html(HTMLページ).php(動的ページ)- 拡張子なし(
/aboutなど)
HTMLページをキャッシュしたい場合は、後述する「キャッシュルール」で設定が必要です。
キャッシュルールでは細やかに調整することができます。
初回リクエストはオリジンにリクエストされる
キャッシュは「保存済みのもの」を返す仕組みなので、最初の1回目はオリジンサーバーに取りに行きます。
流れ:
- 訪問者A → Cloudflare → オリジン(キャッシュなし)
- Cloudflareが画像を取得&保存
- 訪問者B → Cloudflare → キャッシュから返す(速い!)
つまり、2人目以降の訪問者が恩恵を受ける仕組みです。
また、キャッシュの保存場所(データセンター)は訪問者の場所によって異なります。東京から見る人は東京のキャッシュ、ロンドンから見る人はロンドンのキャッシュを使います。
キャッシュの保持時間
キャッシュはずっと保存されるわけではなく、一定時間で消えます。
デフォルトの保持時間:
- Cloudflareが自動判断(通常は数時間〜数日)
- オリジンサーバーの
Cache-Controlヘッダーを尊重する
保持時間が過ぎると:
- キャッシュが消える
- 次のリクエストで再度オリジンから取得
保持時間を明示的に指定したい場合は、「キャッシュルール」で設定できます。
キャッシュの確認と制御
キャッシュしているかを確認する
ブラウザの開発者ツールで簡単に確認できます。
確認方法:
- ブラウザで対象ページを開く
F12キーを押す(開発者ツールを開く)- 「ネットワーク」タブをクリック
- ページをリロード(
Ctrl + R) - 画像やCSSファイルをクリック
- レスポンスヘッダーの中の
CF-Cache-Statusを確認
CF-Cache-Statusの意味:
HIT→ キャッシュされている!MISS→ キャッシュされていない(初回リクエスト)EXPIRED→ キャッシュが期限切れBYPASS→ キャッシュしない設定になっているDYNAMIC→ 動的コンテンツのためキャッシュされない
キャッシュルール
キャッシュの動作を細かく制御したい場合は、「キャッシュルール」を使います。
Cloudflareダッシュボードでの設定:
- ログイン → 対象ドメインを選択
- 「キャッシュ」→「キャッシュルール」
- 「ルールを作成」
できること:
- HTMLページもキャッシュする
- 特定のURLだけキャッシュ時間を変える
- クエリパラメータを無視する
- 特定のCookieがある場合はキャッシュしない
例: HTMLもキャッシュしたい
- URL:
*.htmlを含む - キャッシュステータス: すべてをキャッシュ
- Edge TTL: 1時間
これで、HTMLページも1時間キャッシュされるようになります。
パージ方法
キャッシュを手動で削除(パージ)したい場合もあります。例えば、画像を更新したのに古いキャッシュが表示され続ける場合などです。
パージの方法:
-
全てパージ - 全てのキャッシュを削除
- 「キャッシュ」→「設定」→「すべてをパージ」
- 一番簡単だが、全てのキャッシュがなくなる
-
URL単位でパージ - 特定のファイルだけ削除
- 「キャッシュ」→「設定」→「カスタムパージ」→「URL」
https://example.com/image.jpgのように完全なURLを指定
-
タグでパージ - タグ付けしたグループを削除(Enterprise)
- 上級者向け機能
注意:
- パージすると次回は再びオリジンから取得(遅くなる)
- 頻繁にパージするのは非効率
- 更新が多いファイルはキャッシュ時間を短くする方が良い
注意点
動的ページはキャッシュは現実的に不可
ログイン状態や個人情報が表示されるページ(動的ページ)は、キャッシュしてはいけません。 機能的には可能ですが、事故になります。
例:
- マイページ(ユーザーごとに内容が違う)
- ショッピングカート
- 管理画面
これらをキャッシュすると、他の人の情報が表示されるなど重大な問題が起きます。
キャッシュされないときにときある原因
「キャッシュされるはずなのに、キャッシュされない」という場合、以下が原因のことが多いです。
1. Cookieが設定されている
- CloudflareはデフォルトでCookieがあるとキャッシュしない
- 解決: キャッシュルールで「Cookieを無視」を設定
2. Cache-Controlヘッダーで禁止されている
- オリジンサーバーが
Cache-Control: no-cacheを返している - 解決: サーバー側の設定を確認・修正
3. 対象外の拡張子・URLパターン
.htmlや拡張子なしのURLはデフォルトでキャッシュされない- 解決: キャッシュルールで明示的に指定
さいごに
Cloudflareのキャッシュは、正しく理解して設定すれば、サイトの速度を劇的に改善できます。
覚えておくべきポイント:
- キャッシュはURLベースで管理される
- デフォルトでは静的ファイルのみキャッシュ
- HTMLもキャッシュしたい場合は「キャッシュルール」を設定
- 動的ページはキャッシュしない
CF-Cache-Statusで動作確認
まずは開発者ツールで自分のサイトを確認して、どのファイルがキャッシュされているか見てみましょう!
参考リンク: