「Cloudflare」で構築する「ずるいキャッシュ」を紹介したいと思います。この当サイトでも「Cloudflare」で構築する「ずるいキャッシュ」方法を施せば、リクエスト開始からページデータのダウンロードが完了するまでの時間が、たったの20msから40msになりました。今回は想定としてみんなが大好きなWordPressでの環境の解説になります。WordPress以外のサイトでもこの「ずるいキャッシュ」を効かせることができます。ただ向いていないサイトもあるので、仕組みとデメリットを先に述べておきます。また第三者が提供しているブログサービスなどでは独自ドメインを採用していても利用できない場合が多いので先に「Cloudflare」との相性を各自ご確認ください。
目次
「Cloudflare」で構築する「ずるいキャッシュ」の仕組み
このキャッシュの仕組みは「Cloudflare」のサービスを利用します。「Cloudflare」はCDN（Content Delivery Network）サービスの一種で、サーバーサイドにキャッシュはせずにサーバーとエンドユーザーの間に入って代わりにデータを配信してくれるものです。普通にキャッシュして配信するのは、普通に「Cloudflare」のサービスを利用すれば実現できることなんですが、今回は設定を追加し、ページのデータそのものを「Cloudflare」に持たせることで高速化を図ります。
「Cloudflare」で構築する「ずるいキャッシュ」のデメリット
先に「Cloudflare」で構築する「ずるいキャッシュ」のデメリットを述べておきます。
デメリット1:すべてのキャッシュを「Cloudflare」に委ねる
「Cloudflare」の構造上、すべてのサイトのデータは「Cloudflare」を経由して表示されるので、「Cloudflare」にトラブルが発生した場合に、サーバーに問題がなくてもエラーが表示され、ページが表示されなくなります。
確かに数年前までは「Cloudflare」もよくトラブルが発生し表示されないことも多々ありました。しかし、現在「Cloudflare」の品質も向上し、そのような事態は稀なものとなっているんじゃないかと思います。当サイトでも今回紹介するキャッシュ方法を施してほぼ1年になりますが、エラーで表示できてないという現象は一度も経験しておりません。（確認できない範囲の短時間では発生している可能性は否めませんが）
デメリット2:「Cloudflare」の無料プランだと2時間毎にしかキャッシュをパージできない（解決策あり）
「Cloudflare」の無料プランだと2時間毎にしかキャッシュをパージ（削除）できない仕様になっています。もちろん手動でパージ（削除）できるので、新規投稿をする場合にはとくに困らないのですが、コメント欄などはパージ（削除）されるまで新しいものが表示されないなどの問題があります。しかし、「Cloudflare」が提供しているAPIを利用すれば定期的に（30分ごととか）キャッシュをパージ（削除）できるようになります。解決策については後述します。
デメリット3:キャッシュされてはいけないものまでキャッシュされてしまう（解決策あり）
ページのデータごとキャッシュされるので、たとえばWordPressの場合、「Cloudflare」側にキャッシュされるタイミングがログイン状態でアクセスしたタイミングになった場合、「管理メニュー（ページ上部に表示されているメニュー）」やアーカイブ上の「非公開記事」や「編集」ボタンなどが表示される場合があります。もちろんそのままログインされることはないのですが、ユーザー名や非公開記事のタイトルなどが表示される可能性もあります。回避策としては管理画面などは通常のブラウザでアクセスし操作しても良いのですが、外部に公開される領域を確認する場合などに関してはログインが継続されていない環境、つまりブラウザに備わっている「プライベートモード」などでアクセスすることでこれらの問題は解決できます。
「Cloudflare」で構築する「ずるいキャッシュ」のメリット
これらのようなデメリットはあるものの総合的にはメリットの方が上回っていると筆者は思います。デメリットを上回るメリットにはどんなものがあるのでしょうか。
メリット1:とにかく簡単に設定できる
たとえばWordPressの場合、キャッシュの設定をするにはプラグインを用いたりします。しかし、キャッシュ系のプラグインは多々あり、またさらにテーマやサーバーサイドとの相性があったりして、負荷がかかったりします。「Cloudflare」ではサーバー側でキャッシュするのではなく、CDNとして動作し、サーバーとエンドユーザーの間に入ってキャッシュデータを配信してくれます。これらは「Cloudflare」側で設定するだけで簡単に実現でき、キャッシュ生成などでサーバーには負荷がかからず、逆にサーバーへのリクエスト、アクセス数を減らすことができます。
メリット2:とにかく速い
「Cloudflare」はCDNのサービスですので世界各国に配信ネットワークが張り巡らされており、日本にも東京と大阪の二ヶ所に配信拠点があります。なのでサーバーが日本になくても国内にあるサーバーへアクセスするのと同様のアクセス速度が期待できます。当サイトもこの方法でキャッシュを行なっていますが、ページデータ自体は概ね20msから40msの範囲でダウンロードされており、アクセス速度が向上も体感的にも感じられるほどです。
メリット3:とにかくSEOに良い
Googleは2018年7月に「Speed Update（スピードアップデート）」なるものを実施しました。これは「ページの読み込み速度も検索の順位に反映させますよ」というもので、今ではページの読み込み速度を向上させることもSEO対策の重要なポイントとなっています。普通に「Cloudflare」を利用しても速度向上は期待できますが、今回紹介する方法を用いればさらなる向上も期待できるんじゃないでしょうか。
スポンサーリンク
Cloudflareで構築するずるいキャッシュの設定手順
では、ページ自体をキャッシュさせる手順を紹介します。また今回はWordPressに適した設定内容で記載しています。「Cloudflare」のアカウントの作成や「Cloudflare」のDNSの設定方法については省いていますので、ご了承ください。下記の説明はすでにアカウントを登録しており、「Cloudflare」上でDNSの設定、キャッシングの設定されているものとします。
「Cloudflare」の「Page Rules」を設定する
通常のキャッシュの設定のみではページデータまではキャッシュされないので、「Page Rules」を設定してページをキャッシュさせます。上部のメニューより「Page Rules」を選んでください。
すると下記のように「Page Rules」の設定画面が表示されます。無料プランの場合「Page Rules」は3つまで設定できます。今回紹介するWordPressを想定した設定方法（バックエンドで動作している管理画面を有するような）では2つのルールを追加します。管理画面がない純粋な静的サイトであれば1つのルールのみ追加します。
「Cloudflare」の「Page Rules」でページデータをキャッシュさせる設定を施す
まずは「Cloudflare」の「Page Rules」でページデータをキャッシュさせる設定を施します。「Creat Page Rule」をクリックして新規のルールを作成します。
「if the URL matches」の項目に全データがキャッシュ対象になるように記入します。当サイトのアドレスの場合であれば「karelie.net/」となります。サブドメインの有無に関係なく動作させるため、初めにワイルドカードを付けています。
次に「Then the settings are」に「Cache Level」で「Cache everything」を設定し、上記のURLに該当する場合、全データをキャッシュするように設定します。また「Edge Cache TTL」に（無料プランでは）最短の「2hours」を設定します。自動的に2時間毎にキャッシュがパージ（削除）されます。
さらに短い時間でパージさせたい場合は後述する「Cloudflare」が提供しているAPIとCronを組み合わせて実現することが可能です。
「Cloudflare」の「Page Rules」で管理画面のキャッシュを回避する設定を施す
次に「Cloudflare」の「Page Rules」で管理画面のキャッシュを回避する設定を施します。「Creat Page Rule」をクリックして新規のルールを作成します。
「if the URL matches」の項目にはWordPressの管理画面のパスを含めたドメインをワイルドカードで囲むようにして記入します。当サイトのアドレスの場合であれば「karelie.net/wp-admin/」となります。（WordPressの設置方法によっては「karelie.net/wp/wp-admin/」となる場合もあります。そのような場合は「karelie.net/*wp-admin/」と設定しても良いと思います。）
次に「Then the settings are」に「Cache Level」で「Bypass」を設定し、上記のURLに該当する場合、キャッシュを無効化させます。また「Disable Perfomance」を設定します。「Disable Perfomance」を設定することで「Auto Minify」「Rocket Loader」「Mirage」「Polish」の設定が無効になります。
これで、管理画面内のキャッシュが無効になります。
「Cloudflare」の「Page Rules」の設定項目の順番を確認する
上記の設定で矛盾するのは一方では全データをキャッシュさせるように設定し、もう一方では一部のデータをキャッシュさせないようにしていることです。しかし、「Cloudflare」の「Page Rules」ではルールの順番で優先順位を決めることができます。今回の場合は、下記のように「管理画面のキャッシュを回避する設定」が上部にあれば大丈夫です。
「Cloudflare」の「Page Rules」の動作確認
これで設定が完了しましたので、実際にキャッシュが聞いているか確認してみましょう。Chromeの「検証ツール」の「Network」からページデータを選択し「Headers」の項目を確認してみましょう。すると「Response Headers」の中に「cf-cache-status: HIT」という項目があるはずです。これが表示されてれば「Cloudflare」上でキャッシュされているということになります。初回のアクセスではキャッシュが表示されないのでご注意ください。
ちなみに今回のテストでは「Cloudflare」でページがキャッシュされていた場合、リクエスト開始からレスポンスの最終バイトを受け取るまでにかかった合計時間は、なんと「26.70ms」でした。時間帯やアクセス場所によって異なる結果になりますが、この数値は驚異的です。
この「ずるいキャシュ」を設定しなかった場合は、「665.14ms」と悲惨な結果でした。
「Cloudflare」のキャッシュ削除の頻度を変更する
前述した手順ですと無料プランの場合、キャッシュの自動削除の間隔は「2時間毎」となってしまいます。更新頻度やアクセス数の少ない場合、「2時間毎」でなんら問題はないですが、コメント投稿が頻繁にあるサイトなどの場合、キャッシュの自動削除の頻度をもっと短くしたくなるのが人間の性というものです。
「Cloudflare」が提供しているAIPとcronを併用することでこの問題を解決できます。ここで必要になるのが、「Cloudflare」に登録しているメールアドレスと「Cloudflare」上でドメイン毎に割り振られている「Zone ID」と「Global API Key」です。cronの実行環境は各自でご用意ください。レンタルサーバーの場合、概ねサービスとして提供されています。VPSの場合はコマンドを叩いて設定できます。何もない場合は無料のcronサービスなどもあります。
「Cloudflare」の「Zone ID」を取得する方法
メニューより「Overview」を選びます。
するとページ内に「API」という項目が（ページ右下）あるあり、その中に「Zone ID」が表示されています。
「Cloudflare」の「Global API Key」を取得する方法
先ほどの「Zone ID」の下に「Get your API key」というリンクがあるのでクリックしてページを移動してください。すると「My Profile」のページに移動します。ページの下部に「API Keys」の項目があり、そこに「Global API Key」があるので「View」をクリックしましょう。
アカウントのパスワードと「reCAPTCHA」を入力すると「Global API Key」が表示されます。
「Cloudflare」のAPIに項目を追加する
次に「Cloudflare」のAPIに先ほど取得した項目を追加します。AIPは下記の通りで、「{Zone ID}」「{メールアドレス}」「{Global API Key}」の項目を適切なものに置き換えてください。{}は不要です。
curl -X POST "https://api.cloudflare.com/client/v4/zones/{Zone ID}/purge_cache" \ -H "X-Auth-Email: {メールアドレス}" \ -H "X-Auth-Key: {Global API Key}" \ -H "Content-Type: application/json" \ --data '{"purge_everything":true}'「Cloudflare」のAPIをcronで実行させる
「Cloudflare」のAPIを10分毎、30分毎にcronで実行させるには下記のような設定になります。
# 10分毎
*/10 * * * * curl -X POST "https://api.cloudflare.com/client/v4/zones/{Zone ID}/purge_cache" \ -H "X-Auth-Email: {メールアドレス}" \ -H "X-Auth-Key: {Global API Key}" \ -H "Content-Type: application/json" \ --data '{"purge_everything":true}'
# 30分毎
*/30 * * * * curl -X POST "https://api.cloudflare.com/client/v4/zones/{Zone ID}/purge_cache" \ -H "X-Auth-Email: {メールアドレス}" \ -H "X-Auth-Key: {Global API Key}" \ -H "Content-Type: application/json" \ --data '{"purge_everything":true}'まとめ
「Cloudflare」で構築する「ずるいキャッシュ」方法はいかがでしたでしょうか。向いているサイトとそうでないサイト。また「Coudflare」が止まってしまうとサイト自体にアクセスできなるという可能性もありますが、ページ自体もキャッシュし高速化を図るには魅力的な手段じゃないでしょうか。皆さんも是非お試しください。