ご冗談でしょう、チャッキーさん

チャッキーさんの旅と読書とWordPress学び備忘録

CDNを流行りのPhotonから逆にCloudFlareに変更してみた

約 11 分

これまで僕はキャッシュをJetPackに付属している「Photon」に頼っていました。

しかし、最近フォトンの調子が悪く画像が表示されない事が何度かあったので、「少し前に流行ってたCloudFlareにしたらどうなるんだろう?」と実験してみました。

結果から言うと、写真が表示されないと言うトラブルは解消されました。そして、スピードはPhotonの時にきちんと計測していなかったので僕の体感にはなりますが、CloudFlareを使用した方が圧倒的に早かったです。

なんとGtmetrixでAAを獲得!!

ただし、現在多くの方がCloudFlareを捨て、Photonに移行してしまったのにも理由があります。そこら辺を踏まえたうえで今回はCloud Flare の導入方法を記述したいと思います。

そもそもCDNって何?

2017年にそんな疑問をお持ちの人は少ないかもしれませんが、一応超簡単に記述しておきます。

CDNとはContent Delivery Networkの略で、ユーザーに最も近いキャッシュサーバーから画像や動画などを配信する仕組みです。

分かりやすく言うと、レストランで注文した時に、あらかじめ下準備をしている店のようなものです。

全部イチからレストラン(サーバー)でやるのではなくて、画像やCSSなどの下準備をしてくれるのが(CDN)みたいなイメージ。だからCDNを使うと表示速度が早くなるんです。

でも、下準備してたら鮮度が少し落ちますよね?と疑問を持たれた方、大正解です。サイトで言うと画質がほんの少し落ちます。だから、すげぇキレイに画像を表示させたかったらCDNはつかうべきじゃありません。

ちなみに、現在のCDNの本流は3つあります。

  • AMZON Cloud Front
  • Cloud Flare
  • JetPack Photon

AmazonのCloudFrontは結構なお金が掛かります。 詳しい料金はコチラ!今回はAmazonを選択肢から省いてPhotonとCloudFlare2つに絞ってお伝えします。

どっちが良いの?Cloud Flare OR Jetpack Photon

結論から言います。

速さを取るか安定を取るかで答えは変わってきます。早いのはCloudFlare、安定しているのはPhotonです。

そもそも大前提としてWordPress使用者からみて、Cloud Flareは外部サービスになります。それに対しPhotonはWordPressを運営するWordPress社が公式リリースしているJetPackというプラグインに内包されている機能の1つです。

そのためか・・・クラウドフレアをネットで調べてみると、「不具合でよく落ちる」との記事をチラホラ見かけます。公式のサービスだとちょっと問題ですよね。

CloudFlareが落ちるということは・・・DNSをCloudFlareにしているサイトも同時に落ちてしまうって事です。ガーン!!!(T_T)

落ちている間、訪問者には503が表示されてしまいます。まぁ無料でサービスを遣わしてもらってるんだからしょうがないですけど。以上の事を踏まえて、もう少し深くメリット・デメリットをみていきましょう。

CloudFlareとPhotonのメリット・デメリット

Photon

  • WP公式プラグイン
  • 公式だから管理画面から制御可能
  • DNSは関係ない
  • wordpress.comが落ちても問題なし
  • とにかく安定してますよ!

CloudFlare

  • WPの外部サービス
  • ドメインのDNSをCloudFlareに設定しないと使えない
  • CloudFlareが落ちたら運営サイトも落ちるよ。
  • 不安定だけど早いよ!

ということで、見てもらえれば一目瞭然だと思いますが、堅実に今よりスピードアップしたいならPhoton。たまに落ちるくらいなら構わないとにかくスピード重視の人はCloud Flare。となるわけです。

ちなみに、CloudFlareが落ちるって言っても数分ぐらいです。だから、アクセスが山のようになければ、ぶっちゃけどっちでも良いってのが本音です。

僕はとりあえずどんな感じなのか使ってみたいなぁと思ってCloudFlareを導入してみました。記事を書いている時点ではCloudFlareを利用していますが、もしかしたら数日後にはPhotoに戻してるかもです。

あくまでメリット・デメリットを考えて自分のサイト運営に適した選択をしてください。

Cloud Flareの導入方法

アカウント作成

まずは、Cloud Flareの公式ホームページに移動してアカウントを作成します。

TOPページに移動したら、右上にある「サインアップ」をクリックします。

 

↓ ↓のページに切り替わります。

メアドとパスワードを入力し、プライバシポリシー同意にチェックを入れたらアカウント作成ボタンをクリックします。

↓ ↓ 画面に移動します。

ここでは、自分のサイトのURLを入力します。入力できたら、緑色の「Scan DNS Records」をクリックします。

「https://@@@@@@@.com」最後にいつのクセで「/」を入力しないでください。エラーになってしまいます。

注意

↑ ↑「そんなバカいるのか?」と思われるかも知れませんが、僕がそうでした。特にChromeからコピペする際は自然とおしりにスラッシュがはいるので気を付けてください。

緑色の「Scan DNS Records」をクリックしたら↓↓の画面になります。

ここでは勝手にDNSを調べてくれます。下にある水色のバーが右いっぱいまでいけば「Continue」ボタンがクリック出来るようになります。その間CloudFlareがいかに良いサービスかという洗脳動画が流れます。

