WPにてW3T CacheとCloudFlareを有効中開発内容が反映されなくなった

完全にWordPressブログみたいになってきたポンコツブログですw

 

 

はやくエロ記事書けよと思いの方、も、もう少しだけ待ってちょ。

 

 

IMG_0813

 

 

 

ちょっとWP開発でハマったので備忘録ついでに誰かの役に立てばと思います。

 

 

 

嬢報部は、表示高速化のためにページキャッシュシステムを利用しています。

 

 

CDNサービスのCloudFlare

 

WPプラグインのW3 Total Cache

 

 

この2つを連携させて、サイトの表示速度を上げる試みをしている。

 

*興味のある人はバズ部さんの記事を参考にすると利用しやすくなると思います。

 

 

 

ページキャッシュの仕組みを簡単に説明すると、

 

本来であればアクセスのたびにWPによって動的に生成されるHTMLファイルをあらかじめ完成された状態でどっかに保存しておき、ブラウザからサイトにリクエストがあった時にその用意しておいたHTMLを渡すことで、WPが入ってるサーバー上でのコンピューターによるページの動的生成処理をスキップする事で高速化を図るものです。

 

 

WPの記事データやその他諸々のブログに関わる情報は全て同一サーバー上にあるデータベースに保存されています。

 

WPはページリクエストに応じてこのデータベースから情報(記事本文を含む)を引っ張り出してきてページの中にはめ込んでからみんなのブラウザへ1つのファイル(HTMLファイル)として渡しています。

 

 

こうする事で、記事を書くたびに新たに別のファイルを作らなくて済みます。

 

ただその代わり、この処理に時間がかかってしまうと言うわけです。

 

 

この処理かかっている時間を無くしてしまおう、と言うのがページキャッシュの目的です。

 

 

 

そして、嬢報部ももれなくこのキャッシュシステムの恩恵を受けようと思い前述の2つの仕組みを導入しています。

 

 

ところが昨日、パンくずリストを作っている最中に、仕組みを完成させてデザインを変更している際変更したはずのデザインが突然反映されなくなってしまいました。

 

 

キャッシュシステムが稼働している状態で開発をしていれば必ずと言っていい程経験することなのでポンコシも基本的な対策は知ってましたが、思いのほか自分の知識を超えた範囲での解決となったのでブログにしたためようと思った次第ですw

 

 

 

では、キャッシュ問題解決の基本的な流れはこんな感じになるかと思います。

 

 

 

 

 

それぞれの工程の後に、PCとモバイルから両方でアクセスして開発で加えた変更が反映されるか見てみます。

 

反映されたら設定を元に戻して完了です。

 

:確認の際、モバイル版を確認する時はwifiとキャリアの4G回線両方で接続して確認しましょう。wifi回線と4G回線では使用しているキャッシュが違う場合が多々あります。

 

 

 

 

ではまずは、

 

 

W3 Total Cache内で関連キャッシュの全クリア

*WPプラグインのキャッシュページを削除して最新のキャッシュページを今あるプログラムソースから生成しなおします。

 

 

WP管理画面のW3T Cacheのダッシュボートをクリック

 

Screen_Shot_2016-01-09_at_10_39_54

 

 

赤枠の “empty all caches” をクリックします。

 

Screen_Shot_2016-01-09_at_10_40_07

 

30秒程待ってサイトをリロードしてみて変更が反映されているか確認します。

 

以上がプラグインのキャッシュクリアです。

 

 

 

ポンコシの環境では、PC版は復活したのですがスマホに反映されないと言う現象が発生したので以下の補足も追加します。

 

W3T Cacheのモバイル版キャッシュも停止してみる

*W3T Cacheはモバイル用に別のキャッシュを用意してくれるので、このモバイルページキャッシュの生成を停止します。

 

 

W3TのメニューからUser Agent Groupsタブを選択します。

 

Screen_Shot_2016-01-09_at_10_40_51

 

 

“Manage User Agent Groups” 内の “Enabled” とあるチェックボックスを外してモバイル版キャッシュを停止します。

 

Screen_Shot_2016-01-09_at_13_24_25

 

チェックを外した後はページ一番下のボタンをクリックして変更を反映するのを忘れない様に。

Screen Shot 2016-01-09 at 13.26.31

 

 

 

ここでWPプラグインのキャッシュを再クリアしても変更が反映されないと言うことは、CDNで生成されたキャッシュが古くてそちらを見に行っているために変更が反映されない、と言うロジックになります。

 

 

 

