CloudFront のジオターゲティングがより詳細にできるようになりました

はじめに

こんにちは、技術1課の山中です。もうすぐ梅雨があけそうで、気持ちは向上しているのですが夏の暑さを想像するとそれはそれできつそうですね。今回は CloudFront のジオターゲティングに関するアップデートです。これまでも CloudFront がオリジンへ送信するリクエストヘッダーとして閲覧者の 国コード を送信することができましたが、今回のアップデートで更に詳細なヘッダをセットできるようになったようです！！

Amazon CloudFront adds additional geolocation headers for more granular geotargeting

アップデート内容

CloudFront のダイナミックコンテンツ機能で、ヘッダーをオリジンへ転送することができます。

Using the CloudFront HTTP headers - Amazon CloudFront

オリジンの任意のヘッダー情報以外にも CloudFront 側でクライアントの情報を独自に判定しオリジンに転送する カスタムヘッダー にも対応しています。これまで CloudFront のカスタムヘッダーとしては、以下がありました。

Type	Header	詳細
接続プロコル判定	CloudFront-Forwarded-Proto	HTTP もしくは HTTPS を設定
HTTP バージョン判定	CloudFront-Viewer-Http-Version	HTTP バージョンを設定
デバイス判定	CloudFront-Is-Android-Viewer CloudFront-Is-Desktop-Viewer CloudFront-Is-IOS-Viewer CloudFront-Is-Mobile-Viewer CloudFront-Is-SmartTV-Viewer CloudFront-Is-Tablet-Viewer	User-Agent をもとに、クライアントデバイスの情報を True/False で設定
地域判定	CloudFront-Viewer-Country	クライアントの IP アドレスをもとに、地域コードを設定 (ISO-3166-1 alpha-2 準拠)

今回のアップデートで新たに地域判定のカスタムヘッダーが追加され、閲覧者の IP アドレスに基づいて、国名、地域、都市、 郵便番号 、緯度、経度等をヘッダーとしてオリジンに送信することができるようになりました。

Type	Header	サンプル値
地域判定	CloudFront-Viewer-Country-Name	米国
	CloudFront-Viewer-Country-Region	MI
	CloudFront-Viewer-Country-Region-Name	ミシガン
	CloudFront-Viewer-City	アナーバー
	CloudFront-Viewer-Postal-Code	48105
	CloudFront-Viewer-Time-Zone	アメリカ/デトロイト
	CloudFront-Viewer-Latitude	42.30680
	CloudFront-Viewer-Longitude	-83.70590
	CloudFront-Viewer-Metro-Code	505

これらを利用することで例えば、視聴者の場所に合わせた広告を表示したり、同じ国でも異なる言語 (方言等) の HTML を返したりすることができます。

料金

新しく追加された地域判定のカスタムヘッダーは追加料金なしで利用することが可能です。

試してみる

早速試してみましょう。

事前準備

事前にオリジンに指定するための EC2 を 1 台準備しておきます。 EC2 には Apache と PHP をインストールし、以下ファイルをドキュメントルートに配置しています。これは、ヘッダー情報を表示するだけの PHP ファイルです。

 $value) {
    echo "$name: $value\n";
    echo "
";
}
?>

ちなみに、 CloudFront を通さず EC2 に直接アクセスした場合は以下が表示されます。

オリジンリクエストポリシー

まずは、カスタムヘッダーがオリジンに送信されるようにオリジンリクエストポリシーを作成します。 CloudFront の画面から Policies - Create origin request policy をクリックしましょう。ポリシー名を入力し、 Origin request contents の Headers で All Viewer headers and whitelisted CloudFront-* headers を選択し、オリジンに送信したい地域判定用のカスタムヘッダーを選んでいきます。選び終わったら、 Create origin request policy ボタンをクリックして作成します。

CloudFront ディストリビューションの作成

続いて CloudFront ディストリビューションの作成を行います。 Origin Settings では EC2 のパブリック DNS を設定し、あとはデフォルトのままとします。 Default Cache Behavior Settings の設定に移ります。基本はデフォルト設定のままですが、今回はキャッシュをさせないように Cache Policy で Managed-CachingDisabled を選んでいます。また、 Origin Request Policy で先ほど作成した Custom-Geolocation-Headers を選択します。他はデフォルト設定のままで Create Distribution ボタンをクリックして作成しましょう。しばらく経つと、ステータスが Deployed に変わりデプロイが完了します。

CloudFront 経由で Web ページにアクセスしてみる

デプロイができたので早速アクセスしてみましょう。 CloudFront のドメインをブラウザで開くと以下のような画面が表示されました。完全に正確な情報、までとはいかないですがおおよその位置が合っていてびっくりしました。埼玉や神奈川の同僚にも同様にクリックしてもらったのですが、同じような結果で結構精度が高いことがわかりました。