接続実績に基づくNginx + Fastcgi ユーザエージェント別のキャッシュ方法

NginxとFastcgiのキャッシュをユーザーエージェントごとに変更する方法を紹介します。
自分のサイトの接続実績をもとにユーザエージェントの設定を正しくしましょう。

スポンサーリンク

ユーザエージェントとは?

HTTPのヘッダーの中に含まれる、接続元PCの情報を記載するヘッダーのことを指します。
たとえば以下のユーザエージェントを表示してくれるサイトにアクセスしてみると・・・。

ユーザーエージェントを返します。
ユーザーエージェント: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; rv:11.0) like Gecko

自分の接続がWindows10であることがわかります。
これを利用してモバイル端末向けのキャッシュとPC向けのキャッシュを分ける設定を行います。

ユーザエージェントの振り分け設定

Googleアナリティクスよりモバイル端末向けの接続状態を確認します。
レポート⇒モバイル⇒デバイスで接続実績を確認することができます。

モバイル端末の多くはiPhoneであることが確認できます。次にiPadで残りはAndroidですね。
(not set)はGoogleアナリティクスからではわからなかったため、WordPressに入っている

無題

「SlimStat」より調査しましたがブラウザがIE6やChoromeであることや解像度がPCっぽかったので対象から外しました。

CacheのKeyについて

ここまで終わりましたら次は実際に振り分けの設定を行います。
Fastcgi cacheはKeyIDの名前に基づいてキャッシュを作成します。
KeyID:AAAAとKeyID:AAAABは別のものと認識され各々でキャッシュが作成されます。
そのため、モバイル端末が接続してきた場合KeyIDの後ろにモバイル端末であることを示してあげればPCと別々のキャッシュが作成されます。

実際の設定

今回は接続の実績に従い、「携帯電話 / スマートフォン / iPhone,iPod / Android」の4種類をキャッシュする設定としています。
キャッシュはサーバの負荷が高くなりますが、個別で設定したほうがユーザビリティが向上します。そのため今回はandroidとiPhoneは個別にキャッシュを作り、それ以外は携帯 / スマートフォンと大きく区分してキャッシュを設定させます。

server {
<中略>
set $mobile '';

if ($http_user_agent ~* '(DoCoMo|J-PHONE|Vodafone|MOT-|UP\.Browser|DDIPOCKET|ASTEL|PDXGW|Palmscape|Xiino|sharp pda browser|Windows CE|L-mode|WILLCOM|SoftBank|Semulator|Vemulator|J-EMULATOR|emobile|mixi-mobile-converter|PSP)') {
set $mobile "@ktai";
}

if ($http_user_agent ~* '(iPhone|iPod|incognito|webmate|Android.*Mobile|dream|CUPCAKE|froyo|BlackBerry|webOS|s8000|bada|IEMobile|Googlebot-Mobile|AdsBot\-Google)') {
set $mobile "@smartphone";
}

if ($http_user_agent ~* '(iPhone|iPod)') {
set $mobile "@iPhone";
}

if ($http_user_agent ~* 'Android.*Mobile') {
set $mobile "@Android";
}
<中略>

最後にキャッシュのKeyIDモバイルの端末の識別子を入れるように設定します。

    location ~ \.php$ {
     <省略>
 
        fastcgi_cache_key "$scheme$request_method$host$request_uri$mobile";

     <省略>
        }

まとめ

これで設定が完了です。モバイル端末についても個別でキャッシュすることができます。
AndroidとiPhoneを分けたのはAndroidでアクセスした後にiPhoneで接続テストを行った場合崩れて表示されたことがあったため分けています。
次回からはt2.nanoを利用した場合のNginxの構築とチューニングを紹介したいと思います。