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
FastlyとfalcoでNode.jsレスな Webサーバー構築 : IPTV版 ABEMA...
Search
nodaguti
August 27, 2024
Technology
0
320
FastlyとfalcoでNode.jsレスな Webサーバー構築 : IPTV版 ABEMAアプリインフラ刷新 / Building web server using Fastly and falco without Node.js for IPTV ABEMA app
Muddy Web #9 の登壇資料です
https://cyberagent.connpass.com/event/325969/
nodaguti
August 27, 2024
Tweet
Share
More Decks by nodaguti
See All by nodaguti
専任チームで実現する継続的なWebパフォーマンス改善 / Continuous Web performance improvement realised by dedicated team
nodaguti
0
590
ABEMA Webブラウザ版をより高速で高信頼にするために / Towards more performant and reliable ABEMA
nodaguti
0
1.1k
明日から使えない廃止された Mozilla の JavaScript / Obsolete Features on Mozilla JS
nodaguti
0
36
AbemaTV 新卒1年目エンジニア実録 / My first year at AbemaTV
nodaguti
3
2.4k
Chrome チームの推すこれからくる新しい Web API / Upcoming Web APIs advocated by the Chrome team
nodaguti
5
1.1k
新卒研修でテストカバレッジ99%を達成した話 / HTML 5 Conference 2018 Sponsor's LT
nodaguti
0
740
Other Decks in Technology
See All in Technology
How CERN serves 1EB of data via FUSE
ennael
PRO
0
16k
All your memory are belong to… whom?
ennael
PRO
0
650
ADRを運用して3年経った僕らの現在地
onk
PRO
11
4.9k
【shownet.conf_】ShowNet x 宇宙ネットワーク
shownet
PRO
0
390
TypeScript x Raycast x AIで変える開発者体験
nagauta
0
190
Efficient zero-copy networking using io_uring
ennael
PRO
0
330
第45回 MLOps 勉強会 - ML Test Score を用いた機械学習システムの定量的なアセスメント
masatakashiwagi
3
300
それでもやっぱり ExpressRoute が好き!
skmkzyk
0
240
【shownet.conf_】ShowNet 2024 ~ Inter * Network ~
shownet
PRO
0
500
令和最新版 Perlコーディングガイド
anatofuz
4
3.5k
Oracle Database 23ai 新機能#4 Real Application Clusters
oracle4engineer
PRO
0
150
UE5の雑多なテク
ryuichikawano
0
370
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.7k
4 Signs Your Business is Dying
shpigford
180
21k
A Tale of Four Properties
chriscoyier
156
22k
Documentation Writing (for coders)
carmenintech
65
4.3k
Done Done
chrislema
181
16k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
What's in a price? How to price your products and services
michaelherold
243
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
38
2.1k
RailsConf 2023
tenderlove
28
840
GitHub's CSS Performance
jonrohan
1030
450k
How to train your dragon (web standard)
notwaldorf
87
5.6k
Transcript
AbemaTV, Inc. All Rights Reserved AbemaTV, Inc. All Rights Reserved
1 FastlyとfalcoでNode.jsレスな Webサーバーの構築 : IPTV版 ABEMAアプリのインフラ刷新 2024-08-27 Tadahiro Noguchi Muddy Web #9
AbemaTV, Inc. All Rights Reserved 野口 直寛 (Noguchi Tadahiro) 2018年新卒入社
株式会社AbemaTV Web-based TV チーム所属 Web 技術を使用したスマートテレビ (IPTV) 上で動く ABEMA アプリの 開発を行っています.特にパフォーマンスの改善を主務として担当し ています. 趣味は旅行,ダイビング,スキーです.最近北極に行きました. 2 Profile @nodaguti
AbemaTV, Inc. All Rights Reserved 3 1. ABEMA と IPTV
について 2. インフラ構成の問題点と解決策 3. Fastly と falco の導入 4. 導入の効果 5. 導入における muddy なできごと INDEX
AbemaTV, Inc. All Rights Reserved ABEMA と IPTV について 4
AbemaTV, Inc. All Rights Reserved ABEMA 紹介 5 テレビ ×
ビデオのハイブリッド型 24 時間 365 日完全編成型リニア配信と 見逃しや限定コンテンツを 登録不要で好きなタイミングに視聴できるビデオ配信を 楽しむことができます。 国内最大級のオリジナルエピソード数 オリジナルエピソード数は国内発の動画サービスで日本 No.1 ※ を誇り、 総エピソード数は常時約 30,000 本以上を配信しています。 ※ 2024 年 1 月時点、自社調べ 100%プロコンテンツ サイバーエージェントとテレビ朝日 それぞれの強みを活かした制作体制で 高品質なコンテンツを配信しています。 多彩なラインナップ 24 時間編成のニュース専門チャンネルをはじめ、 オリジナルのドラマや恋愛番組、アニメ、スポーツなど、 多彩なジャンルの約 20 チャンネルを 24 時間 365 日放送しています。
AbemaTV, Inc. All Rights Reserved ABEMA 紹介 6 複数デバイス対応・多彩なチャンネルラインナップ
AbemaTV, Inc. All Rights Reserved ABEMA 紹介 7
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
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/
AbemaTV, Inc. All Rights Reserved IPTV とは 10 • IP
(Internet Protocol) 技術を使ってビデオコ ンテンツをテレビへ提供する技術 • 日本では一般社団法人 IPTVフォーラムが IPTV サービスの仕様策定を行っている • IPTV サービスとして ABEMA を提供する ためのテレビ向けアプリケーション • ターゲットとなるテレビにはブラウザが搭載 されている IPTV版 ABEMA とは IPTV とは
AbemaTV, Inc. All Rights Reserved インフラ構成の問題点と解決策 11
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/画像
AbemaTV, Inc. All Rights Reserved 旧構成の問題点 13 • Node.js が直に露出していることによる運用コスト
◦ 負荷対策・セキュリティ対策 • Cloud Storage が直に露出していることによる運用コスト ◦ 負荷対策・セキュリティ対策 • パフォーマンス ◦ HTML / アセットが gzip 等で圧縮されていない ◦ Node.js の物理的位置が固定されている CDN を導入して解決を図ることにした
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 圧縮をできるため,ビルド設定を複雑にせずに改善可能 ◦ 地理的位置も最適なエッジサーバーが自動的に選択されるようになる
AbemaTV, Inc. All Rights Reserved 改善後の構成図 15 • クライアントからのリクエストを CDN
で受ける • CDN で静的ファイル出し分けのロ ジックを実行し,ファイルを返却 • キャッシュになければ Cloud Storage から取得して CDN 経由で返却 クライアント CDN Cloud Storage HTML/JS/CSS/画像 HTML/JS/CSS/画像 リクエスト リクエスト
AbemaTV, Inc. All Rights Reserved Fastly と falco の導入 16
AbemaTV, Inc. All Rights Reserved Fastly の選定 17 • すでに
Web Browser で Fastly の契 約があり,相乗り可能 • VCL でエッジにロジックを乗せられる ◦ Compute@Edge は契約なし • コードの正しさをどう担保するか ◦ 公式の自動テスト基盤がない ◦ ローカルで Fastly VCL を実行で きない ▪ ローカル環境では Node.js でロジックを再現する必要 がある 懸念点 Fastly 選定の理由
AbemaTV, Inc. All Rights Reserved 懸念点への対応 : falco の導入 18
• ysugimoto さんが個人で開発してい る Fastly VCL の開発補助ツール • 独自のパーサーを実装 • Linter, Formatter, Simulator, Debugger, Unit Testing, REPL falco とは
AbemaTV, Inc. All Rights Reserved 画像 19 https://speakerdeck.com/ysugimoto/getting-robust-vcl-with-falco ysugimoto さんによる
falco の紹介 @ Fastly User Meetup
AbemaTV, Inc. All Rights Reserved 20 https://github.com/fastly/vscode-fastly-vcl/ 公式提供の VSCode 拡張機能にも組み込まれている
AbemaTV, Inc. All Rights Reserved Unit Testing 21 サブルーチンごとにテストを書ける dev
/ prd 向けそれぞれにテストを実行
AbemaTV, Inc. All Rights Reserved Linting 22 ファイルごとに lint を実行
AbemaTV, Inc. All Rights Reserved Simulator を使ったローカルサーバーの構築 23 • falco
simulate で VCL を指定して 起動すると,レスポンスを受け付け てくれるようになる • override_backends で Cloud Storage をローカルの静的ファイル 配信に置き換える
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/画像 リクエスト リクエスト
AbemaTV, Inc. All Rights Reserved 導入の効果 25
AbemaTV, Inc. All Rights Reserved オリジンへのリクエスト減少 26 キャッシュヒット率 100%を達成
AbemaTV, Inc. All Rights Reserved パフォーマンスの向上 27 起動時間が 0.7秒短縮
AbemaTV, Inc. All Rights Reserved リリース手順の簡略化 28 • Node.js サーバーをデプロイする手順が不要になった
• 一回のリリースにかかる時間は30分から15分と半分に短縮
AbemaTV, Inc. All Rights Reserved 導入における muddy なできごと 29
AbemaTV, Inc. All Rights Reserved Fastly の VCL アップロードの仕組み構築の話 30
• VCL アップロードは公式で 4通りサポートされているが,どれも一長一短 ◦ Web UI ▪ 手作業が必要 ◦ Fastly CLI ▪ サービスバージョン管理や差分アップロードは自前で構築する必要あり ◦ Fastly API ▪ サービスバージョン管理や差分アップロードは自前で構築する必要あり ◦ Terraform Provider ▪ Terraform の運用が必要 • 今回は Fastly API を使って自前でアップロード用スクリプトを TS で作成した
AbemaTV, Inc. All Rights Reserved Fastly の VCL アップロードの仕組み構築の話 31
• npm に fastly パッケージがあり Fastly API をラップしてくれている ◦ https://www.npmjs.com/package/fastly • しかし ◦ 型がない ◦ GitHub Copilot でうまく補完してくれない ▪ メソッド名も引数も存在しないものを提案してくる ◦ 公式ドキュメントもパラメータの説明が不足している
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 互換に
AbemaTV, Inc. All Rights Reserved おわりに 33
AbemaTV, Inc. All Rights Reserved おわりに 34 • アプリケーションの静的生成と Fastly
導入 ◦ Node.js サーバーを廃止できた • falco のローカル環境導入 ◦ Fastly 上で動かす VCL と同じものをローカルで動かすことができる ◦ 安心してデプロイできる環境を構築できた • 一石三鳥の効果 ◦ パフォーマンス ◦ セキュリティ ◦ 開発生産性
AbemaTV, Inc. All Rights Reserved 中途採用再開しました! 35 https://hrmos.co/pages/cyberagent-group/jobs/16949
AbemaTV, Inc. All Rights Reserved