WordPressにCloudflareを導入する方法

WordPressにCloudflareを導入する方法

Photo Ben Rosett via Unsplash

運営しているWordPressサイトのアクセス数が増えてきたのでCloudflareを導入しました。

Cloudflareはここ数年で大幅にアップデートされたようで、数年前に比べて機能、安定性ともに大きく改善していました。

今回Cloudflareを導入したサイトを運営していたレンタルサーバーはエックスサーバーです。ドメインはムームードメインで管理していました。

他のレンタルサーバー、ドメイン管理サービスでも基本的には同じ手順で導入できると思います。

関連記事

Cloudflare導入の効果、転送量が半分以下に改善したよ。
Cloudflare導入の効果、転送量が半分以下に改善したよ。
スポンサーリンク

Cloudflareを導入した理由

今回Cloudflareを導入したサイトはエックスサーバーの「X10プラン」で運用していました。

サイトのアクセス数が増えて、転送量がプランの上限の70GBに近づいたため、転送量軽減を目的に導入しました。

Cloudflareを導入すると、エックスサーバー上のデータの一部がCloudflareのサーバーにキャッシュされます。ユーザーがサイトを見るとき、サイトのデータの一部がCloudflareのキャッシュサーバーから提供されるため、エックスサーバーの転送量を大きく抑えることができるのです。導入後の効果は「Cloudflare導入の効果、転送量が半分以下に改善したよ。」に書きました。

さらに、Cloudflareは無料でも十分な機能を利用することができます。今回利用したのも無料プランです。

以前はSSLに対応していたのは有料プランのみでしたが、今は無料プランでもSSLを導入したhttpsのURLを問題なく運用することができます。

エックスサーバーの各プランの転送量の目安

エックスサーバーにおける各プランの1日あたりの転送量の目安です。

X10 X20 X30
70GB/1日 80GB/1日 90GB/1日

それぞれの転送量で対応可能なPV数は、画像が多いかどうか、サーバーのキャッシュを適切に設定しているかどうか、などにより大きく変わります。私が運営しているサイトでは70GB/1日なら画像が少なめのサイトで10万PV/1日、画像が多めのサイトで1万PV/1日程度になると思います。

どちらのサイトもWordPress高速化のための基本的な設定を行っています。

WordPressを高速化するための.htaccess設定のベストプラクティス
WordPressを高速化するための.htaccess設定のベストプラクティス
誰でもできるWordPressを高速化する7つの方法
誰でもできるWordPressを高速化する7つの方法

エックスサーバーで転送量を調べる方法

エックスサーバーでサーバーの転送量を調べるには、エックスサーバーの管理画面(サーバーパネル)の「アクセス解析」からアクセス解析を追加することで、閲覧できるようになります。

エックスサーバーで転送量を調べる方法

はじめてアクセス解析を有効にした場合、最初の解析データが見られるようになるには少し時間がかかります。

日別の転送量を見ることができます。

エックスサーバーのアクセス解析

Cloudflareを導入する方法

Cloudflareにユーザー登録する

Cloudflareにアクセスして、「Sign Up」に進みます。

Cloudflareにユーザー登録する

メールアドレスとパスワードを入力してユーザー登録をします。

ユーザー登録

Cloudflareの初期設定をする

ユーザー登録が完了したら初期設定をします。

サイトのドメイン名を入力して、「Scan DNS Records」ボタンを押します。

ドメイン名なので、このサイトなら「webtoolnavi.com」の部分です。

ドメイン名を登録

DNSレコードのスキャンに1分程度時間がかかります。

スキャンが完了したら「Continue」ボタンを押します。

DNSレコードのスキャン

DNSレコードの一覧が表示されます。必要に応じてDNSレコードの設定を追加、変更できますが、特別な設定を行っていなければそのままで問題ないかと思います。「Continue」ボタンで先に進みます。

DNSレコードの一覧

Cloudflareのプランが表示されるので、「Free Website」(無料プラン)を選択します。プランを選択したら「Continue」ボタンで先に進みます。

Cloudflareのプラン選択

