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

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

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

スマホ対応には、いろいろ方法はあると思いますが、まぁデザインやレイアウトに疎い私が把握・理解できる範疇では下記の２つぐらいかなーと思います。それぞれ 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 でテーマ変更

これも基本は「２」と同じですが、便利なプラグインがあります。

1. Nginx Cache Controller プラグインの導入
2. nginx設定に、モバイル判定設定を組み込む
3. Nginx Mobile Theme プラグインを使って利用する

どう設定するかは、上記２つのプラグイン作者のサイト

• Nginx Mobile Theme – Nginxリバースプロキシ下で動作するモバイル用のテーマ切り替えプラグイン

を参考にすればいけるんじゃないかなーと思います。

2016年9月21日 @kimipooh