レンタルサーバー・自宅サーバー設定・構築のヒント
レンタルサーバー・自宅サーバー設定・構築のヒント - レンタルサーバー・自宅サーバーの設定・構築情報を公開しています。

nginx のキャッシュをモバイル(スマホやタブレットなど)に対応する方法

2014年2月3日 2014年2月3日
nginx cache mobile

nginx のキャッシュには、大きく2つの方法があります。(下記の記事参照)

今回は、同じ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}'return
/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}'return
/var/cache/nginx/example.com/a/17/d911f827fed8c2d79d077c3d5fbf717a

このように全く違うことがわかります。

これで、キャッシュが異なりますから、モバイルの場合は、モバイルのキャッシュファイルが用いられ、パソコンからの場合は、パソコンのキャッシュファイルが用いられるようになります。


いかがだったでしょうか?
Wordpressなどの動的なページ作成では、同じURLでモバイルとパソコンの表示を異にすることが可能です。実際、そうしているサイトも多く見受けられます。

その際、上記のように簡単に対応できるので、是非、一度試されることをおすすめします。

このサイトも、一応、モバイルに対応しています。恥ずかしながら、画像を少な目にしたのと、単純に細長く表示できるようにしただけですが・・・。
キャッシュについても、一応、うまくコントロールできているみたいです。 まあ、このサイトに関していえば、まだまだ、モバイルから見ておられる方は少ないようですが、 タブレットを含めば、やっぱり、これからは、モバイル対応はもちろんのこと、モバイル版サイトでは軽めのサイト運営を心掛ける必要があるのかもしれませんね。


関連記事 :


コメントを投稿 :

お名前 *

メールアドレス *
( メールアドレスが公開されることはありません。)

サイトアドレス

コメント *

* 印の項目は、入力が必要な項目です。




最近投稿の記事

Genymotionとは、 公式サイト(http://www.genymotion.com/)には、以下のように記述があります。 G ...

以下のように Android x86 を仮想マシンへインストールし、色々と試してきました。 仮想マシンを使って Android ...

Android x86とは、 いわゆる Android のPC版OSです。 Android は、Googleによって開発されたスマー ...

Android x86とは、 いわゆる Android のPC版OSです。 Android は、Googleによって開発されたスマー ...

今回は、Mondo Rescue を使って バックアップとリストア(復元)をやってみたいと思います。 いまだに、さくらのVPSは、バッ ...


さくらのVPS 全プラン リニューアルです。(石狩(北海道)も選択可)


root権限ありで ¥685 / 月 ~ と非常にリーズナブルな CPU 1(core)の 512 プランから、 最高 CPU 10(core), メモリ 32(GB), SSD容量 800(GB) までとプランが充実。
ディスクは、SSDとHDDの選択が可能になった他、データセンターは人気の東京、石狩(北海道)となりました。

また、どのプランでも好きなOSが選べます
( CentOS, Fedora, Scientific Linux, FreeBSD, Ubutu, Debian )

管理人もおすすめのVPSです。
試用期間がありますから、一度、お試しを!!

詳しくは、http://vps.sakura.ad.jp/さくらのVPSのサイトへ へどうぞ!!

カテゴリ


Serverman@VPS 完全1ヶ月無料 キャンペーン実施中です。


Serverman@VPS 完全1ヶ月無料 キャンペーン実施中です。
最近、スワップにも対応した Serverman@VPS は、かなりリーズナブルかもです。

  • メモリ1GB~2GBのEntryプラン :月額:490円
  • メモリ2MB~4GBのStandardプラン :月額:980円
  • メモリ4GB~8GBのProプラン :月額:1,980円

新規申し込みで1ヶ月間完全無料となるキャンペーンを実施中です。
Serverman@VPSの特徴は、安さとIPv6対応です。また、初期設定費0円もポイントです。

IPv6でちょっと遊んでみたい方には、おすすめかもしれませんね。最低利用期間もありませんから、気に入らないときは即解約もできます。

Serverman@VPSの詳細については、 http://dream.jp/vps/ Serverman@VPSのサイトへへどうぞ。



KVM採用 ConoHa VPSは、時間単位で借りれる便利なVPSです。


ConoHa VPS は、初期設定費0円最低利用期間無し時間単位で清算可能、 さらに、Web APIを使って自動化を図ることもできる便利なVPSです。

海外サーバー設置も可能で、ローカル接続にも対応と、かなり、機能豊富なサーバーです。

新規ユーザ登録で、クーポンもらえますから、まずは、お試しですね。

ConoHa VPSの詳細については、
http://www.conoha.jp/ へどうぞ。

KVM採用 お名前.com VPS(KVM) 2G プラン 初期設定費無料 キャンペーン 実施です。


メモリ2GBプラン CPU:3core、Disk:200GB
月額:1,153円から (初期設定:1,680円0円)

さくらのVPSがリニューアルされてもなんのその。
1GBメモリ / 2Core を ¥834 – の格安価格で提供中です!
間違いなくスペックからすると割安感ありです。
年間割引時の途中解約で返金がないのは、 ちょっと残念ですが、それでもこの割安感は魅力です。

まずは、お試しですね。

お名前.com VPS(KVM)の詳細については、
http://www.onamae-server.com/vps/ へどうぞ。(お試し期間が15日あります。)



  • はてなブックマークへ追加する
  • Facebookでシェアする
  • twitter でつぶやく
  • Google Plusでシェアする
  • Pocketでシェアする
ページトップへ
Time : 0.2298 [s]