CloudFrontFunction ABテスト

下記イベントの投影スライドになります。

▼Serverless LT初心者向け LT大会 #54
https://serverlesslt.connpass.com/event/351923/

Transcript

1. ABテスト実装 CloudFront Functions + S3 構成 2025/5/14 Serverless LT　初心者 enumura（えぬむら）
2. 自己紹介 enumura（えぬむら） バックエンドエンジニア - GitHub ：enumura1 - conpass：enumura1 2
3. アジェンダ 1. ABテスト 2. AWSサービス 3. 構成 5. まとめ 4. 動画デモ 3
4. 今回のテーマ - テーマ：CloudFront Functionsを使ったABテスト - 結論： a. CloudFront Functionsでブラウザのセッション情報を指定 b. セッション情報をもとにアクセス先のページを切り替え c. アクセス先のページに GAを導入しアクセス解析 4
5. 1. ABテストとは？ 2つのパターン（パターン Aとパターン B）を比較して、どちらがより良 い成果を出すかを検証するテスト手法 ユーザーの反応を比較して、より効果的な Webページのデザイン やコンテンツを見つけること 目的 5
6. 1. ABテストとは？ バージョン A バージョン B クリック数： 20 クリック数： 100 6
7. 2. AWSサービス 7 cloudfront S3
8. 2. AWSサービス 8 - 安全で耐久性の高いオブジェクトス トレージサービス - 格納可能なデータの総量とオブ ジェクトの数は無制限 S3
9. 2. AWSサービス 9 cloudFront - Webコンテンツ (※1)の配信を高速 化するウェブサービス ※1：.html、.css、.js、画像など - 世界中のエッジロケーションを通じ てコンテンツを配信
10. 2. AWSサービス CloudFrontのエッジロケーション で実行される軽量な js関数 - 低レイテンシー： 1 (ms) の起動時間 - 高スケーラビリティ：毎秒数百万リクエストに対応 - 低コスト： 100万リクエスト $0.10 - 制限：メモリ 2 (mb)、実行時間 1 (ms) 10 CloudFront Functionとは？
11. 3. 構成（アーキテクチャ） 11 cloudFront Function S3 （オリジン） cloudFront Distribution ①リクエスト ②リクエスト ③リクエスト先の URIをA or Bを変更 ⑥レスポンス ・index-a.html ・index-b.html ⑤レスポンス ④ページを取得 ユーザ A B // ABテストのためのランダム振り分け（例： 50:50） const randomValue = Math.random(); const testGroup = randomValue < 0.5 ? 'A' : 'B';
12. 3. 構成（アーキテクチャ ver1） 12 cloudFront Function S3 （オリジン） cloudFront Distribution ①リクエスト ②リクエスト ③リクエスト先の URIをA or Bを変更 ⑥レスポンス ・index-a.html ・index-b.html ⑤レスポンス ④ページを取得 ユーザ A B リクエスト毎にユーザに表示されるページ内容が異なる request.uri = '/index-a.html'; or request.uri = '/index-b.html';
13. 3. 構成（アーキテクチャ ver1） 13 ユーザ A B 表示されるページ アクセス回数 1回目 2回目 同じセッションで連 続してアクセス ユーザ視点で見ると UX的によくない挙動 hoge.com hoge.com
14. 3. 構成（アーキテクチャ ver2） 14 cloudFront Function S3 cloudFront Distribution ・index-a.html ・index-b.html ①リクエスト ②リクエスト ③レスポンス （A or B のセッション情報を指定） ④レスポンス（ 302） ⑥リクエスト ＆レスポンス ⑤リダイレクト B A
15. 3. 構成（アーキテクチャ ver2） 15
16. 3. 構成（シーケンス図 ver2、初回） cloudFront Distribution ユーザ ①リクエスト ②リクエスト ③レスポンス S3 16 ④レスポンス（ 302） cloudFront Functions ⑤リクエスト ⑥レスポンス リダイレクト A or B 振り分け ・index-a.html ・index-b.html
17. 3. 構成（シーケンス図 ver2、2回目） cloudFront Distribution ユーザ S3 17 cloudFront Function ①リクエスト ②レスポンス ・index-a.html ・index-b.html A or B ブラウザのセッション 情報に保持しておいたもの
18. 4. 動作デモ 18
19. 5. まとめ 19 - 導入が容易： CloudFrontのコンソールで直接コード作成・テスト可能 - ユースケース： 静的ページの A/Bテスト、 　　　　　　　 ヘッダー、セッション情報操作など - スケーラブル： 自動的にスケール、高トラフィックに対応 - 高速・低コスト： エッジでの迅速な処理、低コストな実行
20. 2. まとめ Appendix 20
21. 21 CloudFront イベント処理フロー ユーザ Lambda@Edge オリジン （コンテンツの提供元） or CF Functions HTTPリクエスト ビューワーリクエスト オリジンリクエスト(※1) HTTPレスポンス オリジンレスポンス(※1) オリジンへ ビューワレスポンス cloudFront Distribution ※1：CF Functionsは実行不可
22. Lambda@Edge との違い 22 - CloudFront Functions Lambda@Edge プログラミング言語 JavaScript (ECMAScript 5.1 準拠) Node.js と Python イベントソース ビューワーリクエスト ビューワーレスポンス ビューワーリクエスト ビューワーレスポンス オリジンリクエスト オリジンレスポンス 関数の持続時間 サブミリ秒（1ミリ秒未満） 最大 5 秒 (ビューワーリクエスト、レスポンス) 最大 30 秒 (オリジンリクエスト、レスポンス) 詳細： CloudFront Functions と Lambda@Edge の違い
23. CF Function 、Lambda@Edge
24. 2. CloudFront Function の実装 24 1. CloudFront > 関数 > 関数を作成 2. 直接コード作成・テスト可能
25. 2. CloudFront Function の実装 25 3. ディストリビューションと紐づけ