【趣旨】
既にWordPressで構築済みのWEBサイトに、CloudFlareを導入して高速化（ついでにSSL化）する方法を解説します。【CloudFlareの高速化の仕組み】
ざっくりですが、以下の仕組みによりWEBサイトの表示が高速化します。CloudFlare公式サイト：https://www.cloudflare.com/
- CloudFlareのCDN（高速に配信するために最適化されたネットワーク）に既存コンテンツをキャッシュさせる。
- 当該ドメインのネームサーバー情報を変更し、上記CDNを参照させるようにする
これにより、いままでhttp://aaa.com/などとブラウザのアドレスに入力されると、ブラウザはDNS（ドメインと実際のサーバーの場所をひもづける賢い仕組み）に問い合わせて、既存サーバーにデータを取りに行っていましたが、CloudFlare導入後は、CloudFlareの高速で最適化されたCDNを見に行くようになり、表示が高速化されます。
【今回の前提環境】
以下の環境にCloudFlareを導入するものとします。・サーバー：エックスサーバー（X10プラン）
・CMS:WordPressで構築済み
・CloudFlare Pro版を購入
【既存サイト導入に対する問題点】
問題点１
無料版の場合、SSL証明書発行にきっちり２４時間かかる。=>Pro版を購入※すれば即時発行されます。今回は既にリリース済みサイトということもあり、Pro版を購入するものとします。
※1サイト目は$20、2サイト目以降は、プラス$5
問題点２
ネームサーバーの浸透時間（ユーザーそれぞれの環境により異なる）=>どう問題か。以下に記載します。
・ドメインのネームサーバーをCloudFlareのものに書き換える必要があるため、各ユーザーの環境次第で浸透時間に差がでます。
・浸透早いユーザー（以下、早ユーザー）：CloudFlareのCDNにキャッシュされたコンテンツを見に行きます。
・浸透遅いユーザー（以下、遅ユーザー）：エックスサーバーのコンテンツを見に行きます。
・WordPressの設定（<?php bloginfo('url'); ?>等の元になる変数）を、「http」のままか「https」に変更する必要がありますが、それぞれ以下の問題が生じます。
「http」のままの場合
・早ユーザー：当該ドメインで、CloudFlareのCDNを見に行きます。
CloudFlareのCDNではSSLを有効化しているので、httpsでCloudFlareのCDNを見ようとしますが、キャッシュされている内容は、CSS等のリンクがhttp となっているものなので表示がくずれます。
・遅ユーザー：当該ドメインで、エックスサーバーを見に行きます。
特に問題なく参照可能。
（つまり、早ユーザー:表示くずれ, 遅ユーザー:OK）
「https」に変更した場合
・早ユーザー：当該ドメインで、CloudFlareのCDNを見に行きます。
https でCloudFlareのCDN を見ようとし、キャッシュされている内容は CSS等のリンクがhttps となっているので問題なく表示されます。
・遅ユーザー：当該ドメインで、エックスサーバーを見に行きます。
変数が https になっているので、エラー画面（この接続ではプライバシーが保護されません）が表示されます。
（つまり、早ユーザー:OK, 遅ユーザー:エラー）
対策（今のところ）
・CSS等のリンクは <link href="/wp-content/themes/my-theme/css/xxx.css">, <script src="/wp-content/themes/my-theme/js/xxx.js"></script>みたいにドキュメントルートからの絶対パスをハードライティングしてしまいます。（<?php bloginfo('url'); ?>等は使わない）
・グローバルナビ等のリンクも<a href="/about/">About</a> みたいにドキュメントルートからの絶対パスをハードライティングしてしまいます。（<?php bloginfo('url'); ?>等は使わない）
・CSSやJSで、外部リソースを読み込む必要あるときは、<link href="//fonts.googleapis.com/css?family=...>, <script src="//maps.google.com/maps..."></script>
みたいにプロトコルを省いて呼び出します。
（ここまでは事前にやっておき、表示に問題がないことと、Chromeデベロッパーツール等でエラーが表示されていないことを確認しておきます。）
・上記実施しても、プラグインの読み込みなど、WordPressが動的にソースを生成する部分は、WordPressの変数を参照するので http か https にしておく必要があります。
=> 既にネームサーバーも書き換えていることですし、浸透が早いことを正義として、早ユーザーに最適化します。ですので、しばらく待って（数時間）エイヤで https に変えてしまいます！（結局最後はエイヤ！か～い。汗;）
※なお、CloudFlareの無料版を導入する場合は、どのみちSSL証明書の発行にきっちり２４時間かかりますので、以下の導入フローを悠々と最後まで進め、一晩寝て起きて、２４時間後にhttpsで表示されるか確認すればよいのである意味気が楽です。ただし設定完了後からhttpsで表示されるまでの間はブラウザーはエラー画面（この接続ではプライバシーが保護されません）が継続されます。（工事中です画面を表示しようにも、すでにネームサーバーを切り替えているのでエックスサーバーのコンテンツを表示することもできません。）（<=この辺要確認。どなたか情報をお持ちでしたら教えてください。）
【導入フロー】
上記前提での導入フローを以下に記載します。事前準備
・[必要に応じ]http通信を減らすために、Gruntなどを用いて複数のCSS(JS)を一つのCSS（JS)にまとめていた場合はほどきます。SPDYでは平行読み込み数が実質無制限なので、大きい１ファイルを読み込むよりも、小さい複数ファイルをぐわっと並行に読み込む方が高速化されます。・[ブラウザー]Beforeの速度チェックを行い、スクリーンショットをとっておきます。（後でどれだけ早くなったか確認するため。また改善項目も提示されますので、Beforeでの情報を取得しておきます。）
http://gtmetrix.com/
https://developers.google.com/speed/pagespeed/insights/
（シークレットブラウザーでキャッシュクリア後に実施）
実施
・[DB]phpMyAdminに予めログインしておきます。（理由：WordPressのサイトURLとWordPress URLはMySQLのwp_optionsのsiteurlとhomeから変更可能。WordPressの設定変更後に管理画面にログインできなくなってしまったら、DBを直接修正して最悪管理画面にはログインできるようにできます。）・[エックスサーバー]Basic認証かけてる場合は解除します。
・[CloudFlare]アカウント作成して[Add website]
https://www.cloudflare.com/my-websites
・[CloudFlare]のウィザードに従い手順を進めます。
・[ドメイン管理しているサーバー]（ムームードメインやお名前.comなど）
ネームサーバーの情報をCloudFlareに提示されたものに変更します。
ns1.xserver.jp => xxx.ns.cloudflare.com
ns2.xserver.jp => xxx.ns.cloudflare.com
ns3.xserver.jp => Delete this name server
ns4.xserver.jp => Delete this name server
ns5.xserver.jp => Delete this name server
・[CloudFlare]設定を見直します。（以下、変えたところ）
Advanced security (Web Application Firewall) => ON
Polish: image optimization => Basic + JPEG
・[エックスサーバー]WP管理画面へのアクセスが海外からとなるため、エックスサーバーの管理画面への海外からのアクセス制限を解除します！
（・.htaccessのsslリダイレクトはCloudFlare側で実施するので設定不要）
・[WordPress]プラグイン ”CloudFlare Flexible SSL” を入れて有効化（これを入れないとリダイレクトループが発生してしまいます。）
（参考：https://www.rougebleu.net/cloudflare-flexible-ssl/
,http://www.svaha.jp/toki/2014/10/14/wordpress%E3%81%A7cloudflare-flexible-ssl%EF%BC%88%E7%84%A1%E6%96%99ssl%EF%BC%89%E3%82%92%E5%B0%8E%E5%85%A5/）
・[ブラウザー] nslookup/dig で変更したネームサーバーが浸透したか確認
http://www.cman.jp/network/support/nslookup.html（こっちで浸透してても、自分のネットワークで浸透してるとは限らず）
・ターミナルで $ traceroute aaa.com を定期的にチェックします。
（winの場合コマンドプロンプトで > tracert aaa.com）
・[WordPress]プラグイン W3 Total Cache 入れて、CloudFlare を有効化します。（キャッシュの設定競合を避ける）
（参考：http://bazubu.com/cloudflare-23857.html）
・・・ここで待つ・・・
・デザリングに切り替えたりして、異なるネットワークで確認します！
（確認内容：https://aaa.com でサイト表示されたか）
（もし異なるネットワークで確認できたら作業をすべてそちらに移行し、以下作業を続ける）
・[CloudFlare]CloudFlareのpage ruleで「*aaa.com*」を always ssl on にします。
（浸透していない人は、httpでエックスサーバーを見に行き、浸透した人は、上記設定で以降、httpsになる）
（作業PCのtracerouteで浸透したら）
・[WordPress]管理画面の一般設定からサイトアドレス（下）をhttpsに変更して更新します。（bloginfo('url')等がhttp => httpsになる）（問題なくhttps見れたら）
・[WordPress]サイトを確認して問題なければWordPressアドレス（上）もhttpsに修正して更新します。（※注意 WordPressアドレスも同時に修正してしまうと、もし設定に不具合があった場合管理画面にアクセスできなくなってしまいます。）
（参考：https://www.icontrolwp.com/2014/10/enabling-cloudflares-universal-flexible-ssl-wordpress-without-infinite-redirect-loops/）
（css等のパスがhttpのままで表示くずれしていたら）
・必要に応じ=>（・[WordPress]「wordpressのサイトをまるごとSSL化する」（以下url）を実行する（プラグイン：WordPress HTTPS）https://blog.euonymus.info/tag/universal-ssl/）
こんな方法もある=>（・https://www.softel.co.jp/blogs/tech/archives/2017）
（ひと通り設定後）
・[Google Analytics]google analytics（タグマネージャのコンバージョンURL等、ウェブマスターツールの設定等）見直します。・[ブラウザー]エラー出てないか（Mixed Contentのワーニング？出てないか）全ページチェックします。
・<?php bloginfo('template_url') ?>等がhttpのままで、Mixed Contentになってしまう場合は、[WP]のパーマリンク設定の空更新、[CF]の全キャッシュクリア、を試してみます！！！
・.htaccess見直し（変なリダイレクトの設定等ないか）
・[ブラウザー]Afterの速度チェックを行い、スクリーンショットをとっておきます。
http://gtmetrix.com/
https://developers.google.com/speed/pagespeed/insights/
（シークレットブラウザーでキャッシュクリア後に実施）
【結果】
あるサイトの結果ですが以下のとおり、ページ表示速度が、6.72秒から、2.88秒に短縮されました。Total page sizeもずいぶんと縮小（圧縮）されていますね。（CloudFlare導入前）
（CloudFlare導入後）
【運用】
・img,css,js等の静的ファイルをいじったときは [CloudFlare] Cache Purge > Purge single file でキャッシュをクリアします。（これやらないといつもの要領でCSS等を修正しても一向に表示に反映されませんのでご注意！）・ある程度まとまった規模の修正で、いちいち上記するのが面倒なときは、[CloudFlare] Development Mode を ON（=>CloudFlareのCDNをトンネルし、エックスサーバーを見に行きます）（3時間で自動でOFFに戻る）
（重要）改修OK後、結果を反映させるため、上記キャッシュクリア（シングル or 全体）する。
以上です。
わかりにくい記述になってしまい申し訳ないです。
今後もっと理解度が高まったらリライトしたいと思います。
コメント
コメントを投稿