Tweet
Tweet

Slide 1

Slide 1 text

© 2023 Ateam Inc. VercelとNext.jsの機能を 最大限に活用したA/Bテスト手法 Serverless Frontend Meetup #2

Slide 2

Slide 2 text

© 2023 Ateam Inc. 自己紹介 Who am I ? Name: Aiji Uejima Twitter: aiji42_dev Github: aiji42 株式会社エイチームライフデザイン 技術開発室所属 リードエンジニア 最近興味があるのはエッジランタイム。 2

Slide 3

Slide 3 text

© 2023 Ateam Inc. A/Bテストやってますか？ 3

Slide 4

Slide 4 text

© 2023 Ateam Inc. A/Bテストの概要 機能やデザインなどを出し分け、どちらが優れているかを検証する手法 4 A B VS

Slide 5

Slide 5 text

© 2023 Ateam Inc. Next.jsでA/Bテストする時ってどうしてる？ 5

Slide 6

Slide 6 text

© 2023 Ateam Inc. Next.jsでのA/Bテストのやり方 コンポーネントベース(クライアントサイド) レンダリング時に何らかのロジックを使って、オリジナル(A)とチャレンジャー(B)を出し分ける ※Cookie等でA/Bどちらに振ったかをスティッキー(固定化)する必要が別途必要 6

Slide 7

Slide 7 text

© 2023 Ateam Inc. チャレンジャー(B)のコードが バンドルされてしまう 7

Slide 8

Slide 8 text

© 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

Slide 9

Slide 9 text

© 2023 Ateam Inc. 一見良さそうだが ページを複製して管理する必要がある 9

Slide 10

Slide 10 text

© 2023 Ateam Inc. A/Bテストの課題あるある 10

Slide 11

Slide 11 text

© 2023 Ateam Inc. 動いているのか動いていないのか 不明なチャレンジャーコードがいつまでも残る🫥 11

Slide 12

Slide 12 text

© 2023 Ateam Inc. 振り分けを考慮しないといけないので テストが複雑になる🤯 12

Slide 13

Slide 13 text

© 2023 Ateam Inc. このようにチャレンジャーが ブランチ内で共存すると管理が煩雑になっていく 13

Slide 14

Slide 14 text

© 2023 Ateam Inc. このようにチャレンジャーが ブランチ内で共存すると管理が煩雑になっていく 14

Slide 15

Slide 15 text

© 2023 Ateam Inc. ブランチ・デプロイベースでA/Bテストしよう🚀 15

Slide 16

Slide 16 text

© 2023 Ateam Inc. ブランチベースのA/Bテスト オリジナルとチャレンジャーのブランチを分けてA/Bする 16 origin/main origin/challenger-1

Slide 17

Slide 17 text

© 2023 Ateam Inc. ブランチベースのA/Bテスト オリジナルとチャレンジャーのブランチを分けてA/Bする 17 https://exmple.dev/foo

Slide 18

Slide 18 text

© 2023 Ateam Inc. こうすればチャレンジャーのコードが mainブランチに紛れることは一切ない 18

Slide 19

Slide 19 text

© 2023 Ateam Inc. 結果が良ければブランチをマージ 結果が悪ければブランチを破棄 19

Slide 20

Slide 20 text

© 2023 Ateam Inc. テストもそれぞれで独立してできるので 振り分けを考慮しなくて良い 20

Slide 21

Slide 21 text

© 2023 Ateam Inc. どうやって 別ブランチのリソースにアクセスさせれば…？🧐 21

Slide 22

Slide 22 text

© 2023 Ateam Inc. Vercelには プレビューデプロイがあるじゃないか💡 22

Slide 23

Slide 23 text

© 2023 Ateam Inc. 23 通常通りオリジナルをVercelにデプロイする deploy🚀 example.vercel.app

Slide 24

Slide 24 text

© 2023 Ateam Inc. 24 続いてチャレンジャー用のブランチを切って開発する example.vercel.app example.vercel.app

Slide 25

Slide 25 text

© 2023 Ateam Inc. 25 プッシュした途端にVercelでプレビューデプロイが始まる deploy🚀 example.vercel.app example.vercel.app example-b.vercel.app

Slide 26

Slide 26 text

© 2023 Ateam Inc. 26 プロダクション(main)のドメインにアクセスしたときに... example.vercel.app example.vercel.app example-b.vercel.app (preview)

Slide 27

Slide 27 text

© 2023 Ateam Inc. 27 middlewareでインターセプトして... example.vercel.app example.vercel.app example-b.vercel.app (preview)

Slide 28

Slide 28 text

© 2023 Ateam Inc. 28 A/Bで振り分けてプレビューデプロイ用のドメインにプロキシする example.vercel.app example.vercel.app example-b.vercel.app (preview) middleware内でのリライトはクロスオリジンに対しても可能

Slide 29

Slide 29 text

© 2023 Ateam Inc. 気をつけなければいけないポイント 29

Slide 30

Slide 30 text

© 2023 Ateam Inc. ①アセットとNextImageのオリジン 30

Slide 31

Slide 31 text

© 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

Slide 32

Slide 32 text

© 2023 Ateam Inc. 32 next.config.jsでアセットのオリジンを指定してやる

Slide 33

Slide 33 text

© 2023 Ateam Inc. ②ナビゲーション 33

Slide 34

Slide 34 text

© 2023 Ateam Inc. 34 A/Bテスト対象外ページから対象内ページへのナビゲーションを考える /top /foo A/Bテスト対象外 A/Bテスト対象内

Slide 35

Slide 35 text

© 2023 Ateam Inc. Next.jsではナビゲート時にナビゲート先のドキュメントをフルでリクエストするのではなく、 ナビゲート先のページで使用するprops(json)をプリフェッチすることで高速にナビゲートしている。 35 Next.jsのナビゲーションに関して /_next/data/xxxxxx/foo.json example.vercel.app example.vercel.app

Slide 36

Slide 36 text

© 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をリクエスト するため、振り分けによらずオリジナルが要求される ハッシュが異なるのでチャレンジャーに プロキシしてもファイルは見つからない

Slide 37

Slide 37 text

© 2023 Ateam Inc. 37 A/Bテスト対象外ページから対象内ページへのナビゲーションするときの問題への対処 /_next/data/aaaa/foo.json example.vercel.app example.vercel.app 🍪(challenger) 代わりに https://example-b.vercel.app/foo への リダイレクトステータスを返すとチャレンジャーへナビゲートされる

Slide 38

Slide 38 text

© 2023 Ateam Inc. ここまでの話を踏まえると next.config.js と middleware が カオスになりそう...😫 38

Slide 39

Slide 39 text

© 2023 Ateam Inc. いろいろめんどくさいので ライブラリを作った✌ 39

Slide 40

Slide 40 text

© 2023 Ateam Inc. 40 next-with-split https://github.com/aiji42/next-with-split

Slide 41

Slide 41 text

© 2023 Ateam Inc. 実演🧪 41

Slide 42

Slide 42 text

© 2023 Ateam Inc. 42 next-with-split - スティッキーセッションの期間の調整 - A/B/C/…テスト - 振り分け率の調整 実演では紹介しなかった機能 今後のアップデート - Vercel Edge Configとの連携 - デプロイしなくてもA/Bテストの開始・停止や設定等を調整できるように

Slide 43

Slide 43 text

© 2023 Ateam Inc. A/Bテストの管理が面倒だなーと感じている人は ぜひ使ってみてください✌ 43

Slide 44

Slide 44 text

© 2023 Ateam Inc. Bye👋 44

Slide 45

Slide 45 text

No content