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.4k
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
5k
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
6
1.9k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
2.7k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.5k
Cloudflare Fonts試してみた🔤
aiji42
2
720
Hyperdrive試してみた🛸
aiji42
3
1.2k
Workers Browser Rendering API について
aiji42
0
480
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
840
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
5.5k
Other Decks in Technology
See All in Technology
Cloudflareで実現する AIエージェント ワークフロー基盤
kmd09
0
280
デジタルアイデンティティ人材育成推進ワーキンググループ 翻訳サブワーキンググループ 活動報告 / 20250114-OIDF-J-EduWG-TranslationSWG
oidfj
0
450
駆け出しリーダーとしての第一歩〜開発チームとの新しい関わり方〜 / Beginning Journey as Team Leader
kaonavi
0
120
Bring Your Own Container: When Containers Turn the Key to EDR Bypass/byoc-avtokyo2024
tkmru
0
840
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
12k
SpiderPlus & Co. エンジニア向け会社紹介資料
spiderplus_cb
0
860
AWSサービスアップデート 2024/12 Part3
nrinetcom
PRO
0
140
[IBM TechXchange Dojo]Watson Discoveryとwatsonx.aiでRAGを実現!座学①
siyuanzh09
0
110
.NET 最新アップデート ~ AI とクラウド時代のアプリモダナイゼーション
chack411
0
190
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
16k
CDKのコードレビューを楽にするパッケージcdk-mentorを作ってみた/cdk-mentor
tomoki10
0
200
三菱電機で社内コミュニティを立ち上げた話
kurebayashi
1
350
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
116
7.1k
Six Lessons from altMBA
skipperchong
27
3.6k
The Language of Interfaces
destraynor
155
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
19
2.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Rails Girls Zürich Keynote
gr2m
94
13k
GitHub's CSS Performance
jonrohan
1030
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
4 Signs Your Business is Dying
shpigford
182
22k
Raft: Consensus for Rubyists
vanstee
137
6.7k
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