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.5k
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.3k
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
6
2.2k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
2.8k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.6k
Cloudflare Fonts試してみた🔤
aiji42
2
760
Hyperdrive試してみた🛸
aiji42
3
1.3k
Workers Browser Rendering API について
aiji42
0
520
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
910
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
5.8k
Other Decks in Technology
See All in Technology
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
160
バクラクの認証基盤の成長と現在地 / bakuraku-authn-platform
convto
4
690
watsonx.data上のベクトル・データベース Milvusを見てみよう/20250418-milvus-dojo
mayumihirano
0
120
Dynamic Reteaming And Self Organization
miholovesq
3
640
AIでめっちゃ便利になったけど、結局みんなで学ぶよねっていう話
kakehashi
PRO
1
380
地味にいろいろあった! 2025春のAmazon Bedrockアップデートおさらい
minorun365
PRO
1
440
【Oracle Cloud ウェビナー】ご希望のクラウドでOracle Databaseを実行〜マルチクラウド・ソリューション徹底解説〜
oracle4engineer
PRO
1
110
Oracle Cloud Infrastructure:2025年4月度サービス・アップデート
oracle4engineer
PRO
0
120
React ABC Questions
hirotomoyamada
0
540
【Λ(らむだ)】最近のアプデ情報 / RPALT20250422
lambda
0
120
より良い開発者体験を実現するために~開発初心者が感じた生成AIの可能性~
masakiokuda
0
210
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
250
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
760
Build your cross-platform service in a week with App Engine
jlugia
229
18k
How to train your dragon (web standard)
notwaldorf
90
6k
Visualization
eitanlees
146
16k
A designer walks into a library…
pauljervisheath
205
24k
Bash Introduction
62gerente
611
210k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
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