AbemaTVブラウザ版のCDN移行とその活用

2018/07/24 クラウド時代のネットワーク最適化Forum 2018 夏｜日経 xTECH主催セミナー
https://project.nikkeibp.co.jp/event/xtechi180724/

1. AbemaTVブラウザ版のCDN移行とその活用 2018/07/24 クラウド時代のネットワーク最適化Forum 2018 夏｜日経 xTECH主催セミナー 加藤 賢一 @ktknest / 株式会社AbemaTV
2. プロフィール 加藤 賢一（Kato Kenichi）@ktknest 株式会社AbemaTV（株式会社サイバーエージェント） 開発本部 Webチーム フロントエンドエンジニア 2012.06 サイバーエージェントに中途入社 2017.06 AbemaTVに出向 ブラウザ版の開発、リリースマネージャーなどを担当 2
3. アジェンダ 3 • AbemaTVについて • 1. 負荷対策とCloud CDNの導入 • 2. SSR対応とFasltyの導入
4. AbemaTVについて 4
5. AbemaTV（アベマティーヴィー） “ 無料で楽しめるインターネットテレビ局 ” • サイバーエージェントとテレビ朝日が共同制作 • 最新ニュースやオリジナル番組を始め、様々な番組を無料で提供 ◦ 約20チャンネルを24時間365日放送 • Abemaビデオでは、過去放送の番組などの VODコンテンツも提供 5
6. 提供プラットフォーム • ブラウザ版 • Androidスマートフォン / タブレット • iPhone / iPad • テレビ ◦ Amazon Fire TV / Android TV / Apple TV / Google Cast • VRデバイス • スマートスピーカー VR 6
7. アクティブユーザー 7 出典: 2018年9月期第2四半期 決算説明会資料
8. システム構成 8 https://abema.tv 多数のマイクロサービスで構成 Web API 配信 ブラウザ アプリ テレビ Akamai 専用スタジオ 専用スタジオ
9. 1. 負荷対策とCloud CDNの導入 9
10. 開局から負荷対策実施（2017年末） まで 10 2016.04 AbemaTV開局 2017.04 Abemaビデオ リリース 2017.05 『亀田興毅に勝ったら1,000万円』放送 2017.09 『72時間ホンネテレビ』放送発表 2017.10 全システムで負荷対策を実施 2017.11 『72時間ホンネテレビ』放送
11. アクティブユーザー（おさらい） 11 出典: 2018年9月期第2四半期 決算説明会資料
12. サーバーダウンの反省から、 来る大型特番や年末年始の特番に備えて、 徹底的な負荷対策を実施。 12
13. 負荷対策の方針 • キャッシュ可能なもの、または改修によってキャッシュが可能になるものはCDNか らレスポンスを返すように変更 • CDNでのキャッシュヒット率を向上させる • 不要なリクエストの廃止 • 不要なタイミングでのリクエストを適切なタイミングに切り替える • 短いポーリング間隔でのリクエストは、間隔を調整 • 別のシステムに切り離せるものは、切り離してオフロード 13 ホンネテレビの負荷対策プロマネのホンネ https://developers.cyberagent.co.jp/blog/archives/12275/
14. CDNを活用した主な対策 • 動画配信のCDN利用を見直し • Webサーバーからの配信をCDN経由にする 14
15. • 配信方式はHLSとMPEG-DASHの2種類 • どちらも、プレイリストとセグメントの2種類のファイルを配信 ◦ プレイリスト: 再生すべきセグメントファイルを記述したもの ▪ デバイス種別や使用できる DRM技術によって、異なるファイルを配信 ▪ そのためCDNを利用できず ◦ セグメント: 動画の実体 ▪ CDN経由で配信 動画配信の概要（負荷対策前） 15 ＜前置き：動画配信の CDN利用を見直し＞ 配信 Akamai セグメント プレイリスト 動画
16. 動画配信のCDN利用を見直し 16 CDNを活用した主な対策 視聴数の多い番組ではリクエストがスパイクしてしまう... → プレイリストもCDN（Akamai）経由にする • プレイリストをCDN化するにあたり、ライセンス取得方法などを変更 • キャッシュパターンを整理し、CDNパラメータをチューニング • 視聴に関するメトリクスが得られなくなるため、別途APIで送信、等 ホンネテレビの負荷対策 -配信編 https://qiita.com/miyukki/items/65028f52765692d9cb98
17. Webサーバー構成（負荷対策前） 17 Cloud LB Kubernetes Engine Nginx Node.js https://abema.tv • GCP上に構築 • BFF（Backends For Frontends） ◦ Nginx → Node.js ＜前置き：Webサーバーからの配信を CDN経由にする＞
18. Webアプリケーション構成 18 • React + Fluxパターン • Single Page Application ※クローラーやSNSシェア向けに、 HTMLはページごとで出し分け デスクトップ モバイル デスクトップとモバイル別にHTML/CSS/JSを用意 ＜前置き：Webサーバーからの配信を CDN経由にする＞
19. Webサーバーからの配信をCDN経由にする Cloud CDNでキャッシュ/配信することで、リクエストを最小限にし負荷を減らす • GCP上のため、Cloud LBの設定で容易に導入可能 • UserAgentに関わらず同一の配信内容になるため、依存箇所を修正 19 CDNを活用した主な対策 Cloud LB Cloud CDN Kubernetes Engine Nginx Node.js https://abema.tv
20. ＼ システムキャパシティを5倍に拡大成功 ／ 20 その他、様々な対策も経て
21. 2. SSR対応とFasltyの導入 21
22. ブラウザ版のさらなる課題 数ある課題の中で、 • 巨大なSPAにより、初期表示時に時間がかかる ◦ ローディング画面の表示で、ある程度のユーザーストレス軽減は図っているが … • クローラーが正確にHTMLを認識できず、検索エンジンの評価にも影響 ◦ JSの実行結果まで解釈されるが、完全ではない より、 SSR対応を検討 22
23. WebアプリケーションにおけるSSR • Server Side Renderingの略称 • ブラウザ向けのJS実装を利用し、サーバー側で初期表示に必要なHTMLを生成 ◦ React / Angular / Vue.js などを、Node.jsで実行する • Single Page Applicationとの併用例が多い • サーバーへの負荷が高いため適切なキャッシュコントロールが必要 • 課題に対するメリット ◦ 初期表示用のHTMLが既に生成済みなので、素早く表示される ◦ クローラーなどのマシンリーダビリティが向上する 23
24. 一部のページからSSR対応 • 主要なコンテンツを対象に 24 トップページ ビデオ - シリーズ詳細 ビデオ - エピソード詳細
25. SSR化にあたっての課題 • デスクトップとモバイルで異なるHTMLやJS/CSSを配信したい ◦ Cloud CDNではVary: User-Agentによる条件分岐はできない ◦ SSR化するには、これが可能な CDNへの移行が必要になった デスクトップ モバイル 全く異なる 25
26. 負荷対策実施時点のAbemaTVとCDN Cloud LB Cloud CDN Kubernetes Engine Nginx Node.js https://abema.tv 26
27. Cloud LB Kubernetes Engine Nginx for Fastly Node.js https://abema.tv 現在のAbemaTVとCDN Fastly 27
28. Fastlyを選んだ理由 • 次世代CDNの豊富な機能 ◦ インスタントパージでキャッシュ即削除 ◦ Varnishベースのため、VCLで柔軟なカスタマイズができる ◦ HTTP/2 Server Push が使える • 社内での先行事例あり (https://www.superchoice.bet/) ◦ 各種設定を始め、VCLカスタムやノウハウを参考にできそう • 一度は使ってみたかった（チーム一同） ◦ とても大事！ 28
29. Fastly移行の課題 29
30. TLS 1.0/1.1 が利用できなくなる • AbemaTVの推奨環境で影響がないか確認 • Desktop / iOS 9+ / Android 5+ OK • Android 4.4 ◦ 標準ブラウザ NG → サポート外とする ◦ WebView(Chromium 30) OK FYI: Android4系端末のTLS1.1&1.2対応について https://qiita.com/ntsk/items/9f31fc7b44c04ea45e0b 30
31. UA別のキャッシュ振り分け • Varnish: 設定方法 • Varnish: UAやファイル種類に応じて識別ヘッダーをセット • Varnish: 識別ヘッダーをVaryヘッダーにセット • Node.js: 識別ヘッダーを使って内部の分岐に利用 31
32. Varnish: 設定方法 • FastlyではVCLを直接記述する方法が以下用意されている ◦ カスタムVCL: 独自のVCLファイルを作成することができる ◦ VCLスニペット: カスタムVCLを使わずに、小さなVCLロジックを挿入できる • AbemaTVではカスタムVCLを利用 ◦ 要件上は、VCLスニペットでも表現可能 ◦ Fastlyの全設定をTerraformを通して反映しており、 TerraformがVCLスニペット未対応 ◦ 今後の拡張性も考慮 UA別のキャッシュ振り分け 32
33. Varnish: UAやファイル種類に応じて識別ヘッダーをセット 公式のガイドをほぼそのまま使用 https://docs.fastly.com/guides/vcl/delivering-different-content-to-different-devices • X-UA-Device: desktop, tablet, smartphone, native, na • X-UA-Vendor: generic, apple, android, etc... 画像リソースなどは UA別にする必要がないので一律 X-UA-Device: na とする UA別のキャッシュ振り分け 33
34. Varnish: 識別ヘッダーをVaryヘッダーにセット UA別のキャッシュ振り分け Vary: …, X-UA-Device, X-UA-Vendor として、別々にキャッシュさせる 34
35. Node.js: 識別ヘッダーを使って内部の分岐に利用 UA別のキャッシュ振り分け - X-UA-Device, X-UA-Vendror が共にある場合 - デスクトップ or モバイルや、iOS or Android の判定に利用する - SSR結果を変え、Varyヘッダーによりキャッシュもそれぞれで行われる - X-UA-Device, X-UA-Vendror のどちらかがない場合 - リクエスト情報のUserAgentを見て判定を行う（従来通り） - 移行直前や切り戻しで、 Fastlyを経由しないケースにも対応するため 35
36. オリジンシールドによるヒット率の向上（未遂） • オリジンサーバーへのアクセスをシールドPOP経由にする仕組み ◦ エッジPOPからのリクエストはシールド POP経由になる • 但し、国内限定では目立った効果がないとのこと ◦ Fastly社からの設定レビューでアドバイスをもらう ◦ エッジサーバーが少ない故（日本では数箇所） ◦ 結果、無効にした https://docs.fastly.com/ja/guides/performance-tuning/shielding.html 36
37. オリジンサーバーの要件 • 従来のURL https://abema.tv とは別のURLで提供する ◦ https://abema.tv はFastly用になるため • 通常のアクセスはできないようにする ◦ 認証用のリクエストヘッダーを定義 ◦ FastlyのVarnish設定で、オリジンサーバーへのリクエスト時に追加する ◦ オリジンサーバー側でチェックし、無効な場合は 401を返す • Cloud CDNを無効にする ◦ 二重CDNにならないように 37
38. 稼働状態からの移行方法 • Cloud LBで従来のURLとオリジンサーバー用のURLを設定 ◦ ① 従来のURL: Cloud CDNを有効 - Nginx ◦ ② オリジンサーバー用の URL: Cloud CDNを無効 - Nginx for Fastly • https://abema.tv のDNS設定で、切り替え・切り戻しを行う ◦ GCP宛: ①で受け、Cloud CDN経由で配信する ◦ Fastly宛: Fastlyで受け、②からリソースを取得し、 Fastly経由で配信する 38
39. 現在のAbemaTVとCDN（詳細版 - Cloud CDN） Cloud LB Cloud CDN Kubernetes Engine Nginx Node.js Nginx for Fastly Fastly https://abema.tv 39
40. 現在のAbemaTVとCDN（詳細版 - Fastly） Cloud LB Cloud CDN Kubernetes Engine Nginx Node.js https://abema.tv Nginx for Fastly Fastly 認証用のリクエストヘッダーを付与 40
41. ＼ 無事に移行完了 ／ 41
42. 結果（SSR） 42 Before After
43. 43 Before SpeedCurveによる計測結果
44. 44 After SpeedCurveによる計測結果
45. 結果（SSR） • First Meaningful Paint（ユーザーに意味のある表示がされたタイミング）が大幅に短縮 ◦ 表示内容をブラウザで生成していたところ、キャッシュされた生成済み HTMLを配信するため • Start Render（初回レンダリング開始）などは増加 ◦ HTML自体は大きくなるため • First Interactive（操作が可能になるまで）Fully Loaded（全ての読み込み完了）は変化なし ◦ 最終的に必要なリソースや、処理は変化がないため 変化なし、増加した指標があるものの体感速度が大きく向上 45
46. 結果（Fastly） • キャッシュヒット率がAvg 90%以上 ◦ Cloud CDN時はAvg 95% ◦ キャッシュパターン増を考慮しても高め • 検証期間も問題なく経過 ◦ 切り替えから1週間ほど後、SSRを有効化 46
47. 今後の予定 • より細かい分類によるキャッシュの最適化 ◦ 課金プランごとに一部表記が異なる等 ▪ 現在のSSRはどちらにも対応できる形にし、 Clientで再描画を行っている 47 無料ユーザー 有料ユーザー Node.js Fastly Cookie: Premium=0 Vary: Status=Free Cookie: Premium=1 Vary: Status=Premium
48. 今後の予定 • ブラウザ毎の配信JSの最適化 ◦ サポート状況に合わせたファイルを配信する • HTTP/2 Server Pushの活用 ◦ JS/CSSファイルの先行キャッシュ • 切り戻し手段の再考 ◦ 現時点では、以前の構成にすぐ戻せる形にしている ◦ 普段使わないファイル群が残ったままになる ▪ メンテが煩雑化、いざ戻した際も動作が保証しきれない 48
49. まとめ • CDNの導入は恩恵が非常に大きい ◦ 動的に返していたものは、もちろん一工夫が必要 ◦ その過程で既存の問題を見直しや、課題や可能性の発見に繋がった • 複数の選択肢から最適なCDNが選べる ◦ AbemaTVブラウザ版でいえば、どちらもメリット /デメリットある • クライアントサイドのエンジニアでもCDNは近い存在に ◦ BFFやSSRの普及により、サーバーサイドにも関わる機会が増えている ◦ 同時にキャッシュ戦略も求められるように 49
50. ご清聴ありがとうございました 50 AbemaTVブラウザ版のCDN移行とその活用 2018/07/24 クラウド時代のネットワーク最適化Forum 2018 夏｜日経 xTECH主催セミナー 加藤 賢一 @ktknest / 株式会社AbemaTV