[レポート] Lambda@Edgeによるコンテンツ配信のカスタマイズ #NET307 #reinvent 2019

AWS事業本部 梶原＠福岡オフィスです。 AWS re:Invent 2019に参加していました

このエントリではAWS re:Invent 2019で開催されていました。「Customizing content delivery with Lambda@Edge」ワークショップに参加しましたのでレポートします。
また、同セッションの資料もアップロードされておりましたので、以下のリンクからダウンロードできます。

NET307 PDF資料

ワークショップ概要

NET307 Customizing content delivery with Lambda@Edge https://www.portal.reinvent.awsevents.com/connect/sessionDetail.ww?SESSION_ID=95880

Join us for a hands-on session on using Lambda@Edge and Amazon CloudFront to deliver high performance and personalized experience to your internet users globally. Walk away with a working setup that combines Amazon S3, Amazon DynamoDB, and CloudFront with Lambda@Edge to build websites that are simultaneously hosted across AWS locations around the world. Learn how to extend application architecture for scale and performance. We show how to reduce origin costs by rendering web page content at the edge with open source libraries. We explore architecture, configuration, and DevOps with real examples of how AWS customers are using Lambda@Edge for their websites.

Lambda@EdgeとAmazon CloudFrontを使用した実践セッションに参加して、世界中のインターネットユーザーに高パフォーマンスとパーソナライズされたエクスペリエンスを提供してください。 Amazon S3、Amazon DynamoDB、CloudFrontとLambda@Edgeを組み合わせて、世界中のAWSの場所で同時にホストされるウェブサイトを構築する実用的なセットアップを行います。 スケールとパフォーマンスのためにアプリケーションアーキテクチャを拡張する方法を学びます。 オープンソースライブラリを使用してWebページコンテンツをエッジでレンダリングすることにより、オリジンコストを削減する方法を示します。 AWSのお客様がWebサイトにLambda@ Edgeをどのように使用しているかの実際の例を使用して、アーキテクチャ、構成、DevOpsについて説明します。

スピーカー

Lee Atkinson - Principal Solutions Architect, Amazon Web Services
Tal Shalom - Sr. Solutions Architect Edge Services, Amazon Web Services

レポート

アジェンダ

• ワークショップの概要
• CloudFront&Lambda@Edge
• Event Engine
• Workshop Labs
• 要約

ワークショップの概要

概要

宇宙人がやってきました。

• 課題
  • コミュニケーションに制限があります
  • 画像、ビデオ、短い文言を使用する必要があります
• ソリューション
  • 教育用Webサイトを作成します。
  • シンプルな教育カードを用います。次の項のAWSのサービスを使います

AWSのサービスを使用

• Amazon S3
  • Webサイトの静的ファイルを保存します
• Amazon DynamoDB
  • 可変データを保持します
• Amazon CloudFront
  • 高速、セキュアなコンテンツデリバリーサービス
• AWS Lambda@Edge
  • コンテンツをカスタマイズします

CloudFront&Lambda@Edge

CloudFront

CloudFrontの概要説明となりますの詳細割愛します。

• 世界中にエッジロケーションがあり、高速なコンテンツ配信を行えます
• 現在もエッジロケーションは増加しています

Lambda@Edge

Lambda@Edgeの概要説明となりますので詳細割愛します

• 4つのトリガーでLambda@Edgeは動作します
• Lambda@Edgeの仕組み
  • Origine へのアクセス
  • Origine からのレスポンスを生成

Event Engine

• AWS re:Inventでのワークショップ演習用に使用されるAWS環境の説明でしたので省略します

Workshop Labs (演習)

Lab 0 – Launch the Stack

• CloudFormationスタックを用いて、下記のAWSリソースを作成します
  • S3バケット
  • DynamoDBテーブル
  • IAMロール
  • CloudFrontディストリビューション

Lab 1 - Security

1. セキュリティチェックの実施
   • 作成したCloudFrontに対して、セキュリティチェックを実施しました
   • [F] 判定の状態
   • https://observatory.mozilla.org/
2. HTTPからHTTPSへのリダイレクトを設定
   • CloudFrontの設定を用いて、実施
3. Lambda関数の作成とテスト（セキュリティヘッダの付与)
   • Lambda関数を作成し、レスポンスに対して、セキュリティヘッダを付与する関数を作成します
   • Lambda関数にテストイベントを設定して、意図した結果となるか検証します
4. Lambda関数をCloudFrontにオリジンレスポンスとしてデプロイします

5. CloudFrontのキャッシュクリア

   • コンソールからCloudFrontのInvalidateを実施してクリアします