またページが切り替わります。↓ ↓ ↓

とくにコチラは自分のDNS解析が終わった確認なので「Continue」をクリックして次に進みます。↓ ↓ ↓

最初に有料のプランが選択されています。無料プランで十分なので僕はフリーを選択して下の「Continue」をクリックしました。

続いて「DNSの変更をして下さい」という画面があらわれます。↓ ↓

この画面が表示されたら、サイトのDNSを変更しましょう。僕のサイトはXサーバーで運営しているのでエックスサーバーを例に紹介します。

DNSの変更設定(エックスサーバー)

まずInfoパネルにログイン後、下の方にあるドメインパネルをクリック。

 

ネームサーバーの変更をクリックして、各ネームサーバーに先程表示されたサーバーアドレスをコピペしていきます。DNSの変更は以上になります。

cloudflare設定

DNSの変更設定(さくらサーバー)

さくらサーバーでも変更しましたが難なく出来ました。

まず、さくらサーバーにログインします。「契約者情報」をクリックし下の「契約ドメインの確認」をしましょう。

つづいて、「ドメインメニュー」を選択、変更したいドメインの「Whois情報」をクリック、最後に「ネームサーバーの変更」で先程CloudFlareで表示されたDNSに変更すればOKです。

※写真をクリックで拡大表示出来ます。

この他でドメインを取得された方でDNSの変更が分からない人は、Googleで「@@サーバー DNS変更」と入力すれば出てきます。それを見ながら変更してください。

とりあえず、DNSの変更が終わったら、先程のCloudFlareの画面に戻って「Continue」をクリックします。

 

次にこのような画面に移動します。↓ ↓ ↓

ココで「Recheck Nameservers」というボタンをクリックして下さい。うまくいっていれば下の方に緑のバーでサクセスと表示されます。CloudFlareの設定は以上になります。

ココからWordPressの設定になります。もう少しなのでがんばってください。

WordPressの設定

国外IPアドレスの設定を変更

よくあるミスなのですが、このままWordPressの設定しようとしたら、↓ ↓このような画面が表示されることがあります。

これは、セキュリティー強化のため海外のIPアドレスからのアクセスを初期設定で拒否にしているために起こります。CloudFlare自体が海外のDNSなのでこれを解除しないと表示されません。

通常通り操作出来ている方は次の章まで飛ばして頂いて構いません。

エックスサーバーであれば、サーバーパネルにログインして下の方にある「WordPressのセキュリティ設定」をクリックして下さい。

続いて、ダッシュボードアクセス制限をオフにします。↓ ↓ ↓

これで、WordPressに通常通りアクセス出来るようになったはずです。

W3 Total Cache の設定

ココから先は「W3 Total Cache」がインストールされていることを前提に進めさせていただきます。そのため、まだインストールしていない方はコチラを見てインストールした後に読み進めて下さい。

まずWPのダッシュボードメニューからPerfomance⇒Extensionsをクリックします。

↓ ↓ のようなページに移動しますので、Cloud Flareの「有効化」をクリックしてくだい。

 

有効化が終わると「設定」という文字が出てきますのでクリックします。

 

先程作ったアカウントをコチラで設定するようになります。「Authorize」を選択します。

 

すると、メアドとAPIキーを入力して下さいという画面になります。メールアドレスは先程Cloud Flareのアカウントを作成する際に使ったものです。

APIキーは分からないのでCloudFlareのページで確認しましょう。

APIキーの確認方法は、先程のCloudFlareの画面がそのまま開いていたら、下にある「Get Your API key」をクリックしてください。先程の画面を閉じてしまった方は公式ページにログインすれば同じページに移動します。↓ ↓ ↓

 

次の画面で青色の「View API Key」というボタンがあるのでコチラをクリック!

 

すると、自分のAPIキーがポップアップ表示されますので、コチラをコピーして下さい。

 

WPの設定画面に戻って、先程のAPIキーをペーストして、NEXTボタンをクリックします。

 

すると、どのアカウントを設定しますか?という形でURLが表示されますので使用したいURLの右にあるチェックボタンをONにしてNEXTボタンを押します。

 

これで最後です。画面が切り替わりZONEという所に設定したいURLが反映されていたらOKです。最後に、必ず「SAVE ALL SETTING」をクリックして下さい。

 

お疲れ様でした。CloudFlareの設定は以上になります。

まとめ

最初の方に記述していますが、クラウドフレアは高速表示することが出来るので、これまで沢山の人達が導入してきました。しかしアクセス数の多いサイトでは、一瞬のサーバーダウンがお金に直結します。

僕の場合はアクセスが少ないので困ることはありませんが、大規模サイトを運営されている方はメリット・デメリットを理解した上での使用をお願いします。

チャッキー
本日も最後までお付き合い頂きましてありがとうございました

ブログランキングに参加してます。

にほんブログ村 ブログブログへ

クリックすると現在の順位が表示されます。

About The Author

チャッキーさん
ご訪問ありがとうございます。管理人のチャッキーと申します。
日本語を学ぶ為にブログを始めました。内容は主に旅と読書とWordPressという全く自分の知らない世界についてです。現在、南米をぷらぷら散歩中。時々、出稼ぎのため広島県にいます。

Leave A Reply

*

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

オススメ記事