現在のネームサーバーとCloudflare導入後のネームサーバーが表示されます。「Continue」で先に進みます。

Cloudlareのネームサーバー一覧

以上でCloudflare側の初期設定は完了です。最後に表示されたネームサーバーの情報(下の図の赤枠部分)は後で使うのでメモしておきます。

ネームサーバー

ドメインのネームサーバーを変更する

Cloudflareの初期設定が完了したら、次は、ドメインの管理サービスにアクセスして、ドメインのネームサーバー情報を変更します。

今回Cloudflareを導入したサイトのドメインはムームードメインで管理していました。他のドメイン管理サービスでも基本的な手順は同じです。

ムームードメインの管理画面にアクセスし、「ドメイン管理」 > 「ネームサーバ設定変更」に進み、対象のドメインの「ネームサーバ設定変更」ボタンをクリックします。

ネームサーバー設定変更

「GMOペパボ以外 のネームサーバを使用する」を選択し、ネームサーバーの設定をCloudflareの管理画面に表示されるネームサーバー情報(先ほどメモしたもの)に変更します。最後に「ネームサーバ設定変更」ボタンを押します。

Cloudflareのネームサーバー設定変更

以上でネームサーバー情報の変更は完了です。

Cloudflareの管理画面で最終確認

Cloudflareの管理画面にアクセスして、「Recheck Nameservers」ボタンを押します。

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

※ネームサーバー変更から時間が経っていないとチェックに失敗することがあります。「Recheck Nameservers」のチェックは1時間に1回のみ可能です。手動で確認しなくても、しばらく放置しておくと自動で完了しています。

設定がうまくいっていればドメイン名の背景が緑色になり、「Status: Active」と表示されます。

Cloudflareの設定完了

以上でCloudflareの導入は完了です。

Cloudflareのキャッシュをクリアして更新をすぐに反映する

Cloudflareを導入すると、CSSやJSなどはCloudflareにキャッシュされたデータが表示されます。そのため、CSSやJSを変更しても、反映されるまでに時間がかかります。

サイトのデザインを調整したときなど、CSSやJSをすぐに反映させたい場合は、Cloudflareのキャッシュをクリアします。

Cloudflareの管理画面にアクセスし、「Caching」のメニューにあるから「Purge Everything」を選択します。

Purge Everything

確認ダイアログが表示されるので「Purge Everything」のボタンを押します。

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

Cloudflareのキャッシュ機能を無効にしてサイトの更新をすぐに反映する

サイトのデザイン変更作業をする際など、サイトの更新をすぐに反映させたいときがあると思います。

そんなときは、「Development Mode」を利用することで、サイトの更新をリアルタイムに確認できるようになります。

Cloudflareの管理画面にアクセスし、「Development Mode」を選択するだけです。

Development Mode

「Development Mode」は「Disable」ボタンで終了することができます。「Disable」ボタンを押さなくても、3時間経てば自動的に終了します。

Development Modeの終了

WordPressプラグイン「Cloudflare」について

CloudflareはWordPress専用プラグインの「Cloudflare」を用意しています。

このプラグインをインストールすると、WordPressの管理画面上でCloudflareの各種設定ができるようになります。

ただ、基本的にはCloudflareの管理画面上でできることと同じことができるようになるだけなので、あえてインストールする必要性は低いと思います。

Cloudflareのキャッシュのクリアや、「Development Mode」を頻繁に使用し、いちいちCloudflareの管理画面にログインするのが面倒、という場合には利用してもいいと思います。

Cloudflareで@を含む文字列が[email protected]と表示された時の対処方法

Cloudflareはメールアドレスを保護するために「@」を含む文字列を「[email protected]」と表示する機能がついています。この機能をoffにして、「@」を含む文字列をそのまま表示するようにします。

Cloudflareで@を含む文字列が[email protected]と表示される時の対処方法
Cloudflareで@を含む文字列が[email protected]と表示される時の対処方法

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選
スポンサーリンク

関連記事 & スポンサーリンク

コメント

  • Posted on
  • Updated on
  • Views 310