CloudflareのHTMLキャッシュだけを削除したいと考え調べてみるとCache-Tagを使えば可能だとわかりました。そこでWorkersを使いCache-Tagをヘッダーに追加していましたが、Workersの無料枠の1日10万回を超えそうなので.htaccessに変更しました。Workersで運用する前に.htaccessにHTTPヘッダーを加える記述を試したのですが、なぜがキャッシュが消えなくて、調べても原因がわからないので諦めました。

今回は諦めずに生成AIの力を頼りに虱潰しに試した結果、思うようにHTMLキャッシュだけを消去できまるようになりました。

ブログの運用環境

なぜCloudflareが「all-html」を認識しないのか、Cache Response Ruleで「all-html」を追加すると認識するのかは分かりません。別のCloudflareの設定が原因なのか、それとも利用しているホスティングサービスが原因なのか調べる能力がないのでわかりません。もしかすると他の人は困ることなくタグによるカスタムパージが使えているのかもしれません。不具合の原因が環境に依存しているかもしれないので、当ブログの運用環境を書いておきます。

• さくらのレンタルサーバーライト
• Cloudflareフリー

ローカル環境のWordPressでブログを作成し、プラグインSimply Staticで静的ファイルを生成しています。また、CloudflareでのHTMLキャッシュはキャッシュルールで設定し、ステータスコード200と404をキャッシュし、400から403と405以上はno-storeに、キャッシュ期間は2日間としています。

次に、静的ファイルで運用するサイトのHTMLキャッシュにCache-Tagを付与し、カスタムパージを使ってタグ「all-html」でHTMLキャッシュだけを削除するには以下の2つの設定が必要でした。

Cache Response Ruleの作成

なぜタグによるキャッシュの削除ができないのかをhatGPTを頼りに調べるとオリジンサーバーからCache-Tagは出力されているが、何らかの理由で「all-html」がCloudflareに認識されてないらしいことが分かりました。そこで、Cache Response Ruleを使い「all-html」を追加するとタグによってHTMLキャッシュの削除が可能となりました。Cache Response Ruleは既存のCache-Tagを操作できますが、新たにCache-Tagヘッダーを追加する機能はありません。

.htaccessだけでキャッシュタグが効かない理由が分からなかったのはCloudflareの仕様が原因で、Cache-Tagヘッダーが削除されるからです。Cache-TagだけでなくCloudflareがキャッシュする期間のヘッダーも出力されません。以下のように設定するとタグ「all-html」でカスタムパージができるようになりました。

受信リクエストの条件

受信リクエストの条件は色々試したのですが「拡張子html以外のファイルを除いたファイル」と設定するとhtmlキャッシュだけを削除できるようになりました。

実行内容

.htaccessで拡張子が.htmlのファイルにだけCache-Tagを付与します。Cache Response Ruleでhtmlのキャッシュだけにタグ「all-html」を付与します。

.htaccessに追記

当ブログは静的ファイル(index.html)なので下記記述でCache-Tagの追加ができます。

<IfModule mod_headers.c>
<FilesMatch "\.html$">
    Header always set cache-tag "all-html"
</FilesMatch>
</IfModule>

WordPressの場合は以下のようにコンテントタイプで指定すれば良いと考えますが、試す環境がないので断言はできません。

<IfModule mod_headers.c>
    Header always set cache-tag "all-html" "expr=%{CONTENT_TYPE} =~ m#text/html#"
</IfModule>

HTMLキャッシュだけを消したい理由

HTMLキャッシュを消したいと思う理由はAmazonの商品リンクを24時間以内に更新する必要があるからです。AmazonのAPIを利用し、商品データを取得する場合に商品画像が含まれる場合は24時間以内に新しいデータに更新し表示する必要があります。特に新しいAPIになり、セール情報や値引き率を表示できるようになったので、商品データの更新は更に気を使うようになりました。

もし、HTMLキャッシュだけ消せないとなると、すべてのキャッシュを消すかHTMLをキャッシュさせないかのどちらかを選ばなければなりません。1日毎にすべてのキャッシュを消すと常にオリジンサーバーから配信しているのと変わらないので、しばらくの間はHTMLをキャッシュせずに運用していました。それが今回HTMLキャッシュだけ削除できるようになり、画像データのキャッシュは維持されるようになりました。

3つのキャッシュの考え方

ウェブサイトを運用するのに主に3種類のキャッシュを考える必要があるようです。

• サーバーキャッシュ
• CDNキャッシュ
• ブラウザキャッシュ

サーバーキャッシュはホスティングサービスに保存されるキャッシュで、WordPressのような動的サイトで重要になります。例えば、アクセスランキングを表示させる場合にアクセスのたびにデータベースにアクセスしHTMLを作成していると、サーバーに負荷がかかり表示が遅くなります。

自分でWordPressのテーマを作り、ホスティングサーバーで動かしている当時は複雑な処理をする場合はキャッシュの必要性や期間を考えていました。Cloudflareを使うなら良いプラグインがあったのでキャッシュの生成と管理はプラグインに任せていましたが、静的ファイルにしてからはサーバーキャッシュに付いて考える必要がなくなりました。ホスティングサービスの料金もデータベースを使わないので格段に安くなります。

このブログでのCDNキャッシュはCloudflareのキャッシュのことです。ホスティングサービスの.htaccessでのキャッシュの設定はCDNキャッシュとブラウザキャッシュの両方を制御できますが、基本的に.htaccessでブラウザキャッシュ用の設定を記述し、CDNでCDNキャッシュの制御を行います。

CloudflareでCDNキャッシュの期間を設定しても期間いっぱいキャッシュが保存されなかったり期間が来てもキャッシュが消えないことがほとんどです。おそらく有料契約と無料によってもキャッシュの扱いは変わると思います。キャッシュされる期間については正直なところよく分かりません。なので、画像・Js・CSSはファイルの更新日時を元にクリエパラメーターを付け、ファイルが更新されると確実に更新されるようにし、HTMLはCache-Tagで削除できるようにしています。

ブラウザキャッシュの期間はHTMLは5分間、それ以外は1年間にしています。理由は1年以下にするとPageSpeed Insightsに警告が表示されるからです。ブラウザキャッシュは特に気にする必要はなさそうです。

最後に

今回強く思ったのはChatGPTは親切だということです。素人の的を外れた質問にも丁寧に答えてくれて、最終的にCache Response Ruleを使うように提案してくれたおかげで目的が果たせました。ただ、こちらでも調べながら、思考の訂正を促す必要があり、対話をしていて楽しかったです。ネットで調べても情報がなかったので、ChatGPTがなければ答えが出なかったのは間違いありません。

26%OFF

ロジクール 静音 ワイヤレス トラックボール マウス MXTB2 MX ERGO S Bluetooth Logibolt 無線 windows mac iPad OS Chrome Android トラックボールマウス グラファイト 国内正規品

Logicool(ロジクール)

Amazon.co.jp

最後までお読みいただき、誠にありがとうございます。