CloudFlare導入で高速化:DNS設定に注意!

先日、Wordpressのトラブルが遭った際に、CloudFlareの設定を解除しました。それ以来、元に戻す(=CloudFlareをOnにする)のをすっかり忘れていました。元に戻すにあたり、CDN(コンテンツ・デリバリー・ネットワーク)やDNSの設定を備忘録にした方が良いなと思ったので、記事にすることにしました。

 

目次

CDNとは?

CDNとは、コンテンツ・デリバリー・ネットワーク(Contents Delivery Netowrk)の略です。最近はかなり身近になりましたが、元々はとても高価なサービスでした。

 

その昔、インターネット回線も現在ほど高速ではない時代、サービス提供元(ソースサーバー)までの物理的距離が提供速度と直接的に影響し、サービス品質を左右していました。提供距離が長くなれば、品質は下がるという反比例する相関関係があったのです。

 

そのため、提供データ(コンテンツ)を分散・保持させることにより、提供距離に関係なく一定の品質で提供できるようにするよう、色々な方式で提供されています。

 

そのため、CDNの主な役割は、ウェブサイトとそのコンテンツ(とかくアクセス:リクエストによって変化がない静的ファイル)の配信を高速化するためのものと考えられています。CDNは、現在世界規模で展開されているサービスならず、高速で安定した品質を提供するサービスには欠かせない、根幹のサービスであると言っても過言ではないでしょう。

 

WordPress高速化

CDNは、ブログ(CMS)サービスで作成された記事の表示を高速化するために抜群の効果を得られる手段です。私もこのブログで利用しているCMS:Wordpressでは、小規模CDNとも言える機能をWP Fastest CacheW3 Total Cacheといったプラグインをインストールすることで利用することが出来ます。これは、提供元(オリジン)サーバー上でウェブサイトとそのコンテンツ(とかくアクセス:リクエストによって変化がない静的ファイル)の配信を高速化するため作っておき、2回目以降からは作成済みファイル(キャッシュ)を提供する方法となります。

 

CDNサービス:CloudFlare

一方で、今回ここに残す記事で紹介するCDNサービスは、世界ネットワーク規模でキャッシュ(分散・保持)する機能を提供します。いくつかあるCDNサービスの中から、DNS(ルートネームサーバー)を変更することでキャッシュできる、CloudFlareを無料ライセンス範囲内で利用する方法と設定について記載していきたいと思います。

 

CloudFlare利用方法・設定

まず、作業に際しての注意事項があります。

注意事項

DNSレコードの設定を間違えると、サイトがダウンしたり、メールを消失したりする

 

若かりし頃、私もやらかしたことがあります。

 

閑話休題。それでは、利用方法と設定に参ります。

 

利用方法・設定

サイト追加

1. 以下公式ページからCloudFlareにサインアップし、ログインします。

 

2. サイトを追加する もしくは サイトを追加 を押下します。

 

3. WordPressを利用している独自ドメインを入力し、 サイトを追加 を押下します。

 

4. プランを選択し、プランを確認するを押下します。

 

5. (現在伝播している)DNSレコードのスキャンが始まります。終わるまで待ちます。

 

6. DNSレコードのスキャンが終わると、以下のように表示されますが・・・

ここで注意が必要です。いくつかのDNS設定を変更する必要があります。

 

DNSレコードに注意が必要な理由

もちろん、ルートネームサーバーの設定にもよります。ですが、先述の通り、CDNの主な役割は、ウェブサイトとそのコンテンツ(とかくアクセス:リクエストによって変化がない静的ファイル)の配信を高速化するためのものです。

 

そのため、http通信以外のサービスをキャッシュしてしまうと、以下のような問題が発生する可能性があります。

 

  • 意図しない(メール・FTPなどの)サービスへのアクセスも増大させてしまう
  • ルートネームサーバーでのみ許されるDNSレコード設定をそのままCDNへ設定すると、DNSが正しく動作しない恐れがある
  • キャッシュ出来ないサービスは接続不可能になることもある

 

 

