無料CDNサービスCloudflareの登録方法。無料で転送量の負荷分散。

smartmockups0

今回は、Cloudflareの登録方法の紹介です。

Cloudflareとは、CDN(コンテンツデリバリーネットワーク)サービスを運営しているアメリカの企業です。

CDNサービスとは、利用しているレンタルサーバー上のコンテンツの中でキャッシュ可能なファイル(画像,CSS,JSファイル等)をCloudFlare上の複数サーバーにキャッシュしておくことで、利用中のサーバーの負荷を軽減するサービスです。

無料で使えるCDNサービスでは、Cloudflareはオンリーワン的なサービスだと思います。けれどもアメリカの企業が運営しているサービスなので、インターフェースが全て英語となっています。

インターフェースが英語とはいえ、簡単な英語さえできれば登録することは特に難しいこともないのですが、一応登録方法を記しておこうと思います。

スポンサーリンク
レクタングル(大)広告

Cloudflareの設定方法

Cloudflareに初期登録するには、以下の手順が必要です。

  1. Cloudflareへの登録
  2. Cloudflareでの初期設定
  3. ドメイン管理画面でネームサーバーの変更
  4. Cloudflareでネームサーバーのの再チェック

Cloudflareへの登録

Cloudflareに登録するには、まずCloudflareに移動し、右上にある「Sigh Up」をクリックしてください。

Cloudflare - The Web Performance & Security Company

すると以下のような入力画面が表示されるので「メールアドレス」と「パスワード」を入力し「I agree to Cloudflare’s terms and conditions and privacy policy.(Cloudflareの規約とプライバシーポリシーに同意する)」にチェックを入れて「Create Account」ボタンをクリックしてください。

Cloudflareの入力画面

Cloudflareでの初期設定

簡単な登録を終えると、以下のような画面が表示されるのでテキスト入力欄に「ドメイン(当サイトで言えばnelog.jpの部分)」を入力して「Scan DNS Records」ボタンをクリックしてください。

Get Started With Cloudflare  Cloudflare - Web Performance & Security

すると、以下のようにDNSレコードのスキャンが始まるので終わるまでしばらく待ちます。

We're scanning your DNS records  Cloudflare - Web Performance & Security

スキャンが終わると、「Continue」ボタンが有効になるのでクリックしてください。

DNSスキャンの終了

すると、以下のようなスキャン結果が表示されるので、「Continue」ボタンをクリックします。

Step 2  Verify That All Of Your DNS Records Are Listed Below- nelog.jp  Cloudflare - Web Performance & Security

通常利用であれば、ここで特に特別な設定を行う必要はないかと思います。

すると「プラン選択画面」が表示されるので、無料プランであれ「Free Website」を選択して「Continue」ボタンをクリックしてください。

Cloudflareのプラン選択画面

すると、現在のネームサーバーの設定状況が表示されるので「Continue」ボタンをクリックしてください。

Step 4  Change Your Nameservers- nelog.jp  CloudFlare - Web Performance & Security

Cloudflare側の設定が完了すると、以下のような画面が表示されます。赤枠で囲った部分のネームサーバーは後で利用するので、メモをするか、そのままブラウザのタブを表示したままにしておいてください。

Overview- nelog.jp  CloudFlare - Web Performance & Security

ドメイン管理画面でネームサーバーの変更

次に、利用中のドメイン管理サービスから、ネームサーバーの変更を行います。

僕の場合、ムームードメイン を利用しているので、以下ではムームードメインの変更方法を紹介したいと思います。利用している、ドメイン管理サービスが違う場合は、利用中のネームサーバー変更に合わせて変更する必要があります。

ネームサーバーの変更方法については、「サービス名 ネームサーバー変更」で検索すると出てくると思います。

まずは、利用中のドメイン管理サービスにログインします。

管理ドメイン一覧の中から「ネームサーバーを変更するドメイン」を選択します。

ムームードメインの管理ドメイン一覧

「ネームサーバー設定変更」項目にある「ネームサーバー設定変更」ボタンをクリックします。

ムームードメインのネームサーバー変更項目

まず、「GMOペパボ以外 のネームサーバを使用する」にチェックが入っていることを確認してください。

GMO以外のネームサーバーを利用する

そして「ネームサーバーを設定してください」と書かれた箇所の「ネームサーバー1」と「ネームサーバ2」を、先程Cloudflareで表示されたものに書き換えます。

この部分ですね。

書き換え用のネームサーバー

以下のように書き換えたら、

ムームードメインでネームサーバーの書き換え終了

「ネームサーバー設定変更」ボタンをクリックして設定を反映させてください。

ムームードメインのネームサーバー設定変更ボタンを押して設定を反映

設定反映後、「ネームサーバー設定変更」項目が以下のようになれば、ドメイン管理サービスでの設定は終了です。

設定変更後のムームードメインのネームサーバー状態

Cloudflareでネームサーバーのの再チェック

最後に、先程開いたままにしておいたCloudflareタブに移動して、「Recheck Nameservers」ボタンをクリックします。

ネームサーバーの設定チェック

何か、緑色的な通知バーが表示され「Success」的なことが書かれていれば、ネームサーバーの設定がうまくいっているので、今後Cloudflareによりサーバーの負荷軽減が実施されます。

