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
750
Other Decks in Technology
See All in Technology
KubeVirt Networking ONIC 2024
orimanabu
3
540
【shownet.conf_】持続可能な次世代Wi-Fi運用に向けて
shownet
PRO
0
360
I tried the newly introduced certification "Applied Skills" on Microsoft Learn
mappie_kochi
0
150
【shownet.conf_】ShowNet 2024 ~ Inter * Network ~
shownet
PRO
0
520
エムスリー全チーム紹介資料 / Introduction of M3 All Teams
m3_engineering
1
320
ゼロから実装まで!機械学習入門
natsuki0726
0
180
【shownet.conf_】3Dアプローチで守るセキュリティ
shownet
PRO
0
380
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
47k
Perlで始めるeBPF: 自作Loaderの作り方 / Getting started with eBPF in Perl_How to create your own Loader
takehaya
1
900
分析者起点の企画を成功させた連携面の工夫
lycorptech_jp
PRO
1
250
小さな勉強会の始め方、広げ方、あるいは友達の作り方 / How to Start, Grow, and Build Connections with Small Study Groups
ar_tama
6
2.7k
スタサプ ForSCHOOLアプリのシンプルな設計
recruitengineers
PRO
3
570
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Gamification - CAS2011
davidbonilla
80
5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Code Reviewing Like a Champion
maltzj
519
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing with Data
zakiwarfel
98
5.1k
What's new in Ruby 2.0
geeforr
341
31k
The Language of Interfaces
destraynor
154
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
31
2.3k
Practical Orchestrator
shlominoach
186
10k
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