無料メルマガ登録でツールプレゼント中!

【図解】[2020年版] CloudFlare を WordPress ブログに導入して表示速度上昇を狙ってみた

僕が運営している WordPress ブログの1つが、なぜか最近
表示速度が低下し始めている気がしたため、解決策として
Cloudflare を導入してみました。

表示速度の改善方法にも色々あると思いますが、とりあえず無料だし
やってみるかー という感じで導入しました。

その際の手順を図解入りで備忘録として残しておきます。

スポンサーリンク

Cloudflare と CDN について

Cloudflare はいわゆる CDN (Contents Delivery Network) と呼ばれるもので、
CDN の有名所としては AWS の Cloudfront がありますね。

AWS Cloudfront の場合、オリジンサーバーとしては S3 や EC2、
オンプレサーバーを指定できますが、個人で CDN を導入するのであれば、
Cloudflare が使いやすい
のではと思います。

CDNとは

通常、サイト閲覧者(ブラウザ)とサイト(WEBサーバー)とで
情報をやり取りすることで ブラウザ上で WEB サイトを表示することができます。

閲覧者がブラウザ上で閲覧したいサイトの URL をクリックすると、
ブラウザがそのサイト情報が保管されている WEB サーバに問い合わせを行い、
サイト情報を取得
します(下図)。

ブラウザとWEBサーバとのやり取り


Cloudflare は このサイト閲覧者とサーバーとの間に入り、
サーバーの情報を一部保存(キャッシュ)してくれます。

これにより、ブラウザとWEBサーバーとの情報のやり取りが少なくなり、
サイトの表示が素早くなるという理屈です。

Cloudflare のイメージ図



また、WEBサーバー本体への外部からのアクセスを減少させられるため、
DDoS攻撃などのセキュリティを脅かす存在から、サーバーを守ることにもつながります。



CDN についてのイメージがつかない場合は、AWS Cloudfront の記事ではありますが、
以下のページが図解入りで非常にわかりやすく解説されています。

AWS再入門ブログリレー Amazon CloudFront 編
⇒ 「CDN(Content Delivery Network) とは」

スポンサーリンク

導入の流れ

Cloudflare を導入する全体的な流れは以下です。

  • Cloudflare のアカウントを作成する
  • Cloudflare を使用したいサイト情報の登録
  • DNS 設定の変更
  • Cloudflare で詳細設定

DNS の設定変更などは、ブログやサイトを運営しているだけだと
あまり触れるところではないため、結構戸惑うかもしれません。

しかし、作業に慣れてきたら、全体としては10分程度で作業完了できるようになりますよ。

スポンサーリンク

導入手順詳細

各手順の詳細を図解入りで記載していきます。

Cloudflare のアカウントを作成する

まずは以下のリンクから、Cloudflare の新規アカウントを作成します。
Cloudflare

リンクを開くと以下のような画面になるので、”Sign Up” をクリック。

cloudflareのサインアップ画面



登録するEメールアドレスとパスワードを入力し、”Create Account” をクリック。
(パスワードは8文字以上の英数字と記号を含む必要があります)
Cloudflare_Eメールアドレスとパスワード入力画面


Cloudflare を使用したいサイト情報の登録

次に、Cloudflare の効果を得たいサイトのドメイン名を入力して
“Add site” をクリックします。(例 aaabbbccc.com など)
cloudflare_サイトドメイン入力画面



次のプラン選択画面ですが、企業活動ではなく個人利用するだけであれば、
無料のフリープランで良いと思います。
Cloudflare_料金プラン選択画面



ここまで設定すると、先ほど登録したサイトの DNS 情報を Cloudflare が取得し始めます。
(WEBサイトへのアクセスを代わりに Cloudflare が引き受けるための準備です)
Cloudflare_DNS情報取得中画面



DNS 情報の取得が完了すると、DNS レコードと呼ばれるものの一覧が表示されます。
ここの情報はざっくりとだけ確認し、「続行」をクリックします。

Cloudflare の DNS 情報取得完了画面



次の画面にて、Cloudflare 側のネームサーバーの情報が表示されますので、
その情報をメモしておきます(下図)。

Cloudflare_ネームサーバー情報画面


DNS 設定の変更

ここからは、ドメイン側の設定を変更していきます。
サイトのドメインをどちらのサービスで購入したかによって、
操作画面は異なります。

僕のサイトは ムームードメインでドメインを購入しておりましたので、
ムームードメインで DNS 設定を変更する例を記載していきます。
(やることは お名前.com などでも全く同じです。)

まず、ムームードメインへログインします。
ムームードメインログイン画面



ドメイン管理のメニューから、「ネームサーバ設定変更」を選択します。
ムームードメインのドメイン管理画面



ドメインの一覧が表示されたら、今回 Cloudflare を導入するドメインの、
「ネームサーバ設定変更」をクリックします。
ムームードメインのドメイン一覧画面



ドメインに設定しているネームサーバの情報が表示されます。
僕の場合、mixhost サーバのネームサーバーを使用しているため、下図のように設定されています。
ドメインの既存のネームサーバー設定



このネームサーバ設定を、先ほどメモした Cloudflare のネームサーバに書き換えて保存します。
ムームードメインのネームサーバを Cloudflare のものに変更する



ネームサーバの記載を変更したら、「ネームサーバ設定変更」ボタンをクリック。
ムームードメインのネームサーバ設定変更



以上で重要な Cloudflare の設定は完了しました。
次から、細かな設定をやっていきます。


Cloudflare で基本設定

ネームサーバの設定を終えて Cloudflare の画面に戻ると、
クイックスタートガイド と題した画面になります。

ここで設定した内容はのちほど変更することもできますので、
適当に設定していっても大丈夫です。

僕は以下のようにパパパッと設定してしまいました。
(ほぼデフォルトのままで設定しています)

cloudflare スタートアップガイド 1



cloudflare スタートアップガイド 2



cloudflare スタートアップガイド 3



cloudflare スタートアップガイド 4



cloudflare スタートアップガイド 5



cloudflare スタートアップガイド 6



下図のような画面が表示させれば、Cloudflare が正常に動作しています。
Cloudflare の機能正常性確認画面



最後に

Cloudflare 導入前後でサイト表示速度の比較を行ったわけではありませんが、
なんとなく早くなった気がします(笑)

サイト表示速度の上昇以外にも、セキュリティ面でのリスク低減にも
効果があるようなので、余裕がある方は Cloudflare 導入してみてはいかがでしょうか。



今回 Cloudflare を導入するにあたり、以下のサイトを参考にさせていただきました。
ありがとうございました。
(ページ名同じですが異なるサイトです)

WordPressにCloudflareを導入する方法
WordPressにCloudflareを導入する方法

僕は普段、あまり使用することはないのですが、
WordPress の cloudflare プラグインも用意されています。

これを使用することで、いちいち Cloudflare にログインせずとも
Cloudflare の一部の動作を変更することが可能になります。

こちらも、そのうち記事にしようと思います。

コメント