Cloudflare 無料プランの使い方

このサイトでは、高速化のためにCloudflareの無料プランを利用していますが、私のような非技術者が導入するための手順について解説している日本語の記事がなかったので苦労しました。そこで今回は自分の備忘録を兼ねて、Cloudflareの導入手順についてひと通り整理しました。

なお、この記事ではエックスサーバーとの組み合わせを例にして解説している箇所がありますので、その他のレンタルサーバーをご利用の方は該当部分を適宜読み替えてください。

Cloudflareとは

Cloudflare(クラウドフレア)は、Webサイトのコンテンツを複数のデータセンター(エッジサーバー)にキャッシュして、自分のサーバー(オリジンサーバー)の代わりに配信してくれるCDNサービスです。

CDNサービスを使うと、コンテンツはエッジサーバーから直接閲覧者に配信されるため、オリジンサーバーにかかる負荷が低減し、安定した速度でページが表示されるようになります。また、大量アクセスによるサイバー攻撃への耐性も向上します。

今日、CDNサービスは、様々な会社が提供していますが、Cloudflareには以下の特徴があります。

  • データセンターが世界90か国200都市以上(日本国内では東京と大阪)にあり、海外からのアクセスにも強い
  • 最先端の高速化技術やセキュリティの設定をブラウザから簡単に設定できる
  • 無料プランがある(個人で使う分には充分に高機能)
  • 世界中で利用者が多く、公式コミュニティやブログの充実しているので、無料プランでも情報は入手しやすい(ただし英語)

導入手順の概要

Cloudflareの導入自体はとても簡単で、大きく次の3段階にわかれます。

  1. Cloudflareにサインアップして利用するWebサイトのドメインを登録
  2. 自分が契約しているドメインのネームサーバーの設定をCloudflareで発行されたものに置き換える
  3. ネームサーバーが切替わるのを待つ
  • Cloudfraleにドメインを登録すると Cloudfrale用のネームサーバーが発行されます。
  • ネームサーバーが切替わるまでは、オリジンサーバーからコンテンツが配信されるので、Webサイトが見れなくなる状態(ダウンタイム)が発生することはありません。

それでは順にみていきましょう。

Cloudflareで利用するWebサイトのドメインを登録

Cloudflare公式サイトのトップページからサインアップをクリック

