FastlyとfalcoでNode.jsレスな Webサーバー構築 : IPTV版 ABEMAアプリインフラ刷新 / Building web server using Fastly and falco without Node.js for IPTV ABEMA app

Slide 1

Slide 1 text

Slide 2

Slide 2 text

AbemaTV, Inc. All Rights Reserved  野口直寛 (Noguchi Tadahiro) 2018年新卒入社株式会社AbemaTV Web-based TV チーム所属 Web 技術を使用したスマートテレビ (IPTV) 上で動く ABEMA アプリの開発を行っています．特にパフォーマンスの改善を主務として担当しています．趣味は旅行，ダイビング，スキーです．最近北極に行きました． 2 Profile @nodaguti

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

AbemaTV, Inc. All Rights Reserved  ABEMA 紹介 5 テレビ × ビデオのハイブリッド型 24 時間 365 日完全編成型リニア配信と見逃しや限定コンテンツを登録不要で好きなタイミングに視聴できるビデオ配信を楽しむことができます。国内最大級のオリジナルエピソード数オリジナルエピソード数は国内発の動画サービスで日本 No.1 ※ を誇り、総エピソード数は常時約 30,000 本以上を配信しています。 ※ 2024 年 1 月時点、自社調べ 100%プロコンテンツサイバーエージェントとテレビ朝日それぞれの強みを活かした制作体制で高品質なコンテンツを配信しています。多彩なラインナップ 24 時間編成のニュース専門チャンネルをはじめ、オリジナルのドラマや恋愛番組、アニメ、スポーツなど、多彩なジャンルの約 20 チャンネルを 24 時間 365 日放送しています。

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

AbemaTV, Inc. All Rights Reserved  IPTV とは 8 大きく4種類に分類できる ABEMA 対応のテレビデバイス ※1 ● ソニー BRAVIA ● シャープ AQUOS ● パナソニックビエラ / プライベート・ビエラ / 4KDIGA ● 三菱電機 REAL ● 船井電機 FUNAI ● Hisense ● 東芝 REGZA ● TCL ● アイリスオーヤマ LUCA ● Fire TV ● Apple TV ● Chromecast ※1: https://help.abema.tv/hc/ja/articles/360013743211 ● Web-based TV ○ Linux を搭載し，Web 技術を使ってアプリケーションを構築できるテレビ ● Android-based TV ○ Android OS を搭載し，Android 技術を使ってアプリケーションを開発できるテレビ ● Apple TV ● Chromecast

Slide 9

Slide 9 text

AbemaTV, Inc. All Rights Reserved  Panasonic の開発者向けサイトでは， IPTV App を Panasonic の HTML5 SDK を使って開発可能であると読み取れる記述がある Panasonic サイトには HTML5 / IPTV の文字 IPTV とは 9 (株)ACCESS が開発している Webkit / Chromium ベースのブラウザ NetFront Browser が搭載されている Web-based TV はブラウザを搭載 REGZA X9400 取扱説明書より引用 https://www.regza.com/tv/lineup/x9400 https://developer.vieraconnect.com/

Slide 10

Slide 10 text

AbemaTV, Inc. All Rights Reserved  IPTV とは 10 ● IP (Internet Protocol) 技術を使ってビデオコンテンツをテレビへ提供する技術 ● 日本では一般社団法人 IPTVフォーラムが IPTV サービスの仕様策定を行っている ● IPTV サービスとして ABEMA を提供するためのテレビ向けアプリケーション ● ターゲットとなるテレビにはブラウザが搭載されている IPTV版 ABEMA とは IPTV とは

Slide 11

Slide 11 text

Slide 12

Slide 12 text

AbemaTV, Inc. All Rights Reserved  改善前の構成図 12 ● クライアントからのリクエストを Node.js で受ける ● Node.js は HTML を動的生成して返却 ● HTML には Cloud Storage の URL で JS/CSS/画像のアセットが記載される ● クライアントはアセットを Cloud Storage から直接取得してアプリを起動するクライアント Node.js Cloud Storage リクエスト HTML JS/CSS/画像

Slide 13

Slide 13 text

AbemaTV, Inc. All Rights Reserved  旧構成の問題点 13 ● Node.js が直に露出していることによる運用コスト ○ 負荷対策・セキュリティ対策 ● Cloud Storage が直に露出していることによる運用コスト ○ 負荷対策・セキュリティ対策 ● パフォーマンス ○ HTML / アセットが gzip 等で圧縮されていない ○ Node.js の物理的位置が固定されている CDN を導入して解決を図ることにした