6. 検証
   • 下記コマンドを実施し、付与したセキュリティヘッダがレスポンスに含まれるか確認します
   • Mac(Linux)
     • curl --head https://d123.cloudfront.net
   • Windows(Powershell)
     • Invoke-WebRequest -Uri 'https://d123.cloudfront.net' -Method 'HEAD'
7. 再度セキュリティチェック
   • 再度セキュリティチェックを実施して[A+]判定となっていることを確認します
   • https://observatory.mozilla.org/

Lab 2 - Content Generation

1. Lambda関数の作成とテスト（コンテンツ生成）
   • Lambda関数を作成しします
     • 元となるJavascriptは提供されました
     • HTMLテンプレートの取得
     • 画像の取得
     • HTMLテンプレートの画像パスを置換します
     • 生成したHTMLを返す
   • テストイベントを設定して、意図した結果となるか検証します
2. Lambda関数をCloudFrontにオリジンリクエストとしてデプロイします(イベント以外はLab1と同様です)

3. CloudFrontのキャッシュクリア(Lab1と同様です)
4. 検証（ウェブサイトにアクセスして表示の確認を実施します）

Lab 3 - Simple API

• +1 ボタンに対応するAPIを作成します

1. 対応するビヘイビアの作成

   • PATH : /api/like
   • Method: POSTを含む
   • Query String Forwarding and Caching: Forward all, cache based on all
2. Lambda関数の作成とテスト（コンテンツ生成）
   • Lambda関数を作成しします
     • 元となるJavascriptは提供されました
     • リクエストからidを取得し、DynamoDB tableを更新します
   • ロールを付与します(DynamoDBの書込み可)
   • テストイベントを設定して、意図した結果となるか検証します
3. Lambda関数をCloudFrontにオリジンリクエストとしてデプロイします(ビヘイビア以外はLab2と同様です)

4. CloudFrontのキャッシュクリア(Lab1と同様です)
5. 検証
   • ウェブサイトにアクセスして+1ボタン(/api/like)を押下し、値が増えているか確認します

Lab 4 - Pretty URLs

• 分かりやすいURLに対応します

1.対応するビヘイビアの作成 - PATH : /r/*

1. Lambda関数の作成とテスト（コンテンツ生成）
   • Lambda関数を作成しします
     • 元となるJavascriptは提供されました
     • 分かりやすいURL(ex.tree)等が着た場合、リダイレクトするURLを返します
   • テストイベントを設定して、意図した結果となるか検証します
2. Lambda関数をCloudFrontにオリジンリクエストとしてデプロイします(ビヘイビア以外はLab2と同様です)

3. CloudFrontのキャッシュクリア(Lab1と同様です)
4. 検証
   • ウェブサイトにアクセスして/r/treeなどでアクセスします。

Lab 5 - Customization

• 端末を判別し（モバイルまたはデスクトップ）、対応するCSSを返します。

1. 対応するビヘイビアの作成

   • PATH : /css/*
   • Cache Based on Selected Request Headers : Whitelist
   • Whitelist Headers : CloudFront-Is-Desktop-Viewer
2. Lambda関数の作成とテスト（コンテンツ生成）
   • Lambda関数を作成しします
     • 元となるJavascriptは提供されました
     • CloudFront-Is-Desktop-Viewer がnot True (モバイルの場合)モバイル用のCSSにパスを置き換えます
   • テストイベントを設定して、意図した結果となるか検証します
3. Lambda関数をCloudFrontにオリジンリクエストとしてデプロイします(ビヘイビア以外はLab2と同様です)

4. CloudFrontのキャッシュクリア(Lab1と同様です)
5. 検証
   • ウェブサイトに携帯端末などからアクセスして表示を確認します

Extra Challenges

• 余力があれば挑戦してみてください
• CloudFront-Viewer-Country を使用して国ごとにカスタマイズしてみてください
• リージョンのDynamoDbを使用しているため、若干の遅延があります。DynamoDB Global Tableの使用を検討してみてください
• Lambda@EdgeのA/Bテストに興味がある場合は、調べてみてください
• Lambda@Edgeを用いたイメージのリサイズの実装
• Lambda@Edgeでの認証

まとめ

ワークショップではLambda@Edgeのサンプル実装が提供されていたので、特に疑問もなくスムーズに進めることができました。 それぞれの実習では少しづつ、トリガーや使用する機能に差があり、Lambda@Edgeでも柔軟にカスタマイズができそうな気がしており今後の対応にも活かせそうです。 CloudFormationのテンプレートなどはワークショップの時点では提供されていませんでしたが、わかりやすい構成なので、Extra Challenges含めて挑戦してみようと思います。