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.6k
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.5k
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
7
2.3k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
2.9k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.6k
Cloudflare Fonts試してみた🔤
aiji42
2
790
Hyperdrive試してみた🛸
aiji42
3
1.4k
Workers Browser Rendering API について
aiji42
0
550
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
940
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
6k
Other Decks in Technology
See All in Technology
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
3.9k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
280
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.4k
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
440
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
220
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
600
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
640
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
1k
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
17
5.7k
Featured
See All Featured
Designing for Performance
lara
609
69k
Done Done
chrislema
184
16k
Automating Front-end Workflow
addyosmani
1370
200k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Writing Fast Ruby
sferik
628
62k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Why Our Code Smells
bkeepers
PRO
337
57k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Facilitating Awesome Meetings
lara
54
6.4k
Statistics for Hackers
jakevdp
799
220k
Making Projects Easy
brettharned
116
6.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