Posted at

CloudFrontを導入してもUser-agentの値は書き換えられないようにする方法。

More than 3 years have passed since last update.


はじめに

CloudFrontの導入の際に、特に何も設定を行わないと、CloudFrontを通過する時点でUser-agentの値が「Amazon CloudFront」に書き換えられてしまいます。

その場合、今までUser-agentの情報をもとにPCサイトやモバイルサイトへの振り分けを行っていた場合、うまく振り分けられなくなってしまいます。

今回はそういう状況を回避するためUser-agentの値を導入前と同じように取得するための設定を行います。

また、CloudFrontはELBまたはS3に対してしか導入できない(2016年4月現在)ため、今回はELBを利用した以下の構成で行います。

User-agent.png


0. 事前準備

今回は以下のphpファイルをサーバに配置してUser-agentの値を確認します。


ua.php

<?php

$ua = $_SERVER["HTTP_USER_AGENT"];
echo "$ua";
?>

まずは直接サーバまたはELBへアクセスした際に取得できるUser-agentの値を確認します。

今回はSafariでサイトへアクセスするためUser-agentは以下のように表示されます。

cloudfront_1_user-agent_01.png

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/601.5.17 (KHTML, like Gecko) Version/9.1 Safari/601.5.17

また、CloudFront経由でのUser-agentも確認します。

デフォルト設定の場合、CloudFrontを通すとUser-agentは以下のように見えます。

cloudfront_1_user-agent_02.png

Amazon CloudFront

もし、今までUser-agentの情報を利用して処理を行っていたとすると、このままでは影響が出てしまいます。

対処についてやり方は色々あると思いますが、今回はUser-agentを今まで通りの値で通信できるように設定します。


1. Distributionの作成


  • [Create Distribution]をクリックします。
    cloudfront_2_distribution_01.png


Step1. Select a delivery method for your content.


  • Webの方の[Get Started]をクリックします。
    cloudfront_2_distribution_02.png


Step2. Create Distribution


  • Origin SettingsのOrigin Domain Nameで導入先のELBを指定して「Create Distribution」をクリックします。
    cloudfront_2_distribution_03.png
    cloudfront_2_distribution_04.png


2. Behaviorsの設定


  • 作成した「Distribution」にチェックを入れ「Distribution Settings」をクリックします。

    cloudfront_3_behavior_01.png


  • 「Behaviors」タブをクリックし編集する対象(今回はDefault)にチェックを入れ「Edit」をクリックします。

    ※新規で作成したい場合は「Create Behavior」をクリックしてください。

    cloudfront_3_behavior_02.png



Edit Behavior


Default Cache Behavior Settings


  • Forward HeadersをWhitelistに変更します。

    cloudfront_3_behavior_03.png


  • Whitelist Heaadersの項目が現れるのでUser-agentと入力した後に「Add Custom >>」をクリックして追加します。

    cloudfront_3_behavior_04.png


  • 追加されたことを確認したら、右下の「Yes, Edit」をクリックして完了です。

    cloudfront_3_behavior_05.png

    cloudfront_3_behavior_06.png


しばらく時間が経つとUser-agentが今まで通りの値になるのが確認できます。

cloudfront_1_user-agent_03.png

あらかじめTTLを短くしておくと切り替わるのが早いので確認しやすいです。


おわりに

今回の設定はUser-agentで振り分けたい場合に有効的ですが、キャッシュ効率が悪くなってしまうため推奨されていません。


内容

"Some headers have a lot of possible values, and caching based on the values in these headers would cause CloudFront to forward more requests to your origin. We recommend that you do not cache based on the following headers: User-Agent"



意味

いくつかのヘッダーは多くの値を持ち、それらのヘッダーの値をもとにキャッシュしているため、CloudFrontが多くのリクエストをオリジンへ転送する要因となります。私たちは次のヘッダーをキャッシュしないことを薦めます。User-Agent


また、CloudFrontはUser-agentヘッダーの値に基づいてデバイスタイプを判定するための設定がWhitelist Headersで設定できます。


WhitelistHeaders

CloudFront-Is-Desktop-Viewer

CloudFront-Is-Mobile-Viewer
CloudFront-Is-SmartTV-Viewer
CloudFront-Is-Tablet-Viewer

なので、端末の種類によって振り分けを行いたい場合はこの設定を利用するのが好ましいです。