猫でもわかるWebプログラミング

試行錯誤しながらエンジニア(プログラマー)として働く猫のブログ。技術的な話や、働き方の話、読書録とか、試行錯誤している日常の話。

CloudFlareでキャッシュされない場合は、レスポンスヘッダ確認と Page Rules の設定

ことのはじまり

先日LGTMoonにCloudFlareを導入して、画像をキャッシュしようと試みました。

画像のURLが cdn.lgtmoon.dev になっていることから気づいた人もいるでしょう。

f:id:yoshiki_utakata:20200325152124p:plain

しかし、CloudFlare のダッシュボードを見ると、キャッシュされている様子はありません。CloudFlare の設定はデフォルトのままです。

f:id:yoshiki_utakata:20200325152300p:plain

調べていて見つけた記事

そこで、「CloudFlare キャッシュされない」で調べたところ、以下のブログを見つけた。

このブログを読むと、デフォルト設定だと、画像などはキャッシュするが、動的コンテンツはキャッシュしないとのことだった。

cf-cache-status を確認する

CloudFlare を介したレスポンスには cf-cache-status というヘッダが付いている。

cf-cache-status については下記記事が参考になりました。

www.bugbugnow.net

LGTMoon の画像の cf-cache-status を見ると DYNAMIC になっています。DYMANIC は(たぶん)動的に生成されているページだと判断されて、キャッシュされていないのでしょう。

f:id:yoshiki_utakata:20200325154407p:plain

Page Rules を指定して明示的にキャッシュしてやる

そこで、 CloudFlare で Page Rules を設定して、明示的にキャッシュするように設定してみる。

f:id:yoshiki_utakata:20200325154850p:plain

キャッシュされない原因はアプリケーションのレスポンスヘッダにあるのかもしれないが*1、明示的に設定すればキャッシュされるはずだ!

f:id:yoshiki_utakata:20200325155117p:plain

キャッシュされるようになった。

*1:本当はこっちを直すべきな気がするが、面倒なので