Cloudflare 無料プランの使い方~導入編

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

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

Cloudflareとは

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

クラウドフレアのデータセンターマップ
  • ※1 CDN側のサーバーのことを「エッジサーバー」と呼びます
  • ※2 自分のサーバーのことを「オリジンサーバー」と呼びます
  • ※3 コンテンツ・デリバリー・ネットワークの略

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

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

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

導入手順の概要

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

Cloudflareにサインアップして利用するWebサイトのドメインを登録

この時、Cloudflare用のネームサーバーが発行されます。

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

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

ネームサーバーが切替わるまでは、オリジンサーバーからコンテンツが配信されるので、Webサイトが見れなくなる状態(ダウンタイム)が発生することはありません。

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

Cloudflareにサインアップして利用するWebサイトのドメインを登録

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

Cloudflare公式サイト

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

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

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

Cloudflareアカウント登録画面

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

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

Cloudflareで運用するドメインの入力画面

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

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

利用プランの選択

Cloudflareのプラン選択画面

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

先ほど登録したドメインの情報をスキャンしている間少し待ちます

登録したネームサーバー情報のスキャン画面

スキャン結果を確認して次に進みます

ネームサーバー情報のスキャン結果画面

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

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

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

サブドメインを追加する場合

サブドメインで利用する場合は、上記画像①の枠内に 以下の振合いで入力してレコードを追加します。例えば追加したいサブドメインが sub.example.com の場合、以下のいずれかの方法で追加します。

方法その1

  • Typeは A を選択
  • Name 欄に sub を入力
  • IP4 address 欄に ルートドメインと同じ IPアドレスを入力
  • Automatic TTL を選択

方法その2

  • Typeは CNAME を選択
  • Name 欄に sub を入力
  • IP4 address 欄に ルートドメインと同じ example.com を入力
  • Automatic TTL を選択

サブドメインでメールアドレスを使用している場合

サブドメインでメールアドレスを使用している場合は、サブドメインのメール関連のDNSレコードも追加します。例えばエックスサーバーで運用しているこのサイトの場合、サブドメイン追加後のDNSレコード一覧は以下のようになっています。

サブドメイン outlook.aptrust.net でメールを利用する場合は、リスト上部の追加エリアから、以下の振合いで MXレコードとTXT(SPF)レコードを追加します。実際に入力する際は、ご自身のサーバーのものに置き換えてください。

サブドメイン用MXレコードの追加例

サブドメインのMXレコード追加
  • Type は MX を選択
  • Name欄 は サブドメイン 部分(例では outlook )を入力
  • Priority欄 は 1 を入力
  • TTL は Auto を選択

MX レコードは 同じホスト名で同じ優先度だと動作しないので、複数のサブドメインを追加する場合は Priority の数字をひとつづつ増やしてください

Cloudflareではコンテンツを配信するWebサーバーとメールサーバーを分けることを推奨しているようなのですが、エックスサーバーのようなレンタルサーバーでは、そもそもメールサーバーがWebサーバーと同じIPアドレスにあるので推奨設定と同じには出来ません。

MXレコードの推奨設定については次のページの「Best practices for MX records on Cloudflare」の項で解説されています。

ただし、上記のような設定になっていてもダメというわけではありません。メールに関してはCloudflare導入前と同じ保護レベルのままになります。

メールサーバーがWebサーバーと同じIPにある場合、MXレコードは元のIPアドレスを公開します。

If your mail server resides on the same IP as your web server, your MX record will expose your origin IP address.

Cloudflare公式

サーバーのIPアドレスが公開されると、サーバーは直接攻撃に対してより脆弱になります。 Cloudflareにトラフィックをプロキシするときに、攻撃者がオリジンサーバーのIPアドレスを決定することは依然として可能ですが(より困難です)。

When your server’s IP address is exposed, your server is more vulnerable to direct attacks. It is still possible (but more difficult) for attackers to determine your origin server IP address when proxying traffic to Cloudflare.

Cloudflare公式

サブドメイン用のSPFレコード追加例

SFPレコードは 迷惑メール判定対策の送信ドメインの認証情報 で、サブドメインで利用するメールアドレスが受信専用の場合は、あえて設定する必要はありません。設定しておくと相手がGmailなどの場合に、こちらからのメールが迷惑メールフォルダに振り分けられにくくなります。

今回はこちらもサブドメイン用にレコードを追加しておきます。

サブドメインのSPFレコード追加
  • Type は TXT を選択
  • Name欄 は サブドメイン 部分(例では outlook )を入力
  • TTL は Auto を選択
  • Content欄に ルートドメインと同じ 文字列「v=spf1 +ip4:123.45.678.90 ~all

※ご自身のサーバーのものに置き換えてください。

上記画像では、SPFレコードを Type TXT で設定しましたが、Cloudflareでは Type SPF でも設定できます。お好みでどうぞ。

参考までに、サブドメイン用のMXレコードとSPFレコードを追加した後はこんな感じになります。赤枠部分が追加したサブドメイン用のDNSレコードです。

サブドメイン用のMXとSPFレコードを追加した後のDNSレコード一覧画面

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

Cloudflare用のネームサーバー情報に書き換える旨の指示が表示されたところ

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

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

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

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

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

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

エックスサーバーアカウント画面(旧インフォパネル)

ドメインパネルで下にスクロールし、ネームサーバー情報欄の「設定変更」をクリック

エックスサーバーのドメインパネル

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

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

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

エックスサーバーのネームサーバー情報変更画面

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

入力内容を確認して確定

エックスサーバーのネームサーバー情報変更確定画面
エックスサーバーのネームサーバー変更完了画面

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

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

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

Cloudflareのネームサーバー情報画面

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

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

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

cloudflareダッシュボード:ネームサーバー情報チェック待ち画面

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

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

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

Cloudflareから届いたネームサーバー情報のチェック完了のメール画面

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

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

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-OptimizeW3 Total Cache などのキャッシュプラグインを使用する方が遥かに便利です。

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

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

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

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

WordPressのユーザープロフィール編集画面

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

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

Cloudflareのページルールアプリ(設定画面)

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

3つのルールを作成する$

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

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

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

Cloudflare Cache Everything

まずは、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か月に設定しても良いでしょう。

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

Cloudflare Cache Bypass preview&query

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

*your-domain.com/*?*

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

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

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

Cache Level

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

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

Cloudflare Cache Bypass admin

最後に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にする$

Cloudflare Page Rules order and enable

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

管理画面のキャッシュ除外ルール

プレビュー画面等のキャッシュ除外ルール

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

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

動作を確認する$

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

Cloudflareによってページキャッシュされたことがわかる

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

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

Cloudflareのキャッシュ削除方法

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

Cloudflareのキャッシュ削除画面

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

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

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