CDNを利用して大量のアクセスをさばく

本ページは広告が含まれています。気になる広告をクリック頂けますと、サーバ運営費になります(^^

無料で利用できるCDN cloudflareを利用しようかと思ったのですが、設定を進めていくと業務利用しているすべてのドメインを預けなければならないという事が分かり二の足を踏みました。

で、Jetpackを利用したPhotonを利用する事も考えたのですが、Photonは、一度キャッシュされた画像は削除できないとの事。業務利用を考えるとそれもちょっと困ります。公開前提の写真のみならですが、特にパスワード保護などが考えられているサイトだと、ちょっと怖いです。

そこで、候補として考えたのはさくらのCDNサービスです。500GiBまでは無料で使えるのでまずはお試しとして利用するのもいいし、キャッシュを削除するタイミングも自分で決められるし。お金を払うサービスなのでダウンタイムとかないと思うしで、やっぱり業務利用しようと思ったらこういう事考えないとですよね。

さくらのCDN利用方法

作業前に Aレコード、CNAMEのTTLを300秒程度にしておく

これやっておかないとなかなか反映されなくて、ちょっとイライラします。キャッシュは有効になっているのに、なかなかHITせずMISSばかりといった状況に。変更掛けて安定したらまた元のTTLに戻すといいです。

/etc/bind/のコンフィグファイル変更

cdn 300 IN A     17.7.17.51

設定の確認確認

nslookup

set debug
cdn.hanako.or.jp

TTLが300と表示されたらOK

さくらのクラウドでの設定

ウエブアクセラレータ画面にて

サイト新規追加

サブドメイン

サイト名

オリジンサーバ

の設定を行う。

CNAME先が表示されるのでメモする（こんなやつ）

4sa74rhadi.user.webaccel.jp.

apache .htaccessの設定 Filesからを追記する

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

<Files ~ ".(gif|jpg|jpeg|png|ico|css|js)$">
        Header set Cache-Control "s-maxage=86400, public"
</Files>
# END WordPress

今回は、cssとjsファイルもキャッシュされるように書いてみた

CNAMEを登録

今まで利用していたAレコードをコメントアウトし、代わりにCNAMEのFQDNを登録する

;cdn IN A 157.7.123.44

cdn IN CNAME 4sa74rhadi.user.webaccel.jp.

さくらのウェブアクセラレータ画面から

登録したサイトの設定を　有効にする

Google ChromeでX-Cacheの中身を確認する

F12キーを押してデベロッパーツールを起動

Networkタブをクリック

表示されたイメージを確認

X-Cacheの中身を見る

HITとなっていればキャッシュサーバから取得

webサイト点数比較

PageSpeed Insights

Googleサービスを利用して、ページの読み込み速度がどのように変化したか確認します。

さくらのクラウド設定前

さくらのクラウド設定後

pingdom Website Speed Test

さくらのクラウド設定前

さくらのクラウド設定後

GTmetrix

さくらのクラウド設定前

さくらのクラウド設定後

さくらのクラウド設定後、なんとページ速度は遅くなっている事が分かりました。ページ速度は速くなるものだと思っていたのでちょっと残念です。ま、負荷分散が目的なのでこれでいいのか、、、。

Wp Fastests Cacheの利用方法

WPでのHTML整形は、サーバーに負担をかけます。WPのデータは、DBに格納されておりホームページにアクセスされたらPHPでそのDBの中からデータを取り出し、テンプレートに当てはめてHTML,CSS,JSを整形してホームページを表示します。大量のアクセスがあると、サーバに負担をかけます。この成形されたデータをキャッシュして、ユーザにはそのキャッシュデータを表示するという方法です。

さらに、Wp Fastets Cacheプラグインを入れて調整

今回のサイトは、多くの方に投稿をお願いしてあり、その投稿を短時間でみんなに見てもらうという企画のために構築しています。このため、あまりサーバに負荷がかかるのもよろしくない状況です。これを回避しつつパフォーマンスは上げたいという事になります。このためWp Fastets CacheのPreload機能など、サーバに負荷をかけそうなものは外してあります。

設定はこんな感じにしました。極力サーバに負荷をかけない事を目的とした設定です。

ホームページの表示速度は改善しました。それぞれちょっとずつ点数が上がっています。これで良しかな。

WPCを入れた副作用

WPCを導入後、見出しメーカーで作成した見出しが反映されなくなってしまいました。

WordPressテーマの編集

外観⇒テーマの編集行間が狭い body, input, textarea { color: #777; font: 15px メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Got

見出しメーカーで作成したCSSをそのテーマの編集で反映させていただのですが、どうもCSSファイルが正常に吐き出されなくなってしまったようです。WP Fastest Cacheのキャッシュを有効にするのチェックを外すと、見出しが反映されるようになりました。

結局のところ、

CSS ファイルを圧縮する

CSS ファイルを結合してHTTPリクエスト数を減らす

のチェックを外したところ、見出しが反映されるようになりました。WordPress でCSSを編集してそれがうまく反映されなかったら、キャッシュ系のプラグインを疑うといいです。このチェックを外して保存したところ、パソコンのChrome,EdgeおよびスマホのChromeでもうまく見出しが表示されるようになりました。

ブラウザのスーパーリロード

上記を試す際にブラウザにキャッシュが残っていると、WP側をいじってもうまく反映されない事があります。基本的にどのブラウザでもF5キーを押すと、リロードされます。ただ、キャッシュが削除されない事があるので、

Chromeなら

設定　⇒　その他のツール　⇒　閲覧履歴の消去

から、キャッシュを削除するといいです。

また、Shift + F5キーを押すとスーパーリロードとなり、キャッシュを無視してデータを読み込んでくれます。

管理者画面はキャッシュを利用したくない

管理者でログイン後、各ページを表示させると、ブラウザ上部にWPのメニューが表示されますが、WPCを有効後これが表示できなくなってしまいました。これもキャッシュと関係があるようです。

ログインユーザーに対してキャッシュを表示しない

これにチェックを入れたところ、管理者ユーザでログインしたらちゃんとブラウザ上部にメニューが表示できるようになりました。

負荷テストについて

jMeterでテスト

大量に集中アクセスを受けた場合の想定をjMeterでテストしてみました。

httpリクエストにてトップページへアクセス

httpリクエストにて投稿にアクセス

スレッド数100

Ramp-Up期間 10秒

無限ループ

です。100人の人が10秒間にトップページと投稿を見る2PV発生する設定です。これを無限に繰り返します。以前CDN設定前は1分15秒で503エラーが発生しました。CDN設定をしたら3分30秒で503エラーが発生でした。今回は、Wp Fastets Cacheを設定後10分間回してみましたがエラーなしです。

ちょっとうれしいですね。さくらのウェブアクセラレータの機能を見ても10分間ほど3,000アクセスが続いていて、転送量も200MiBほど続いています。これだけの負荷をさくらが受け持ってくれたという事だと思うので、なかなかいい感じだと思います。昨日、CDN設定直後に3分30秒で503エラーというのも、設定直後はDNSの設定関係が反映されるまで時間がかかるのか、キャッシュサーバにちゃんとキャッシュデータが残るまでに時間がかかるのかといったところでCDN設定は少し時間がたってからきいてくるような気がします。