Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
1
400
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
ABEMA スマートテレビアプリケーションのパフォーマンス改善 〜業界トップクラスを目指して〜 / Performance Improvements on ABEMA Smart TV App
nodaguti
0
98
専任チームで実現する継続的なWebパフォーマンス改善 / Continuous Web performance improvement realised by dedicated team
nodaguti
0
620
ABEMA Webブラウザ版をより高速で高信頼にするために / Towards more performant and reliable ABEMA
nodaguti
0
1.1k
明日から使えない廃止された Mozilla の JavaScript / Obsolete Features on Mozilla JS
nodaguti
0
45
AbemaTV 新卒1年目エンジニア実録 / My first year at AbemaTV
nodaguti
3
2.5k
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
760
Other Decks in Technology
See All in Technology
農業用ダム監視を目的とした衛星SAR 干渉解析の適用性について
osgeojp
0
190
日本全国・都市3D化プロジェクト「PLATEAU」とデータ変換OSS「PLATEAU GIS Converter」の公開
nokonoko1203
4
370
ソフトウェアエンジニアとしてキャリアの螺旋を駆け上がる方法 - 経験と出会いが人生を変える / Career-Anchor-Drive
soudai
13
2.9k
pmconf2024_UPSIDER
upsider_tech
0
7.5k
宇宙最速のランチRecap LT会(開発者ツール&運用監視編)
nnydtmg
1
180
多様なロール経験が導いたエンジニアキャリアのナビゲーション
coconala_engineer
1
160
知らない景色を見に行こう チャンスを掴んだら道が開けたマネジメントの旅 / Into the unknown~My management journey~
kakehashi
10
1.2k
データパイプラインをなんとかした話 / Improving the Data Pipeline in IVRy
mirakui
0
110
12/3(火)のBedrockアプデ速報(re:Invent 2024 Daily re:Cap #2 with AWS Heroes)
minorun365
PRO
4
140
検証と資産化を形にするプロダクト組織へ/tapple_pmconf2024
corin8823
1
9.5k
【ASW21-01】STAMPSTPAで導き出した課題に対する対策立案手法の提案
hianraku9498
0
600
大規模サーバ移行を成功に導くための事前調査フェーズの工夫事例
fukuchiiinu
2
110
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
A Tale of Four Properties
chriscoyier
157
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Code Reviewing Like a Champion
maltzj
520
39k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
The Invisible Side of Design
smashingmag
298
50k
Automating Front-end Workflow
addyosmani
1366
200k
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