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
2k
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
490
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
840
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
5.5k
Other Decks in Technology
See All in Technology
今年一年で頑張ること / What I will do my best this year
pauli
1
220
KMP with Crashlytics
sansantech
PRO
0
240
30分でわかる「リスクから学ぶKubernetesコンテナセキュリティ」/30min-k8s-container-sec
mochizuki875
3
450
Goで実践するBFP
hiroyaterui
1
120
自社 200 記事を元に整理した読みやすいテックブログを書くための Tips 集
masakihirose
2
330
新卒1年目、はじめてのアプリケーションサーバー【IBM WebSphere Liberty】
ktgrryt
0
130
2024年活動報告会(人材育成推進WG・ビジネスサブWG) / 20250114-OIDF-J-EduWG-BizSWG
oidfj
0
230
2025年に挑戦したいこと
molmolken
0
160
20250116_自部署内でAmazon Nova体験会をやってみた話
riz3f7
1
100
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
16k
dbtを中心にして組織のアジリティとガバナンスのトレードオンを考えてみた
gappy50
0
280
RubyでKubernetesプログラミング
sat
PRO
4
160
Featured
See All Featured
BBQ
matthewcrist
85
9.4k
GitHub's CSS Performance
jonrohan
1030
460k
GraphQLとの向き合い方2022年版
quramy
44
13k
Optimizing for Happiness
mojombo
376
70k
How to train your dragon (web standard)
notwaldorf
89
5.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
360
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
The Language of Interfaces
destraynor
155
24k
Code Reviewing Like a Champion
maltzj
521
39k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
960
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