と言うわけで、次はCDNをチェックしてみます。

 

CDN(CloudFlare)の開発モードをONにする

*開発モードは一時的にキャッシュページの配布を停止するための機能です。

 

 

CloudFlareにログオンしたら、画面左上の “Select Website” から対象サイトを選択してます。

 

Screen_Shot_2016-01-09_at_13_02_49

 

 

サイトを選択するとメニューバーが出てくるので、”Caching” メニューを選択します。

 

Screen_Shot_2016-01-09_at_10_37_38

 

 

下の方にある “Development Mode”(開発モード)を探して、クリックして “ON” にします。

 

Screen_Shot_2016-01-09_at_10_41_40

 

これでCloudFlareのキャッシュは無効になるので、動的なページ生成が開始されます。

 

この状態で、サイトの変更を確認してみて下さい。

 

*これで変更が反映されない場合は、加えた変更を再確認して下さい。変更したコードが間違っている可能性もあります。

 

 

 

ちなみに、ポンコシはここでデザイン変更が反映される様になりました。

 

つまり、CloudFlareのキャッシュをONにするとデザインが古いバージョンになると言うことなので、CloudFlare上のキャッシュを新しくする必要があると判明しました。

 

 

 

と言うわけで次に実行した作戦は、

 

CloudFlare上のキャッシュを削除

*CDNサービス上に蓄積されたキャッシュページを削除します。

 

 

Screen_Shot_2016-01-09_at_10_37_38

 

同じく “Caching” メニューの一番上にある “Caching” で右の “Purge Individual Files” ボタンを押します。

 

Screen_Shot_2016-01-09_at_10_38_18

注:こちら、全キャッシュ一括削除のボタンが “Purge Individual Files” 横の▼から出てくることがわかりました。

 

 

 

新たな画面が出てくるので、開発で変更を加えたファイルのサーバー上のURIを入力して下さい。

 

Screen_Shot_2016-01-09_at_10_39_14

注:CloudFlareではキャッシュしたファイルを一括削除と言うのが出来ない様です

 

 

 

今回、嬢報部ではCSSで変更したデザインが反映されなかったので、asianfuzoku.com上の対象のCSSファイルのアドレスを入力して “Purge Individual Files” を発射しましたw

 

ちなみに、改行して30個まで同時にPurge(ポア的な意味ですかねw)出来ます。

 

 

 

以下追記:上にも赤字で追記しましたが、キャッシュ削除の方法の選択肢として、全キャッシュ削除の “Purge Everything” がありました。

 

Screen Shot 2016-01-10 at 9.08.01

 

こちらを使用するのは、CloudFlare側では推奨しないと書かれていますが、理由はキャッシュ削除後のサイトへのアクセスにはページキャッシュ再生成処理が行われるため、アクセスが大きいサーバーでは生成のタイミングでページ表示速度が著しく低下する恐れがある+サーバーへの負荷が通常より大きくなるとのことでした。

 

 

当サイトはリリース直後でページアクセスも膨大とまでは行かないので、”Purge Everything” やってみましたw

 

結果、非常に簡単にキャッシュリフレッシュが出来て、ソースコードへの変更も即座に反映される様になりました。

 

 

 

 

 

ポンコシが1時間程ハマったこの障害、ここでようやくPurgeすることが出来ましたw

 

完全解決の前には、Purgeと開発モードのOn/Offを数回繰り返しました。

 

 

ちなみに、初期の方でW3T Cacheの停止もしましたが、結局CloudFlareの古いキャッシュページが原因だったので意味なかったですw

 

 

 

今回の件で、キャッシュの仕組みに対する理解が深まりました。

 

障害を乗り越えてポンコシは成長して行きます。

 

 

 

人生障害対応マイペンライ!

 

 

 

 

さあエロ記事、今度こそ書きますから! 😆


2 comments to this article

  1. SEXプレデターXYZ

    on 2016/1/9 at 9:31 PM - 返信

    小難しい事書いてじゃねーよ*\(^o^)/*

    キャッシュしかわからんわい!笑

    • ポンコシ

      on 2016/1/9 at 11:09 PM - 返信

      XYZさん

      技術情報を求めて来る一般の人がスパムだと勘違いするよーなコメント・・・
      やめんかい!(  ゚Д゚)⊃!

コメントを残す