🎉

Page Rules : デフォルトでHTMLファイルをキャッシュしつつ、特定ディレクトリのHTMLファイルをキャッシュから外す設定方法

2024/03/25に公開

Cloudflare

tech

先日とある場でCloudflareのhtmlキャッシュにまつわる挙動について議論があったので今後誰かの役に立てばと思いまとめておきます。
まずCloudflareはデフォルトでは以下のキャッシュ動作を行います。

htmlファイルはデフォルトではキャッシュ対象外。
キャッシュはファイル単位ではなくファイルのパス単位（URI単位）でおこわなれる。
デフォルト動作の変更は以下のツールで行える。
1. Cache Rules
2. Page Rules

Page Rulesの方が新しく複雑な設定が可能なのでおススメですが、単純な設定変更（特定拡張子のキャッシュの挙動を変える）であればCache Rulesの方がシンプルにできます。

また、項目番号２は少し補足が必要ですが、例えば以下の２つは同じ画像ファイルであったとしても、別々にキャッシュの判断が行われます。
https://test.domain/test.jpg
https://test.domain/test/test.jpg

ではここからがこの記事の本題です。たとえばブログやニュースサイトのトップページのhtmlはキャッシュさせたくないが、それ以外のhtmlは全てキャッシュさせたい場合どういう設定をすればいいでしょうか。Page Rulesで設定が可能なので解説していきます。

さっそくやってみる

環境準備

に従ってAmazon EC2にnginxを起動しておき、CloudflareのCDNをセットします。（オリジンはhttp通信ができれば何でもOKです）
以下のようにファイルを配置します。

.
├── forcache
│   ├── test.html
│   └── test.jpg
├── test.html
├── test.jpg

htmlは以下を使いました。

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World</h1>
    <img src="test.jpg" alt="Test Image">
</body>
</html>

またキャッシュの違いを正しく理解するために、あえてtest.htmlとtest.jpg
は同じものを用います。

デフォルト動作の確認

ブラウザのデベロッパーツールを開いてからアクセスします。
test.html
ステータスはDYNAMICとなりキャッシュが回避されていることがわかります。

test.jpg
一方画像は初回はMISSとなり２回目以降HITとなりキャッシュされていることがわかります。

次に以下の２ファイルも見ていきます。
/forcache/test.html
正しくDYNAMICとなっています。

/forcache/test.jpg
初回はMISSとなり２回目以降HITとなります。

つまりtest.jpgと/forcache/test.jpgはべつものとして　扱われていることがわかります。

デフォルトでのhtmlキャッシュ

では次にhtmlをデフォルトで全てキャッシュさせるように設定変更します。
マネージメントコンソールでRules→Page Rulesをクリックします。

以下を参考にルールを登録します。以下の例では該当するドメインのすべてのhtmlファイルをキャッシュします。

ルールを投入して数秒後サイトにアクセスすると以下のようにステータスがDYNAMICからMISSに代わります。

ファイルがキャッシュ対象になったことがわかります。（初回アクセスですから当然キャッシュはHITしていません）２回目以降のアクセスではHITになります。

Topページのhtmlだけキャッシュ対象から外す

以下のように新しいルールで特定ファイルをCache対象から外す(BYPASSさせる)ルールを作成します。

この際上で設定したすべてのHTMLをキャッシュさせるというルールより高い優先順位でどうさせる必要があるため画面のやじるしボタンでこの順番にします。

test.htmlはDYNAMICとなり引き続き/forcache/test.htmlはHITとなります。