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

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}'
/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など) が適用となっていませんか?
このサイトでは、コンテンツの一部が非表示、あるいは、コメント、お問い合わせの投稿ができない検索ができないことがあります。


関連記事 :

nginx でリバースプロキシ、FastCGIキャッシュのキャッシュを削除する方法をまとめて解説してみた

nginx でリバースプロキシのキャッシュを削除する方法は、一応、色々な方法があります。 Nginx をリバースプロキシ(キャッシュ) ...

Nginx のFastCGIキャッシュ(fastcgi cache )を使ってみた

ウェブサーバーのキャッシュ機能は、動的なページの高速化にかなり役立ちます。 例えば、Wordpressなどは覿面(てきめん)で ...

Nginxのproxyでキャッシュを削除する方法

前回「Nginx をリバースプロキシ(キャッシュ) として使ってみた」では、 nginxをリバースプロキシサーバーとして使ってみま ...

Nginx をリバースプロキシ(キャッシュ) として使ってみた

前回「Nginx + php-fpm をさくらのVPSで使ってみた」では、 nginxをウェブサーバーとして使ってみました。実際に ...

Wordpress Nginx proxy cache integratorというプラグインの働きは?

「Nginx をリバースプロキシ(キャッシュ) として使ってみた」では、nginxをリバースプロキシサーバーとして使ってみました。 「Ngin ...



コメントを投稿 :

お名前 *

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

サイトアドレス

コメント *

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




最近投稿の記事

[ 画像提供元 : Amazon ] 先日、1TBのディスクの入れ替え時にバックアップをとろうとディスクコピーを行いました。 その際 ...

Windows で Linux ファイルシステム Ext4 のディスクをマウントするには? Ext3Fsd が、おそらく、最も簡単なツール ...

今回は、Windows で Compass を使ってみました。 Compass とは、 Sass(サス、Syntactica ...

今回は、Anti Adblock を使ってみました。 Anti Adblock とは、 そもそも Adblock という ウェブ ...

デスクトップ環境でない サーバーで、Webページのキャプチャー画像をコマンドで撮る には、wkhtmltoimage, CutyCapt ...


さくらの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日あります。)



  • ソーシャルブックマーク

  • はてなブックマークへ追加するはてな登録数
ページトップへ
Time : 0.7094 [s]