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

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

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