Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
30
Help us understand the problem. What is going on with this article?
@kooohei

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

More than 5 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

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

30
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
hengjiu
AWSであなたの仕事を快適に。 〜 For your Comfortable Working 〜

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
30
Help us understand the problem. What is going on with this article?