Cloudflare でサイト全体の html をキャッシュさせる

背景

cloudflare では HTML を自動でキャッシュさせません。これは動的なページを意図せずキャッシュしてしまうことを防ぐためです。
このサイトは SSG で静的なページしか存在しないため、キャッシュしてしまって問題ないのでキャッシュを有効にしてみました。

方法

Cloudflare にログイン後、以下の順番で設定していきます。

• サイドメニューの 「Web サイト」をクリック
• 「キャッシュを有効にしたいサイト」をクリック
• サイドメニューの「ルール」をクリック
• 展開されたサイドメニューの「ページ ルール」をクリック
• 「ページ ルールを作成」ボタンをクリック
• 「URL（必須）」に対象の URL を入力
• 「設定を選択する（必須）」から「キャッシュ レベル」を選択
• 「キャッシュ レベルを選択する（必須）」から「Cache Everything」を選択
• 「ページ ルールを保存及びデプロイ」をクリック

Chrome Dev ツールのネットワークリクエストを確認するレスポンスヘッダーの Cache-Control が public, max-age=0, must-revalidate から public, max-age=86400, must-revalidate に、 Cf-Cache-Status が DYNAMIC から HIT に変更に変更されていることが確認できます。