どうも、笹塚神之介（@shin_sasasa）です。
ここではサイトの表示速度を向上させるCDNの中で唯一無料で使えるCloudflareの導入方法から設定方法について解説していきます。
また、Cloudflareを導入してしまうとipアドレスがCloudflareのipアドレスになってしまい、訪問した人のipアドレスではない為、Google AdSenseの広告などが訪問した人の関心のないものが表示される原因になっているようなので、そちらの対策も解説していきます。
この記事の内容
Cloudflareとは
CloudflareとはCDNと呼ばれるWebページを高速化できるサービスになります。Cloudflare以外は有料なので無料で利用することができるのがありがたいですよね。設定はとても簡単ですが、自身のサイトをSSLだと少しコツが必要になるのでご注意ください。
ですが、分かりやすく書いていくように頑張りますのでご安心ください。
導入する際のポイントはこちら
- 1アカウントで複数のサイト登録可能なので一度登録すれば複数のサイトで使えます
- ドメイン管理サイト（私の場合はお名前.com）でネームサーバーを変更が必要
- 自身のサイトがSSLサイトだとひと手間必要
Cloudflareの導入
それでは順番に説明していきます。
- ユーザーと自身のサイトを登録
- ネームサーバーを変更
- SSLサイトの設定を変える
ユーザー＆自身のサイトを登録
まずは、ホームページからユーザー登録をします。右上の「Sign up」からユーザー登録をしてください。
メールアドレスは後から変更できます。また、１アカウントで複数サイトを管理できますので、代表アドレスでいいと思います。
引き続き、サイトを登録します。もし、サブドメイン（sub.main.com）でサイトを運用している場合は、メインのドメイン（main.com）で登録することになると思います。
画面の指示どおりに進めていきます。
「Free Plan」を選びます。
Cloudflare側の設定が動き、ドメインが登録されたことを確認します。
ネームサーバーを変更する
引き続き、画面の指示に従って、現在使っているネームサーバーを、Cloudflareのものに変更します。画面に表示された新しいネームサーバーをコピーしておいてください。
「お名前.com」や「ムームードメイン」などのドメイン管理サイトで、ネームサーバーを変更します。以下は、お名前.comというドメイン管理サイトの画面になります。
以下のように、CloudFlareで指示されたネームサーバーに変更します。
ネームサーバーの変更がうまくいくと、以下のようにアクティブになります。
もし、G Suiteなどを利用しているなど、DNSに各種設定をしている場合は、併せてCloud Flareに移植してください。
SSLの設定を変える
もし、httpsから始まるSSLサイトを運営している場合は、もう少しだけ作業が必要です。以下のような画面が出て、ホームページが表示されない可能性があるからです。
上記のような画面が出てしまう場合は、以下のようにCryptoを選んでください。
そして、SSLの設定を「Full(Strict)」に変更します。
一旦、ネームサーバーを以前の状態に戻してください。そして、改めて「Full(Strict)」の設定をし、改めてCloudflareのネームサーバーに変更してみてください。何度か作業しているとSSLが正しく読み込まれてうまくいきます。
最後に、Whois情報を確認できるサイトで、ネームサーバーが切り替わっているか確認します。
これで、ひとまず導入は完了です。
Cloudflareの設定方法
導入が終わりましたら続いて設定方法を説明していきます。
主にして頂きたい事は以下の３点になります。
- ワードプレスでCloudflareプラグインのインストール
- Cloudflareサイト側のRocket Loaderの設定をONにする
- Cloudflareサイト側のPage Rulesを設定する
Cloudflareプラグインのインストール
CloudFlareを使っている場合、WordPressにはこのプラグインが必須です。このプラグインを入れないと、WordPressに通知されるIPアドレスにCloudFlareの物が使われてしまい、CloudFlareのIPアドレスがスパムとして認識されてしまう危険性があります。
プラグインのデフォルト設定は、WoedPressとCloudFlareを組み合わせて使う時に、なるべく問題が起きない様な、最低限の設定になっています。これを見直して、高速な設定にしていきます。
「Optimize Cloudflare for WordPress」のApplyを押します。
Rocket LoaderがONにする
Cloudflareサイトに入って頂いて「Speed」の項目を選択して頂きます。
最初の設定ではRocket LoaderがOffになっているので、ONにします。JavaScriptの読み込みが、劇的に改善されます。
この設定をした後、Google AdSenseの広告表示やGoogle アナリティクスの測定が取れなくなる可能性があるので
【data-cfasync=”false“】 のコードをGoogle関係の<script>のところを<script data-cfasync=”false“>に変更するようにしてください。
Page Rulesを設定する
これも同じくCloudflareサイトから「Page Rules」を選んで頂きます。
するとページのキャッシュをしないページをフリープランだと３つまで選択できるので
- サイトの管理ページ
- 記事のプレビューページ
- サイトのメインページ
の３種類を設定します。
設定が出来た画面がこちらです。
一つ目のサイト管理画面の設定は「*ドメイン名/*wp-admin/*」を入力して画像の設定項目を選んで保存してください。
２つ目のプレビュー画面の設定は「*ドメイン名/*&preview=true」を入力して画像の設定項目を選んで保存してください。
最後はサイトのメインページの設定で「*ドメイン名/*」を入力して画像の設定項目を選んで保存してください。
これで管理画面とプレビュー画面とサイトメインのキャッシュは保存されなくなりました。
キャッシュ削除方法
ページの削除方法とプラグインやテーマの削除方法で異なります。
ページのキャッシュ削除方法
ワードプレスのCloudflareプラグイン画面に移動して頂き、ページキャッシュの項目を選択して頂きます。
するとプルダウンメニューが開くので下の方を選びます。
少し見えにくいのですが、キャッシュを削除したいURLを２種類はります。
https版とhttp版の２種類です。この状態でしたの項目を選ぶとキャッシュが削除できます。
プラグインやテーマのキャッシュ削除方法
ページと同様にワードプレスのCloudflareプラグイン画面に移動して頂き、ページキャッシュの項目を選択して頂きます。
次は上の項目を選択します。
すると削除の確認ポップアップがでるので選択すればプラグインとテーマのキャッシュは削除されます。
以上で設定方法は完了です。
Google AdSense用のIPアドレス対策
少し長くなってしまいましたが、これが最後になります。
ですが、IPアドレス対策をしないとサイトに来た人はCloudflareを経由してサイトにアクセスするので、来た人のIPアドレスではなく、CloudflareのIPアドレスしかサイト側に届かなくなるので、来た人の関心のある広告が表示されなくなってしまいます。
興味のない広告なんて誰も押さないですよね。なので、当然ですが収益も半減な訳です。
Google AdSenseを導入している方は必須項目になりますので是非対策をしてください。対策といってもプラグインを導入して設定するだけなので非常に簡単です。
IP GEO BLOCK プラグインを導入
このIPアドレスが届かない原因としては、Cloudflareの「リバースプロキシ」という機能が原因だそうで、このIP GEO BLOCKプラグインで無効可できるようです。
それでは、そのプラグインをインストールしていきましょう。
WordPressプラグインURLはこちら
https://downloads.wordpress.org/plugin/ip-geo-block.3.0.17.zip
※最新バージョンだとバグがあるようなので、古いバージョンのURLになります。
プラグインの新規追加でダウンロードしたzipファイルを選択したらインストールできます。
※注意 このプラグインを最新バージョンはバグが発生しているので更新しないでください。
IP GEO BLOCKの基本的な設定
インストール後、必要な項目を設定していきます。変更箇所は一か所しかないので簡単です。
IPの追加抽出を設定する
番号1：IPアドレスを追加抽出する の項目に以下の文字を入力しましょう。
【HTTP_X_FORWARDED_FOR】←入力文字
この記述が訪問者IPを取得するための記述です。この設定ができれば訪問者のＩＰアドレスを取得してくれるようになります。
以上で設定は完了になります。あとは、爆速の速さを体感してください。
最後
お疲れさまでした。
これで、サイトは早くなるし、Google AdSenseは収益は下がらないしでいい事だらけですね。
時間はかかるとは思いますが、是非導入をお試しください。
またお勧めのプラグインをまとめているページは↓になるますのでご覧ください。