Cloudflare公式サイトトップページ(https://www.cloudflare.com/)にアクセスしてサインアップボタンをクリックしてアカウントの登録作業を始めます。

お使いのブラウザ環境によっては、URLの末尾に /ja-jp/ が付いた日本語版トップページが表示されますが、日本語なのは入口のトップページだけなので、どのみち本家英語版になります(2020年2月現在)。

ユーザーIDとなるメールアドレスとパスワードを入力

メールアドレスはCloudflareのユーザーID兼用となっています。Cloudflareでの運用に必要な各種情報などが送られてくるので、サイトを管理する方の有効なメールアドレスを入力します。なお、Cloudflareを運用するサイトのドメインを使ったメールアドレスである必要はありません。

Cloudflareを利用するサイトのルートドメインを入力

Cloudflareを利用するサイトのルートドメインを入力します。サブドメインだけで利用する場合であってもルートドメインを入力てください。なお、URLの頭につく https:// や末尾につく / は入力しません。

例えばこのサイトのURLは https://ts-jpfan.com/ ですが、画面に入力するのは ts-jpfan.com となります。

利用プランの選択

プラン選択画面で Free(無料)を選択します。もちろん後からより高機能なPro版以上にアップグレードすることもできますが、まずは無料でスタートしましょう。

先ほど登録したドメインの情報をスキャンしている間少し待ちます
スキャン結果を確認して次に進みます

この画面では、スキャン結果が一覧表示されます。Type Aの行に、先ほどステップ3で入力したCloudflareを利用するサイトのルートドメインがあり、オレンジ色の雲マークがついていればOKです(上記画像だと上から2番目)。

スキャン結果一覧に本来あるべきレコードがない場合は、上記画像①の枠内に必要事項を入力して Add Record をクリックすると追加することができます。

  • Cloudflareでキャッシュしたくないサブドメイン等がある場合、オレンジ色の雲マークをクリックしてアイコンをグレーにすると、直接オリジンサーバーから配信されます。
  • メールサーバーに関するもの(上記画像の例ではMXレコードとTXTレコード)は、デフォルトでオリジンサーバーとの通信のみになっていて変更できません。メールはCloudflareでキャッシュしたり代理応答するべきものではないからです。
  • DNSレコードの右側にあるバツ印をクリックすると、該当のDNSレコードをCloudflareの処理から恒久的に除外します。この削除は間違って登録してしまったレコードに対しておこないます。 オレンジ色の雲がついていないからといって何でも削除していいわけではありません。

Cloudfraleにサブドメインを追加する方法

Cloudflareのネームサーバー情報が発行される

Cloudflare用のネームサーバー情報が発行され、この後の作業についての説明が表示されます。

この画面が表示されたら、すぐに先に進まず、ブラウザの別ウィンドウで、ネームサーバーの情報の書き換え作業をおこなってから戻ってきます

自分が契約しているドメインのネームサーバーの設定をCloudflareで発行されたものに置き換える

自分が契約しているドメインのネームサーバーの設定を先ほどのステップ7で発行されたCloudflare用のネームサーバーの情報に置き換えます。

ここでの解説は、エックスサーバーで管理しているドメインを例にしています。レンタルサーバーとドメインを別会社で契約している場合、例えばドメインをお名前.comで契約している場合なら、お名前.comの管理画面からネームサーバー情報を置き換えてください。

XSERVERアカウント画面にログインして ネームサーバー情報を変更したいドメインの「ドメインパネル」をクリック
ドメインパネルで下にスクロールし、ネームサーバー情報欄の「設定変更」をクリック

変更前のネームサーバー情報は、さきほどCloudflareがスキャンしたものと同じはずです。

変更前のネームサーバー情報は、念のために控えておきましょう。Cloudflareをやめて元に戻す際に必要になります。

ネームサーバー変更画面で ネームサーバー欄に Cloudflareで発行された2つのネームサーバーを入力

ネームサーバー3~5には何も入力しません。

入力内容を確認して確定

ネームサーバーの書き換えが完了したら、開いておいた Cloudflare の画面に戻りましょう。

ネームサーバーが切替わるのを待つ

Cloudflareのネームサーバー情報画面に戻って 画面下の「Done, check nameservers」をクリック

万が一この画面を閉じてしまっていた場合は、Cloudflareのダウンロードにログインして 画面左上の「Overview」アイコンをクリックして表示される画面から ネームサーバーのチェックを実行できます。

Cloudflareのダッシュボードに切替わったら、Cloudflareが有効になったかどうかを確認

ネームサーバーの変更直後なので、大抵の場合は以下のような画面が表示されるはずです。この時点ではまだCloudflareのエッジサーバーからコンテンツは配信されていません。

ネームサーバーの変更が反映するまで、数分から数時間かかる場合があるので、このまましばらく待ちましょう。Cloudflareは定期的にネームサーバー情報をチェックしているので、あわてて Re check now ボタンを押す必要はありません。

Cloudflareからネームサーバー情報のチェック完了のメールが届く

チェックが完了するとCloudflareアカウントで登録したアドレス宛に以下のようなメールが届きます。

ブラウザでCloudflareのダッシュボードをリロードして有効状態を確認できたら完了

Cloudflareからネームサーバー情報チェック完了=Status Active のメールが届いたら、ブラウザでCloudflareのダッシュボード画面をリロードすると、サービスが有効になっていることが確認できます。

以上でCloudflareの導入作業は完了です。

補足

Cloudflareアカウントのメールアドレス認証

ここまでの作業で、Cloudflareの導入作業は完了していますが、最後にCloudflareアカウントに登録したメールアドレス(ユーザーID)を認証しておきます。登録したメールアドレス宛に以下のようなメールが届いているはずなので、ブラウザでCloudflareにログインした状態でメールアドレス内のリンクをクリックするだけです。

メールアドレスの認証は、Cloudflareのダッシュボード上部に表示されるリンクからも実行できます。

メールアドレス認証は、プログラムなどで不正にアカウントを作成するのを防止するためのものです。確認はしていませんが、認証を放置した場合はCloudflareアカウントが停止されたりするかもしれませんので、忘れずにやっておきましょう。

メールアドレスの送受信テスト

Cloudflareに登録したドメインでメールを利用する場合は、正しく送受信できるかチェックしておきましょう。通常、ルートドメインのメールDNSレコードは、Cloudflareの初期スキャンで自動登録されているので、ルートドメインのメールアドレスは問題なく動作するはずです。

特に、サブドメインのメール関連のDNSレコード(MXおよびSPF)を手動で設定した場合は、設定を誤っているとメールが受信できないので必ず確認しておくことをお勧めします。

導入後の設定について

初心者は公式プラグインを使うのもおすすめ

CloudflareはWordPress側で特別な設定をしなくても機能しますが、お好みで公式のWordPress用プラグインをインストールすると、記事の更新時にCloudflareのキャッシュを自動でクリアする機能や WordPress向けおすすめ設定を自動で設定してくれる機能などを利用することができます。

ただ、公式プラグインのおすすめ設定は他の最適化プラグイン(AutoptimizeやW3 Total Cacheなど)との併用を前提としていないので、一旦おすすめ設定を適用した後に必要に応じて 該当部分の設定を変更すると良いでしょう(後述)。

もちろん公式プラグインを使わずにCloudflareのWebサイトにログインして直接設定を変更しても構いません。公式プラグインによるおすすめ設定の項目は以下のサポート記事で確認することができます。

公式プラグインのおすすめ設定から変更を検討すべき項目

  • Auto Minify
    おすすめ設定ではONですが 他のプラグインでコードを最適化済みの場合は不要です。なお、CloudflareのMinify機能のコード縮小化は他のプラグインに比べてそれほど強力ではありません。

  • Browser Cache TTL
    おすすめ設定では4時間に設定されていますが、オリジンサーバーや他のプラグインで別途ブラウザキャッシュを設定している場合に Cloudflareが設定を上書きしてしまいます。その場合は Browser Cache TTLの設定を「Respect Existing Headers」に変更するとオリジナルの設定を維持できます

  • Email Address Obfuscation
    Webサイトに表示しているお問い合わせ先などのEmailアドレスを不正な目的で自動収集するプログラムから保護する機能で おすすめ設定ではONになっていますが、実際にサイトを表示してみて表示がおかしくなっていないかを確認しておきましょう。

  • Server-side Excludes
    こちらはEmail Address Obfuscationと似たような機能で、Emailアドレス以外の情報(例:電話番号など)を保護する機能です。同様に動作確認をしたうえで使用します。

  • Rocket Loader
    Javascriptなどの最適化によりWebサイトのパフォーマンスを大幅に向上する機能です。WordPressで使用しているプラグインやアフィリエイト広告などによっては相性が悪いこともあるので おすすめ設定ではOFFになっていますが、シンプルな個人ブログなどでは 動作を確認した上でONにしても良いと思います。

HTMLをキャッシュしてWebサイトを更に高速化する

Cloudflareは 初期設定で静的な画像やその他のファイルをキャッシュしてCDNから配信しますが、HTMLはその対象外になっています。 HTMLをキャッシュの対象に含めることでWebサイトを更に高速化することができます。

ただし現状のCloudflareの無料プランでHTMLをキャッシュする方法は 使い勝手が悪いのでお勧めしません。  WP Fastest Cache や WP-Optimize、 W3 Total Cache などのキャッシュプラグインを使用する方が遥かに便利です。

Cloudflareの無料プランでは ユーザーがWebサイトにログイン中かどうかに関わらず全てのページがキャッシュされます。除外用のルールを使用して必要なページだけキャッシュさせることは可能ですが、表示されるページコンテンツ内に 本来ログイン中のユーザーにだけ表示されるような情報等が含まれる場合はここで紹介する方法は使用することが出来ません。

また、PC用とモバイル用にコンテンツを出し分けているようなサイトの場合もここで紹介する方法は利用できません。

なお、有料の Business(200ドル/月)以上のプランでは Cookieに基づいてキャッシュを制御するページルールが使用できます。

WordPress のユーザープロフィールでログイン中のユーザーのツールバーを非表示にする

これはWordPressにログイン中のユーザーに表示される画面上部のツールバーをCloudflareにキャッシュさせないための措置です。

CloudflareのWebサイトにログインし、Page Rules アプリを開く

Cloudflareにログインしたら画面上部の青いアイコンの中から Page Rules をクリックし、Create Page Rule をクリックします。※ちなみにCloudflareでは各種設定画面を呼び出すための青いアイコンを「アプリ」と呼んでいます。

3つのルールを作成する

WordPress管理画面、投稿プレビュー画面、ログイン画面、検索結果画面を除外して全てのページをキャッシュするため3つのページルールを作成します。なお、無料プランではページルールは3つまでしか作れません。

以下の作成例のドメイン部分はご自身のWebサイトのものに置き換えてください

ページキャッシュのためのルール

まずは、HTMLページをキャッシュするためのルールです。①の入力欄に以下の振合いで記入します。「*」アスタリスク記号はワイルドカードで、ドメインの前後にどの文字列が来てもマッチするようになっています。

*your-domain.com/*

//サブドメインだけ適用するなら
*sub.your-domain.com/*

//サブディレクトリ型なら
*your-domain.com/wp/*

となります。

あとは、上記画像を参考に以下のルールを設定します。

  • Cache Level
    Cache Everything を選択します。これ以外を選択するとHTMLをキャッシュできません。

  • Edge Cache TTL
    CDN側にキャッシュを保持する期間を設定します。無料プランでは最小で2時間(2hours)からとなっていますが、変更の少ないWebサイトなら最大の1か月に設定しても良いでしょう。

プレビュー画面、検索結果、ログイン画面などをキャッシュから除外するルール

WordPressのプレビュー画面やログイン画面にはURLに「?」記号が含まれるので、これを利用してページキャッシュから除外させます。ルールのURL入力部分に以下の振合いで記述します。

*your-domain.com/*?*

//サブドメインの場合
*sub.your-domain.com/*?*

//サブディレクトリの場合
*your-domain.com/wp/*?*

あとは、上記画像を参考に以下のルールを設定します。

  • Cache Level
    Bypass を選択します。これによってCloudflareによるキャッシュから除外されます。

WordPressの管理画面をキャッシュから除外するルール

最後にWordPressの管理画面すべてをCloudflareのキャッシュから除外するルールです。URL入力部分に以下の振合いで記述します。

*your-domain.com/wp-admin/*

//サブドメインの場合
*sub.your-domain.com/wp-admin/*

//サブディレクトリの場合
*your-domain.com/wp/wp-admin/*

あとは、上記画像を参考に以下のルールを設定します。

  • Cache Level
    Bypass を選択します。これによってCloudflareによるキャッシュから除外されます。

ページルールの順序を設定してONにする

作成したページルールを以下の順に並べ替えてからルールを有効化します。

  1. 管理画面のキャッシュ除外ルール
  2. プレビュー画面等のキャッシュ除外ルール
  3. ページキャッシュのためのルール

ページキャッシュのためのルール(Cache Everything)を必ず一番最後にしてください。これは上のルールほど優先順位が高いためで、先頭に配置するとその他の除外ルールが無意味になるからです。

動作を確認する

ページルールの設定が終わったら必ず動作を確認しておきましょう。Google Chromeなどのウェブブラウザの Developerモード(検証画面)でそのページのResponce Header(レスポンスヘッダー)を確認すると Cloudflareのキャッシュの有無がわかります。

cf-cache-status の値が HIT であればページキャッシュが出来ています。値が Dynamic であればページキャッシュから除外されています。

管理画面、ログイン画面で cf-cache-status の値が Dynamic であること、通常のページで 値が HIT になっているかを必ず確認しましょう

Cloudflareのキャッシュ削除方法

Cloudflareのキャッシュは以下の方法で削除することができます。


いかがでしたか?Cloudflareは画面が英語なので取っ付きにくい感じはありますが、導入作業自体はとても簡単で、初期設定のままならWebサイトの表示が崩れたりすることもまずありません。

設定を色々と試してみて、やっぱり自分のサイトには向いていないと思ったら、こちらで作業したネームサーバーの情報をCloudflareに置き換える前のものに戻せば、コンテンツの配信はオリジンサーバーに戻り、Cloudflareでの各種設定は関係なくなるので、導入によるリスクはほとんどないと言えるでしょう。

高速化や負荷分散、セキュリティ対策のために一度は試してみたいと思っているなら、ぜひ挑戦してみてください(ただし自己責任でお願いします)。