Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
Search
AijiUejima
April 21, 2023
Technology
6
1.7k
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
https://serverless-frontend.connpass.com/event/279964/
AijiUejima
April 21, 2023
Tweet
Share
More Decks by AijiUejima
See All by AijiUejima
エッジはフロントエンドなのか? バックエンドなのか? について考えてみる
aiji42
7
5.7k
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
7
2.6k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
3k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.7k
Cloudflare Fonts試してみた🔤
aiji42
2
830
Hyperdrive試してみた🛸
aiji42
3
1.5k
Workers Browser Rendering API について
aiji42
0
590
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
990
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
6.2k
Other Decks in Technology
See All in Technology
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
4.9k
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
380
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
240
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
350
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
250
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
620
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
210
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
530
Railsの話をしよう
yahonda
0
160
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
190
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
230
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
140
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
KATA
mclloyd
PRO
32
15k
GitHub's CSS Performance
jonrohan
1032
470k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Practical Orchestrator
shlominoach
190
11k
The Language of Interfaces
destraynor
162
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Embracing the Ebb and Flow
colly
88
4.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
RailsConf 2023
tenderlove
30
1.3k
Transcript
© 2023 Ateam Inc. VercelとNext.jsの機能を 最大限に活用したA/Bテスト手法 Serverless Frontend Meetup #2
© 2023 Ateam Inc. 自己紹介 Who am I ? Name:
Aiji Uejima Twitter: aiji42_dev Github: aiji42 株式会社エイチームライフデザイン 技術開発室所属 リードエンジニア 最近興味があるのはエッジランタイム。 2
© 2023 Ateam Inc. A/Bテストやってますか? 3
© 2023 Ateam Inc. A/Bテストの概要 機能やデザインなどを出し分け、どちらが優れているかを検証する手法 4 A B VS
© 2023 Ateam Inc. Next.jsでA/Bテストする時ってどうしてる? 5
© 2023 Ateam Inc. Next.jsでのA/Bテストのやり方 コンポーネントベース(クライアントサイド) レンダリング時に何らかのロジックを使って、オリジナル(A)とチャレンジャー(B)を出し分ける ※Cookie等でA/Bどちらに振ったかをスティッキー(固定化)する必要が別途必要 6
© 2023 Ateam Inc. チャレンジャー(B)のコードが バンドルされてしまう 7
© 2023 Ateam Inc. チャレンジャー(B)用のページファイルを複製しておいて、Next.js v12から導入されたmiddlewareでパスをリライトする。 Next.jsでのA/Bテストのやり方 ルーティングベース(ファイルシステム) 8 /pages/foo.tsx
/pages/foo-2.tsx middleware.ts でパスをリライト h"ps://exmple.dev/foo
© 2023 Ateam Inc. 一見良さそうだが ページを複製して管理する必要がある 9
© 2023 Ateam Inc. A/Bテストの課題あるある 10
© 2023 Ateam Inc. 動いているのか動いていないのか 不明なチャレンジャーコードがいつまでも残る🫥 11
© 2023 Ateam Inc. 振り分けを考慮しないといけないので テストが複雑になる🤯 12
© 2023 Ateam Inc. このようにチャレンジャーが ブランチ内で共存すると管理が煩雑になっていく 13
© 2023 Ateam Inc. このようにチャレンジャーが ブランチ内で共存すると管理が煩雑になっていく 14
© 2023 Ateam Inc. ブランチ・デプロイベースでA/Bテストしよう🚀 15
© 2023 Ateam Inc. ブランチベースのA/Bテスト オリジナルとチャレンジャーのブランチを分けてA/Bする 16 origin/main origin/challenger-1
© 2023 Ateam Inc. ブランチベースのA/Bテスト オリジナルとチャレンジャーのブランチを分けてA/Bする 17 https://exmple.dev/foo
© 2023 Ateam Inc. こうすればチャレンジャーのコードが mainブランチに紛れることは一切ない 18
© 2023 Ateam Inc. 結果が良ければブランチをマージ 結果が悪ければブランチを破棄 19
© 2023 Ateam Inc. テストもそれぞれで独立してできるので 振り分けを考慮しなくて良い 20
© 2023 Ateam Inc. どうやって 別ブランチのリソースにアクセスさせれば…?🧐 21
© 2023 Ateam Inc. Vercelには プレビューデプロイがあるじゃないか💡 22
© 2023 Ateam Inc. 23 通常通りオリジナルをVercelにデプロイする deploy🚀 example.vercel.app
© 2023 Ateam Inc. 24 続いてチャレンジャー用のブランチを切って開発する example.vercel.app example.vercel.app
© 2023 Ateam Inc. 25 プッシュした途端にVercelでプレビューデプロイが始まる deploy🚀 example.vercel.app example.vercel.app example-b.vercel.app
© 2023 Ateam Inc. 26 プロダクション(main)のドメインにアクセスしたときに... example.vercel.app example.vercel.app example-b.vercel.app (preview)
© 2023 Ateam Inc. 27 middlewareでインターセプトして... example.vercel.app example.vercel.app example-b.vercel.app (preview)
© 2023 Ateam Inc. 28 A/Bで振り分けてプレビューデプロイ用のドメインにプロキシする example.vercel.app example.vercel.app example-b.vercel.app (preview)
middleware内でのリライトはクロスオリジンに対しても可能
© 2023 Ateam Inc. 気をつけなければいけないポイント 29
© 2023 Ateam Inc. ①アセットとNextImageのオリジン 30
© 2023 Ateam Inc. チャレンジャー用のアセットはオリジナルのドメインにリクエストしても存在しない (ハッシュが付与されるので同一のアセットは存在しない) チャレンジャーのオリジンに直接リクエストしなければならない 31 アセットは直接チャレンジャーのオリジンにリクエストさせなければならない example.vercel.app
example.vercel.app example-b.vercel.app (preview) /_next/static/chunks/pages/_app-bbb.js ❌ ⭕ /_next/staBc/chunks/pages/_app-bbb.js _app-aaa.js _app-bbb.js Current is B
© 2023 Ateam Inc. 32 next.config.jsでアセットのオリジンを指定してやる
© 2023 Ateam Inc. ②ナビゲーション 33
© 2023 Ateam Inc. 34 A/Bテスト対象外ページから対象内ページへのナビゲーションを考える /top /foo A/Bテスト対象外 A/Bテスト対象内
© 2023 Ateam Inc. Next.jsではナビゲート時にナビゲート先のドキュメントをフルでリクエストするのではなく、 ナビゲート先のページで使用するprops(json)をプリフェッチすることで高速にナビゲートしている。 35 Next.jsのナビゲーションに関して /_next/data/xxxxxx/foo.json example.vercel.app
example.vercel.app
© 2023 Ateam Inc. 36 A/Bテスト対象外ページから対象内ページへのナビゲーションするときの問題 /_next/data/hash-for-origin/foo.json example.vercel.app example.vercel.app 🍪(challenger)
🚫 チャレンジャー用のクッキーを持っているので オリジナルのJSONは返却してはいけない example-b.vercel.app (preview) ❌ マニフェストファイルに従ってJSONをリクエスト するため、振り分けによらずオリジナルが要求される ハッシュが異なるのでチャレンジャーに プロキシしてもファイルは見つからない
© 2023 Ateam Inc. 37 A/Bテスト対象外ページから対象内ページへのナビゲーションするときの問題への対処 /_next/data/aaaa/foo.json example.vercel.app example.vercel.app 🍪(challenger)
代わりに https://example-b.vercel.app/foo への リダイレクトステータスを返すとチャレンジャーへナビゲートされる
© 2023 Ateam Inc. ここまでの話を踏まえると next.config.js と middleware が カオスになりそう...😫
38
© 2023 Ateam Inc. いろいろめんどくさいので ライブラリを作った✌ 39
© 2023 Ateam Inc. 40 next-with-split https://github.com/aiji42/next-with-split
© 2023 Ateam Inc. 実演🧪 41
© 2023 Ateam Inc. 42 next-with-split - スティッキーセッションの期間の調整 - A/B/C/…テスト
- 振り分け率の調整 実演では紹介しなかった機能 今後のアップデート - Vercel Edge Configとの連携 - デプロイしなくてもA/Bテストの開始・停止や設定等を調整できるように
© 2023 Ateam Inc. A/Bテストの管理が面倒だなーと感じている人は ぜひ使ってみてください✌ 43
© 2023 Ateam Inc. Bye👋 44
None