Cloudflareで静的サイトをキャッシュする時のベストプラクティス

「Cache Everything」

静的サイトは、基本的にビルド時以外はページ内容が更新されませんので、HTMLファイルも含めてCDNにキャッシュしても問題ありません。

Cloudflareは、DNSでプロキシ（クラウドマーク）をオンにしていれば、デフォルトで静的ファイルをキャッシュしてくれます。ただし、これにはHTMLが含まれません。

そこで、Cloudflareのページルールを使って、全てをキャッシュさせます。

• ルート：exmaple.com/*
• その後の設定：キャッシュレベル
• 値：Cache Everything

これで、HTMLも含めた全てのファイルをキャッシュしてくれます。

ブラウザのキャッシュTTL

CloudflareのCDNでキャッシュしていても、ブラウザがキャッシュする時間設定（ブラウザのキャッシュTTL）が短ければ再度アクセスする分だけコストがかかります。

CloudflareではブラウザのキャッシュTTLも設定できます。

ファイルごとにブラウザのキャッシュTTLを変更する

ブラウザのキャッシュTTLは、

• HTMLファイル
• その他の静的ファイル

で想定する長さが違います。HTMLファイルは短くて良いですし、CSSやJSなどは1年などの長いスパンにしておきたいところです。

Cloudflareにはページルールでルーティングを元にブラウザのキャッシュTTLを細かく設定できるので、そちらを使います。

まず全体の設定ですが、こちらは30分にしておきます。

CDNでキャッシュするファイルの数では画像などのが多いかもしれません。しかし、画像などは「/imgs/」などディレクトリで管理することが多いのでルーティングが指定しやすいですが、HTMLファイルはルートが複雑なのでページルールでルートマッチをしてしずらいため、全体設定は「HTMLを前提として30分」とします。

次に画像やCSSなどの静的ファイルは、ページルールでTTLを設定します。

• ルート：exmaple.com/statics/*
• その後の設定：ブラウザのキャッシュTTL
• 値：1年

Cloudflareは無料プランではドメインごとに3つでしかページルールを追加できないので、staticsなど一つのディレクトリにまとめるか、静的ファイルはサブドメインで運用するとページルールを節約できます。

これで、ファイルごとにブラウザのキャッシュTTLを最適化できました。

ビルド時にAPIを叩いて「全てのキャッシュ削除」

最後に、キャッシュの更新周りを設定します。

このままだと、Cloudflareにずっとキャッシュが残ってページを更新しても反映されないサイトになってしまうので、こちらを対処します。

キャッシュの削除はCloudflareの管理画面からも設定できますが、静的サイトジェネレータを使っている場合、何かしらのCI/CDを使っていると思うので、APIを叩いてキャッシュを削除します。

curl -X DELETE "https://api.cloudflare.com/client/v4/zones/ゾーンID/purge_cache" \
-H "Content-Type:application/json" \
-H "X-Auth-Email: Cloudfalre ID(メールアドレス)" \
-H "X-Auth-Key: APIトークン" \
--data '{"purge_everything":true}'

curlでAPIを叩くだけです。

• ゾーンID
• Cloudfalre ID(メールアドレス)
• APIトークン

はそれぞれ異なりますので、置き換えてください。

Cloudflareで静的サイトをキャッシュする時のベストプラクティスを見てきました。

筆者は、この1年で静的サイトを20サイト以上開発・運営してきましたが、Gitlab PagesなどのCI/CD・静的サイトホスティングとの組み合わせでは、この方法がベストでした。

Netlifyなど独自のCDNサーバーを持つ場合は、ちょっと動作が違いかもしれませんが、Github PagesやGitlab Pagesを使っている方や、静的サイトの表示速度に不満がある方は試してみてください。