Nginx で運用する WordPress と WPtouch のキャッシュ問題解決へ……

本記事は最終更新日より 1 年以上経過しております。
スポンサーリンク

 去年 12 月末から Nginx の Reverse Proxy 使用時の Proxy Cache が同じ KEY で複数ファイル生成されるお話しが全て解決出来た。
 ngx_cache_purge モジュールを用いて PC 用とモバイル用のキャッシュの両方を削除したかったのだが、上記理由にて上手い事キャッシュの削除が出来ずにいた。PC 用キャッシュに於いてはバックエンドで gzip off をしていなかったのが原因だった。その後もモバイル用キャッシュは変わらず制御出来ていなかった。


 結局、モバイル端末用キャッシュは WPtouch が出力する Vary: User-Agent ヘッダをフロントエンドが解釈し、User-Agent 毎に異なるキャッシュファイルを生成していたのが原因だった。
 Vary: User-Agent ヘッダがあると、User-Agent によってコンテンツの内容が変わりますよと言うお知らせになる。Google が付与を推奨するヘッダだそうで。
 よって、キャッシュを削除する為の URI を叩いても、そこから生成される KEY だけではキャッシュファイル名を算出出来ず削除不能となっているのであった。
 そこでとった安易な策は WPtouch で Vary ヘッダを吐かせないようにし、フロントエンド側で add_header User-Agent をするという方法だ。
 WPtouch は該当箇所をコメントアウトするだけで良い。編集前後の差分は次の通り。

$ diff -u wp-content/plugins/wptouch/core/class-wptouch-pro.php.bak wp-content/plugins/wptouch/core/class-wptouch-pro.php
--- wp-content/plugins/wptouch/core/class-wptouch-pro.php.bak   2016-01-09 17:11:52.160504381 +0900
+++ wp-content/plugins/wptouch/core/class-wptouch-pro.php       2016-01-09 17:12:03.786999547 +0900
@@ -352,7 +352,7 @@
                        $this->setup_mobile_theme_for_viewing();

                        // For Google Best Practices
-                       header( 'Vary: User-Agent' );
+//                     header( 'Vary: User-Agent' );
                } else {
                        remove_action( 'wp_enqueue_scripts', 'wptouch_foundation_load_framework_styles', 1 );
                        add_action( 'wp_footer', array( &$this, 'handle_desktop_footer' ) );

 Nginx のバーチャルホスト設定を行っているファイルの server ブロック中に次の内容を追記する。

    add_header Vary User-Agent;

 すると PC だろうとモバイル端末であろうと Vary: User-Agent が出力されるから問題は無い。
 そして肝心の Proxy Cache も User-Agent 毎にではなく、想定通り PC 用、モバイル端末、携帯用の 3 つで 1 つの KEY あたりキャッシュファイルは 1 つとなってくれた。
 あとはキャッシュを削除 (Purge) する為のプラグインを追加して設定してしまえば OK。

 WordPress からキャッシュを削除する方法は次のサイトを参考にというか、ほぼ同じ事をやっている。
 そのnginxのキャッシュ、ちゃんとpurgeされていますか? | Zafiel

 WordPress › Nginx Proxy Cache Purge « WordPress Plugins を導入し、上記サイト通りに削除用 URL の追加。nginx 側も次のように URI を合わせた purge 用のアドレスを追加している。

# ===== Cache Purge.
    location ~ /purge(\/.*) {
        set $is_mobile 0;
        allow 127.0.0.1;
        allow 192.168.1.0/24;
        deny all;
        proxy_cache_purge cache "$scheme://$host$1$is_mobile";
    }

    location ~ /pgm(\/.*) {
        set $is_mobile 1;
        allow 127.0.0.1;
        allow 192.168.1.0/24;
        deny all;
        proxy_cache_purge cache "$scheme://$host$1$is_mobile";
    }

    location ~ /pgk(\/.*) {
        set $is_mobile 3;
        allow 127.0.0.1;
        allow 192.168.1.0/24;
        deny all;
        proxy_cache_purge cache "$scheme://$host$1$is_mobile";
    }

 $is_mobile に関しては map ディレクティブにて User-Agent 毎に値を振り分けることをしている。0 は PC、1 はスマホ、3 はガラケーという具合。2 にタブレットとしようとしたけどやっぱやめた~になったので欠番。

 めでたしめでたし。だといいな。

2016/01/09 20:48

 合わせて以前書いた設定を書き連ねた記事を加筆修正した。
 Nginx で WordPress を流行の構成で動作させる

スポンサーリンク