通知バーは、一瞬しか表示されなかったので、キャプチャが撮れませんでした。ネームサーバーの設定がうまくいっていない場合は、赤色の通知バーが表示されます。

設定

設定は、基本的にデフォルトでもOKかと思います。

以下では一応、基本的に押さえておきたい設定を紹介しておきます。

W3 Total Cacheプラグイン等をインストールすれば、Wordpressの管理画面でCloudflareの設定を変更することもできます。けれど、個人的にはCloudflareの管理画面で行う方が簡単なので、そちらの方法を紹介します。

メールプロテクト機能の設定

Cloudflareには、デフォルトでサイト内に書き込まれたメールアドレスを、スパムなどに利用されにくくするように「メールプロテクト」機能がついています。

ただ、日本語環境だと@MrYhiraといったような、TwitterのIDを書き込んだだけでも、メールと誤認識して[email protected]変更されてしまう不具合があります。

マルチバイト環境でメールでなくても[email protected]と表示されてしまう不具合

ですので、日本語環境で問題なく利用するには、Cloudflareの管理画面から「Scrape Shield」メニューを選択します。

Scrape Shield

あとは「Email Address Obfuscation」項目をOFFにしてください。

「Email Address Obfuscation」項目をOFF

その他にも、HTMLコメントを使った解除法もあります。詳しくは、以下のページを参照してください。

参考 CloudFlare導入で本文が[email protected]表示になる場合の対処法

SSLの設定

僕は、httpサイトとhttpsサイトの両方で利用していますが、SSL化されているサイトと、されていないサイトでは、設定に違いがあるので紹介。

SSLの設定は、「Crypto」で行います。

Crypto

あくまで僕の運営サイトでうまくいっている方法です。サイトによっては、他の設定の方が好ましい可能性もあります。

httpサイト

httpで運営しているサイトでは、SSL項目は「Flexible」にしておきます。

SSLをフレキシブルに

httpsサイト

SSL化して運営しているサイトでは、「Full」に設定します。

SSL設定項目をフルに

僕の環境では、SSLサイトでは「Full」にしておかないと正常動作しませんでした。

サイトのSSL化についての詳細は以下を参照してください。

WordpressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)
エックスサーバーが独自SSLを無料かつ無制限で利用できるようになりました。 何年か前なら、年に結構なお金のかかっていたものが、...

CloudFlareのキャッシュをクリアにする

CloudFlareにファイアキャッシュされていると、CSSやJavaScriptに更新があったとしてもすぐには反映されません。

スタイルをカスタマイズしたり、テーマファイルなどにバージョンアップなどがあったりして、すぐに更新を反映させたい場合は、「Caching」からキャッシュのクリアを行う必要があります。

Caching

「Caching」ページを開いたら「Purge Cache」項目を「Purge Everything」に変更します。

Purge Cache

サイト上で更新をすぐに反映させたい

テーマのカスタマイズなどで、いろいろ変更したスタイルなどを実際のサイトで更新しながらテストしたい場合は、デベロッパーモードを利用すると良いかと思います。

デベロッパーモードを利用するには、「Overview」メニューを選択します。

Overview

あとは「Status」項目を「Development Mode」に変更すれば、設定が即座に反映されるデベロッパーモード(開発者モード)になります。

CloudFlareのステータスをデベロッパーモードに

デベロッパーモードになると、以下のようなインターフェースに変わります。

CloudFlareのデベロッパーモードを実行中

デベロッパーモードを中断するには「Disable」ボタンを押してください。

「Disable」ボタンを押さずに放置しておいても、3時間で元に戻る仕様になっています。

まとめ

こんな感じで、以下のような比較的簡単な作業でCDNによるサーバーの負荷軽減を実施できます。

  1. Cloudflareに登録
  2. Cloudflareにドメインの登録
  3. ネームサーバーの変更

時間にしたら、30分もかからないのではないかと思います。僕の場合は、何度か設定したことがあるのである程度慣れていて、時間に10分もかかっていないと思います。

こんな手軽に設定できるCDNサービスが無料で利用できるのはありがたすぎます。

僕のテキストメインのサイトでは、約50%の転送量負荷を軽減することができました。

Cloudflareによって約50%の転送量軽減ができた

写真メインのサイトなどでは、90%以上の転送量軽減もできています。

94%の転送量軽減

僕の使用しているサーバーはエックスサーバーなんですが、1日の転送量上限の目安は70GBでした。そして、これまでちょくちょく70GBを超えていました。

しかしCloudflareを使用するようになってからは、1日4GB程度となり、まだまだ余裕が出ました。

転送量が約94%も削減された

こんな感じで、Cloudflareはサーバー転送量の負荷軽減を行うには非常にすぐれたサービスだと思います。

あまり膨大な転送量を必要とするサイトでは利用できないようです。

サイト Cloudflare

あと、エックスサーバー を利用していたり、利用中のWordpressプラグインによっては、Cloudflareを導入することにより、管理画面にログインできなくなったりすることがあります。

それらの解決方法については、以下を参照してください。

Cloudflareを導入したらWordpressにログインできなくなった時などのトラブル解消方法
先日、当サイトの転送量が大幅に増えました。 転送量が増えたことにより、僕が利用しているエックスサーバーの転送量上限(1日70GB)を超えて...