1. HOME
  2. 開発・ブログ運営
  3. サーバー
  4. Nginx プロキシキャッシュのスマホ対応(PC 用キャッシュとモバイル用キャッシュの使い分け)
2012年12月07日
エックスサーバーで SSH 接続が可能になりました。
2014年04月18日
SSH の config ファイルの場所と作成方法
2016年07月08日
オライリーの Docker 本(Docker Up & ...
2014年08月08日
Chrome で WEB レスポンスヘッダ と リクエストヘッ ...
2016年07月29日
Docker for Mac のインストール
2014年08月06日
10分でできる!Mac からエックスサーバーに SSH 接続す ...

Nginx プロキシキャッシュのスマホ対応(PC 用キャッシュとモバイル用キャッシュの使い分け)

スマホでアクセスした場合の不具合を修正しました。

このブログでは PC 用ページとモバイル(スマホ)用ページで、それぞれ専用のレイアウトで表示するようにしていますが、たまにスマホからアクセスしたにもかかわらず、PC 用のページが表示されることがありました。


原因

どうやら、単純に Nginx のプロキシキャッシュを設定しただけでは URL 単位でキャッシュされる(1 URL に対して 1 キャッシュ)ので、PC、スマホそれぞれからのアクセスされるタイミングによって、PC 用ページのキャッシュが生成されたり、モバイルページ用のキャッシュが生成されたりと、キャッシュが混在していていることが原因のようです。


Nginx の設定変更

nginx のキャッシュをモバイル(スマホやタブレットなど)に対応する方法 を参考にさせてもらいました。というかそのまんまです。

どうやらキャッシュキー(proxy_cache_key)を変更するだけで良いみたいなので、Nginx コンテナの /etc/nginx/conf.d/default.conf の proxy_cache_key を、


から、


へ変更しました。設定変更後は忘れずに設定を反映させます。

関連記事:Nginx コンテナ、PHP-FPM コンテナをゼロダウンタイムで設定を反映させる方法


まとめ

変更設定後、あまり時間が経っていませんが、今の所、モバイル(スマホ)でアクセスした場合にはちゃんとモバイル用のページが表示されています。

もしスマホで PC ようページが表示されちゃっている場合は教えてやってください。

でわでわ。








この記事にコメントする





Copyright © 2012 - 2014 MacBook Air とWordPressでこうなった All rights reserved
Powered by WordPress.