nginx のキャッシュをモバイル（スマホやタブレットなど）に対応する方法
nginx のキャッシュには、大きく２つの方法があります。（下記の記事参照）
今回は、同じURLでもパソコンからの見え方をモバイル機器、あるいはスマートフォンからの見え方を別にしているサイトもあります。
このような場合、先の記事では、URL毎にキャッシュされていくので、パソコンからか、モバイル（スマホ）からかなどの分類がないため、先にキャッシュされた情報をいずれも場合でも出力してしまいます。
今回は、そのような場合、どうすれば良いか簡単に解説してみます。
nginx のキャッシュをモバイル（スマホ）に対応する方法
先のとおり 同じURLを使って パソコンからの見え方をモバイル機器、あるいはスマートフォンからの見え方を別にしているサイトの場合、
キャッシュキーを変更することで簡単に対応することができます。
- リバースプロキシ キャッシュ の場合
...
# キー設定を以降のように変更する
# proxy_cache_key $scheme://$host$request_uri;
set $mobilef '';
if ($http_user_agent ~* '(iPhone|iPod|incognito|webmate|Android.*Mobile|Windows.*Phone|dream|CUPCAKE|blackberry9500|blackberry9530|blackberry9520|blackberry9550|blackberry 9800|webOS|s8000|bada|Googlebot-Mobile|incognito|webmate)') {
set $mobilef 'mobile.';
}
proxy_cache_key "$mobilef$scheme://$host$request_uri";
...
|
- FastCGI キャッシュ の場合
...
# キー設定を以降のように変更する
# fastcgi_cache_key $scheme://$host$request_uri;
set $mobilef '';
if ($http_user_agent ~* '(iPhone|iPod|incognito|webmate|Android.*Mobile|Windows.*Phone|dream|CUPCAKE|blackberry9500|blackberry9530|blackberry9520|blackberry9550|blackberry 9800|webOS|s8000|bada|Googlebot-Mobile|incognito|webmate)') {
set $mobilef 'mobile.';
}
fastcgi_cache_key "$mobilef$scheme://$host$request_uri";
...
|
リバースプロキシ キャッシュ と FastCGI キャッシュ の違いは、
基本ディレクティブ名が proxy_cache_key → fastcgi_cache_key のように変化するだけです。
設定するパラメータも同じのため、以降は、同じものとして解説します。
上記のproxy_cache_key (or fastcgi_cache_key) ディレクティブの先頭に $mobilef を追加しただけです。
$mobilef は、ユーザエージェント情報から、タブレット端末、スマートフォン端末などのモバイル端末からのアクセスか否かを判定しています。
もし、モバイル端末からのアクセスであれば、$mobilefに‘mobile.’ を設定しています。（ここの文字列はなんでも良いです。ここではわかりやすいように mobile. としているだけです。）
これによって、例えば、http://example.com へ
パソコンからアクセスした場合、→ キャッシュキーは、‘http://example.com’ となります。
モバイルからアクセスした場合、→ キャッシュキーは、‘mobile.http://example.com’ となります。
キャッシュキーが異なるということは、キャッシュファイルも場合によってはディレクトリも異なることになります。
先の例で、キャッシュパスの設定が以下の場合のキャッシュファイルのパス、ファイル名をコマンドで出力してみます。（出力方法は、nginx でリバースプロキシ、FastCGIキャッシュのキャッシュを削除する方法をまとめて解説してみた を参照。）
- リバースプロキシ キャッシュ の場合
...
proxy_cache_path /var/cache/nginx/example.com levels=1:2 keys_zone=cache_example.com:15m inactive=1h max_size=1000m;
...
|
- FastCGI キャッシュ の場合
...
fastcgi_cache_path /var/cache/nginx/example.com levels=1:2 keys_zone=cache_example.com:15m inactive=1h max_size=1000m;
...
|
$ echo -n "http://example.com/" | md5sum | awk '{print "/var/cache/nginx/example.com/"substr($1,length($1),1)"/"substr($1,length($1)-2,2)"/"$1}'
/var/cache/nginx/example.com/d/6f/a6bf1757fff057f266b697df9cf176fd
$ echo -n "mobile.http://example.com/" | md5sum | awk '{print "/var/cache/nginx/example.com/"substr($1,length($1),1)"/"substr($1,length($1)-2,2)"/"$1}'
/var/cache/nginx/example.com/a/17/d911f827fed8c2d79d077c3d5fbf717a
|
このように全く違うことがわかります。
これで、キャッシュが異なりますから、モバイルの場合は、モバイルのキャッシュファイルが用いられ、パソコンからの場合は、パソコンのキャッシュファイルが用いられるようになります。
いかがだったでしょうか？
Wordpressなどの動的なページ作成では、同じURLでモバイルとパソコンの表示を異にすることが可能です。実際、そうしているサイトも多く見受けられます。
その際、上記のように簡単に対応できるので、是非、一度試されることをおすすめします。
このサイトも、一応、モバイルに対応しています。恥ずかしながら、画像を少な目にしたのと、単純に細長く表示できるようにしただけですが・・・。
キャッシュについても、一応、うまくコントロールできているみたいです。
まあ、このサイトに関していえば、まだまだ、モバイルから見ておられる方は少ないようですが、
タブレットを含めば、やっぱり、これからは、モバイル対応はもちろんのこと、モバイル版サイトでは軽めのサイト運営を心掛ける必要があるのかもしれませんね。
ご利用のブラウザは、広告ブロック(AdBlockなど) が適用となっていませんか？
このサイトでは、コンテンツの一部が非表示、あるいは、コメント、お問い合わせの投稿ができない、検索ができないことがあります。
関連記事 :
)
コメントを投稿 :