レスポンスの HTML をキャッシュしている環境でABテストを行いたい
ただ、何も考えずにオリジンサーバーで表示パターンを切り替えると、ABのどちらか 1 つが CDN Edge にキャッシュされてしまうので、キャッシュ期限が切れるまで固定化されてしまう
そこでCDN環境下でのテストを考える
参考にする記事はこちら zenn.dev
CSR による AB テストはやらない
SEOを重視しているため LCP (Largest Contentful Paint)の劣化は避けたい、かつ、なるべく高速に表示させたい
CSRの場合は、JavaScript が動くまでどちかのパターンを決めることができないのでこれらが損なわれる可能性がある
単一 URL に対して複数キャッシュを作る
特になにもしない場合のCDN環境では、単一URLに対して単一のキャッシュになってしまうのでABテストができない
そこで記事にあるように、Vary ヘッダーという HTTP ヘッダーを使えば、単一 URL に対して複数キャッシュを生成することを考える
幸いにもFastlyを使っているのでVary ヘッダーが使える
Vary: <header-name>, <header-name>, ...
<header-name> にレスポンスを区別するリクエストヘッダー名を指定する
カスタムリクエストヘッダーを用意する
レスポンスを区別するカスタムリクエストヘッダーをつくる
記事を参考にするとFastlyで振り分けがよさそう
Fastlyでの振り分けにはVLCを使う
参考になるドキュメント
実際のVLCは別日にまとめる
他参考
あわせて確認したいスライド https://speakerdeck.com/shqld/yamagoya2020