Slide 14

Slide 14 text

AbemaTV, Inc. All Rights Reserved  問題点の解消 14 ● Node.js が直に露出していることによる運用コスト ○ 動的生成していた HTML は，実は事前に静的ビルドできた ○ アプリ全体を静的生成して Cloud Storage から配信することで Node.js をなくせる ○ 動的生成部分のロジックは CDN のエッジで処理し，ファイルの出し分けを行う ● Cloud Storage が直に露出していることによる運用コスト ○ 前段に CDN を置くことで quota に抵触するリスクを排除 ○ Cloud Storage は private object にして CDN 以外からアクセスできないようにする ● パフォーマンス ○ CDN で透過的に gzip/br 圧縮をできるため，ビルド設定を複雑にせずに改善可能 ○ 地理的位置も最適なエッジサーバーが自動的に選択されるようになる

Slide 15

Slide 15 text

AbemaTV, Inc. All Rights Reserved  改善後の構成図 15 ● クライアントからのリクエストを CDN で受ける ● CDN で静的ファイル出し分けのロジックを実行し，ファイルを返却 ● キャッシュになければ Cloud Storage から取得して CDN 経由で返却クライアント CDN Cloud Storage HTML/JS/CSS/画像 HTML/JS/CSS/画像リクエストリクエスト

Slide 16

Slide 16 text

Slide 17

Slide 17 text

AbemaTV, Inc. All Rights Reserved  Fastly の選定 17 ● すでに Web Browser で Fastly の契約があり，相乗り可能 ● VCL でエッジにロジックを乗せられる ○ Compute@Edge は契約なし ● コードの正しさをどう担保するか ○ 公式の自動テスト基盤がない ○ ローカルで Fastly VCL を実行できない ■ ローカル環境では Node.js でロジックを再現する必要がある懸念点 Fastly 選定の理由

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

AbemaTV, Inc. All Rights Reserved  ローカル環境の構成図 24 ● Fastly を falco でシミュレート ● Cloud Storage を http-server でシミュレート ● http-server で max-age=0 を指定して，falco のキャッシュを無効化して Hot Reload が効くようにするクライアント falco http-server HTML/JS/CSS/画像 HTML/JS/CSS/画像リクエストリクエスト

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

AbemaTV, Inc. All Rights Reserved  Fastly の VCL アップロードの仕組み構築の話 30 ● VCL アップロードは公式で 4通りサポートされているが，どれも一長一短 ○ Web UI ■ 手作業が必要 ○ Fastly CLI ■ サービスバージョン管理や差分アップロードは自前で構築する必要あり ○ Fastly API ■ サービスバージョン管理や差分アップロードは自前で構築する必要あり ○ Terraform Provider ■ Terraform の運用が必要 ● 今回は Fastly API を使って自前でアップロード用スクリプトを TS で作成した

Slide 31

Slide 31 text

AbemaTV, Inc. All Rights Reserved  Fastly の VCL アップロードの仕組み構築の話 31 ● npm に fastly パッケージがあり Fastly API をラップしてくれている ○ https://www.npmjs.com/package/fastly ● しかし ○ 型がない ○ GitHub Copilot でうまく補完してくれない ■ メソッド名も引数も存在しないものを提案してくる ○ 公式ドキュメントもパラメータの説明が不足している

Slide 32

Slide 32 text

AbemaTV, Inc. All Rights Reserved  Fastly から GCS private object へ接続する方法の話 32 ● Fastly のドキュメントに HMAC key を使って認証を行う方法が書かれている ○ https://docs.fastly.com/en/guides/google-cloud-storage ● 認証方式の違い ○ HMAC v2 と v4 がある ○ Fastly は v2 メイン，Cloud Storage は v4 メインで解説していて微妙に情報が噛み合わない ● AWS 互換モード ○ Fastly のドキュメントをそのまま適用すると AWS S3 互換モードとなる ○ Cloud Storage から返ってくるヘッダーが X-Amz-Meta- など AWS 互換に

Slide 33

Slide 33 text

Slide 34

Slide 34 text

AbemaTV, Inc. All Rights Reserved  おわりに 34 ● アプリケーションの静的生成と Fastly 導入 ○ Node.js サーバーを廃止できた ● falco のローカル環境導入 ○ Fastly 上で動かす VCL と同じものをローカルで動かすことができる ○ 安心してデプロイできる環境を構築できた ● 一石三鳥の効果 ○ パフォーマンス ○ セキュリティ ○ 開発生産性

Slide 35

Slide 35 text

Slide 36

Slide 36 text