2016年9月21日水曜日

「nginx + リバースプロキシキャッシュ」において、User Agent ベースでテーマ切り替えやスマホ対応している場合の問題

随分前からある Tipsのようですが、nginx に移行して初めて遭遇したので、備忘録として残しておきます。まぁ遭遇したサーバーが網元(AMIMOTO)さんだったので、サポートに問い合わせたら件名の可能性について回答してくださったので手間取らずに済みました!

最近はレスポンシブ・ウェブ・デザインでスマホ対応していたので、気づいてなかったのでしょうね...

スマホ対応には、いろいろ方法はあると思いますが、まぁデザインやレイアウトに疎い私が把握・理解できる範疇では下記の2つぐらいかなーと思います。それぞれ nginx + リバースプロキシ配下でどう対応するかをメモっておきます。

1. レスポンシブ・ウェブ・デザイン


対応の必要なし

2. User Agent にて表示変更


モバイル判定したものについては、キャッシュを削除する必要あり。
Nginx でモバイル判定させ、その情報をもとにリバースプロキシキャッシュを削除するということになりますね。一番簡単なのは

  1. Nginx Cache Controller プラグインの導入
  2. nginx設定に、モバイル判定設定を組み込む
     参考:[WordPress] nginxでモバイルとPCでテーマを分ける方法(Qiita)
  3. テーマの functions.php にNginx Cache Controller を使ってモバイル用のキャッシュを削除するフィルタを追加
     参考:網元で WPtouch を使用する際の設定(網元)

当方は、WPtouch Mobile Plugin が利用されていたサイトだった事、網元をつかっていたので、まさにこのヘルプをみて解決できました!! 


3. User Agent でテーマ変更


これも基本は「2」と同じですが、便利なプラグインがあります。
  1. Nginx Cache Controller プラグインの導入
  2. nginx設定に、モバイル判定設定を組み込む
  3. Nginx Mobile Theme プラグインを使って利用する
どう設定するかは、上記2つのプラグイン作者のサイト

2016年9月21日 @kimipooh

0 件のコメント:

コメントを投稿

Google+ Badge