その上で、今回の私の環境(さくらインターネットのレンタルサーバーで、Wordpressとメールアドレス)を以下のように利用しています。

 

利用環境

WordPress
kengenius.com
kengenius.com | バイク(Moto Guzzi V7 III Anniversario)、カメラ(Sony α7 Ⅲ)やスイーツ、IT・ビジネ... バイク(Moto Guzzi V7 III Anniversario)、カメラ(Sony α7 Ⅲ)やスイーツ、IT・ビジネス、世界中の文化について綴っています。
  • httpでのアクセス(ex. http://www.kengenisu.com)は、https(ex. https://www.kengenisu.com)へリダイレクトされる
  • wwwなしでのアクセス(ex. https://kengenisu.com)は、wwwあり(ex. https://www.kengenisu.com)へリダイレクトされる

 

メール

「アカウント@kengenius.com」で受信する

 

問題点

  1. サブドメイン「mail」がCNAMEでAレコード「kengenius.com」を参照するようにされており、mail.kengenius.comもCDNによるキャッシュをすることになる
  2. MXレコードで@kengenius.com のメールはメールサーバーkengenius.com宛へ送信されるように設定されている(上記1. と合わせてRFC1912で制定されているCNAME利用の制限事項:メール送受信不可・ロストする可能性あり
  3. CDNでキャッシュするべきではないサービスのサブドメイン(blog、ftp)が設定される

 

ということで、以下のように設定を変更します。

 

解決策

特に、MXレコード、Aレコード「mail」をDNSのみにすることが大切です。

「IPv4 / v6アドレス」や各ドメイン文字列はそれぞれご利用の環境に読み替えてください。

 

正しく入力が終わったら、続行を押下します。

 

7. ルートネームサーバーをCloudFlare(cray.ns.cloudflare.com

/ dara.ns.cloudflare.com)に変更します。

 

私は先述の通り、さくらインターネットのレンタルサーバーを利用していますので、以下のように変更します。

 

8. ルートネームサーバーの変更が完了したら、完了しました、ネームサーバーをチェックしてくださいを押下します。

 

そのままタブSSL/TLSの設定に移動します。

 

SSL/TLS設定

1.以下のように設定し、続行を押下します。

  • お客様の SSL/TLS 暗号化モード:フル (厳密)
  • 常に HTTPS を使用:On
  • Auto Minify:全てチェック
  • Brotli:On

 

Auto MinifyやBrotliの設定により、HTMLレンダリングが崩れる場合があります。実際の画面をチェックしながら設定を変更しましょう。

 

以上で、初期設定は終了です。

 

ルートネームサーバー変更が伝播、反映が確認されると、CloudFlareのホーム画面で対象ドメインがアクティブになります。

 

DNS設定

1.再度、タブDNSを開いて、先程設定された状態になっているか確認します。

 

最後に、キャッシュするページのルール設定を行います。

 

ページルール設定

CloudFlare無料ライセンスでも、3つまでのページルールを設定できます。この3つのルールをフルに利用し、Wordpress向けのキャッシュ対象の設定を行います。3つのルールは以下の通りです。

 

  1. 管理画面(/wp-admin/*)をキャッシュしない
  2. プレビューモード(/*preview=true*)をキャッシュしない
  3. 上記1.、2.以外をキャッシュする

 

まずはタブページルールを開き、ページルールを作成を押下します。

 

1. 管理画面(/wp-admin/*)をキャッシュしない

以下のようにルールを作成します。

 

2. プレビューモード(/*preview=true*)をキャッシュしない

 

3. 上記1.、2.以外をキャッシュする

 

全てのルール作成が完了し、以下のようになったら終了です。

 

これで全ての設定が終了しました。あとは、CDNでキャッシュされていくのを待つのみです。

 

さいごに

CDNを導入することによって、Google PageSpeed Insightsのスコアがそれほど大きく変わることはありませんが、SEO体感は大きく変わります。

 

少し大変ですが、この記事をご覧いただいた方がCDN導入によりWordpress応答速度を改善、素敵なブログライフになることを願っています。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次