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

記事タイトルとURLをコピーする

はじめに

こんにちは、技術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 contentsHeadersAll 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 のドメインをブラウザで開くと以下のような画面が表示されました。 完全に正確な情報、までとはいかないですがおおよその位置が合っていてびっくりしました。 埼玉や神奈川の同僚にも同様にクリックしてもらったのですが、同じような結果で結構精度が高いことがわかりました。

おわりに

あまり見たことはないですが、今回のアップデートで視聴者の詳細な位置情報がわかるようになったので、熊本のユーザーだったら熊本弁でコンテンツを返すとか、大阪だったら大阪弁で返すとか、そんなユニークな体験を提供できそうですし、他にも色々と実用性があるのではないでしょうか。

この内容は 2020/7/29(水) 18:00 よりYouTube にて配信する「30分でわかる AWS UPDATE!」で取り上げますので、是非ご覧ください! チャンネル登録よろしくおねがいします!! サーバーワークス チャンネル - YouTube

参考