ABEMA 画像配信基盤における Cloudflare Workers の活用

ABEMA 画像配信基盤における Cloudflare Workers の活用
株式会社 AbemaTV, Shohei Ueda

https://findy.connpass.com/event/318382/
> Findy Lunch LT
> Cloudflare Workers 活用事例
> 業務利用の決め手とその効果に迫る
にて 2024-06-13 に発表

Transcript

1. AbemaTV, Inc. All Rights Reserved
 AbemaTV, Inc. All Rights Reserved
 1 ABEMA 画像配信基盤における Cloudflare Workers の活用 2024-06-13 株式会社 AbemaTV, Shohei Ueda Findy Lunch LT Cloudflare Workers 活用事例 ~業務利用の決め手とその効果に迫る~
2. AbemaTV, Inc. All Rights Reserved
 2 • 自己紹介 • Cloudflare Workers 導入経緯 • ABEMA 画像配信基盤 • ドメイン管理 • Cloudflare アカウント運用 • 画像変換 INDEX • Cache 戦略 • Monorepo • Wrangler • CI/CD リリース戦略 • ログ • 監視・アラート・分析
3. AbemaTV, Inc. All Rights Reserved
 ABEMA の画像配信基盤を Cloudflare Workers で 実装・運用しています 3 Findy Tools へ事例を寄稿させていただきました https://findy-tools.io/products/cloudflare/23/56
4. AbemaTV, Inc. All Rights Reserved
 自己紹介 4 peaceiris.com
5. AbemaTV, Inc. All Rights Reserved
 Shohei Ueda 2022年度に株式会社サイバーエージェントへ新卒入社し た後、株式会社 AbemaTV へ配属。バックエンドエンジニ アとして ABEMA の開発に従事。 現在は Developer Productivity Engineer として ABEMA における開発生産性に向き合っています。 個人としては peaceiris として各種 OSS を公開していま す。 5 Profile
6. AbemaTV, Inc. All Rights Reserved
 Cloudflare Workers 導入経緯 6 Hayabusa -> Falcon
7. AbemaTV, Inc. All Rights Reserved
 7 以前はサイバーエージェント全社で運用 されていた画像配信基盤 (Hayabusa) を ABEMA でも利用していました。 Hayabusa の廃止にともない、移行先と して Cloudflare Workers を採用し Falcon と呼ぶ後継の基盤を実装・運用し ています。 Cloudflare Workers 導入経緯 比較検討したサービスや選定理由などは Findy Tools の記事に詳細がありますので 参考になれば幸いです。 成果として Hayabusa を完全に置き換えて Falcon へ移行することができました。 （Hayabusa も同様に Workers で構成さ れていた背景があります）
8. AbemaTV, Inc. All Rights Reserved
 ABEMA 画像配信基盤 8 Falcon
9. AbemaTV, Inc. All Rights Reserved
 9 ABEMA で取り扱うサムネイル等の画像 を基本すべて Falcon から配信していま す。 • Cache: Cloudflare Cache • 画像変換: Cloudflare Images • Origin: HTTP server, Cloud Storage (Google Cloud), etc. ABEMA 画像配信基盤 Falcon Falcon 構成 • Worker を TypeScript で実装 • ドメイン: Amazon Route 53 管理 • Code: GitHub Enterprise Cloud • CI/CD: GitHub Actions • Monorepo: Turborepo で複数 worker を管理
10. AbemaTV, Inc. All Rights Reserved
 10 ABEMA 画像配信基盤 Falcon
11. AbemaTV, Inc. All Rights Reserved
 ドメイン管理 11 Amazon Route 53 管理のサブドメインを登録
12. AbemaTV, Inc. All Rights Reserved
 12 Amazon Route 53 管理下のサブドメイ ンを Cloudflare へ登録しています。 • サブドメイン ◦ 開発環境 ◦ 本番環境 • TXT record で所有権を確認 • Partial (CNAME) setup ドメイン管理 Partial (CNAME) setup は Cloudflare Business/Enterprise Plan でのみ可能な運 用方法です。 参考 https://qiita.com/khayama/items/8ede 50664283abae28fc
13. AbemaTV, Inc. All Rights Reserved
 Cloudflare アカウント運用 13 Machine & Read-only Account
14. AbemaTV, Inc. All Rights Reserved
 14 Machine Account マシンアカウントで Admin 権限を持つ Token を発行し GitHub Actions の Secrets に登録 基本的にマシンアカウントでログインは しない Cloudflare アカウント運用 User Account (Read-only) 開発者アカウントは Read-only 権を付与 • ダッシュボード閲覧 • キャッシュパージ 通常は各自のアカウントでログイン
15. AbemaTV, Inc. All Rights Reserved
 15 Machine Account Cloudflare アカウント運用 User Account (Read-only)
16. AbemaTV, Inc. All Rights Reserved
 画像変換 16 Cloudflare Images (Cloudflare Image Resizing)
17. AbemaTV, Inc. All Rights Reserved
 17 Cloudflare Images の Transform images (以前の Image Resizing) を用いて画像の 加工を行っています。 fetch() 経由でオリジン画像を参照する ことにより画像の加工が可能となりま す。クエリーパラメータの変換が Falcon worker の主な処理です。 画像変換 ABEMA では以下機能を利用しています。 • PNG, JPEG, WebP, AVIF への変換 • ブラー調整 • サイズ変更 • 背景色の指定 • 品質調整 他にもトリミングやオーバーレイなどの画 像処理が可能です。
18. AbemaTV, Inc. All Rights Reserved
 Cache 戦略 18 安定して高いキャッシュヒット率を維持できています
19. AbemaTV, Inc. All Rights Reserved
 19 • URL は二つの形式 ◦ 画像に変更があればクエリパラ メータを更新 ◦ 画像それぞれに一意の URL • Cache Rules ◦ 200-299: 1 month ◦ 500: 1 minute ◦ 400-499: 10 seconds Cache 戦略 時間帯やスパイク状況に寄らず、キャッ シュヒット率は安定して 98.5% と非常に 高い水準を維持できています。 膨大な数のサムネイル画像を配信している 中でもオリジンアクセスを大幅に削減する ことに貢献しています。
20. AbemaTV, Inc. All Rights Reserved
 Monorepo 20 turborepo (turbo) で複数 worker をモノレポ管理
21. AbemaTV, Inc. All Rights Reserved
 21 Falcon 以外にも worker を作成すること を想定してモノレポ構成にしました。 実際に現在複数の worker を運用してい ます。 Linter, Test, CI/CD などの共通化を目的 としています。 Monorepo モノレポ運用についての詳細は以下の発表 で紹介しています。 Monorepo for Cloudflare Workers https://speakerdeck.com/peaceiris/mo norepo-for-cloudflare-workers
22. AbemaTV, Inc. All Rights Reserved
 Wrangler 22 “The CLI for Cloudflare Workers”
23. AbemaTV, Inc. All Rights Reserved
 23 Cloudflare Workers SDK/CLI Cloudflare Workers の開発で用いる SDK/CLI として wrangler が提供されています ローカルサーバー • wrangler dev --local デプロイ • wrangler publish --env development Wrangler wrangler.toml Worker 構成をファイルで宣言的に管理 • keep_vars = false ダッシュボードからの変更を維持せず wrangler.toml の設定を正とすることが可能
24. AbemaTV, Inc. All Rights Reserved
 CI/CD 24 GitHub Actions
25. AbemaTV, Inc. All Rights Reserved
 25 GitHub Actions を用いて CI/CD を構成してい ます。 CI (pull-request event) • corepack (pnpm) • turbo • prettier, tsc, eslint, jest CD (push event) • main branch: 開発環境へのデプロイ • tag: 本番環境へのデプロイ CI/CD リリース戦略 Gradual deployments (Beta) が登場したことに より、トラフィックを分割して段階的に worker をリリースすることが可能になります。ローリ ングアップデートやカナリアリリースが実現で きるようになると思われます。（未検証） ロールバックはダッシュボードから簡単に実行 可能です。（次ページ画像参考）
26. AbemaTV, Inc. All Rights Reserved
 26 CI/CD (Deployments) ダッシュボードから特定コミットへ簡単にロールバックできます
27. AbemaTV, Inc. All Rights Reserved
 ログ 27 Logpush -> Object Storage
28. AbemaTV, Inc. All Rights Reserved
 28 Logpush を用いてログの閲覧・保存が可能にな ります。 ダッシュボードでのリアルタイムの分析の他 に、オブジェクトストレージへのログのエクス ポートが可能です。 ABEMA ではサンプリングしたログを Cloud Storage (Google Cloud) へ JSON Lines (JSONL) 形式で保存しています。 ログ (Logpush) 多種多様なエクスポート先を設定できます。 • Cloudflare R2 • HTTP destination • Amazon S3 • S3-compatible endpoints • Datadog • Elastic • Google Cloud: Cloud Storage, BigQuery cf. Enable destinations
29. AbemaTV, Inc. All Rights Reserved
 29 ログ (Logpush)
30. AbemaTV, Inc. All Rights Reserved
 監視・アラート・分析 30 Workers Analytics Engine を検討中
31. AbemaTV, Inc. All Rights Reserved
 31 Cloudflare Notifications を利用してい ますが、詳細な閾値を指定したアラート は設定できません。 そこで Workers Analytics Engine から ABEMA で利用している Grafana Alerting への連携を検討しています。 監視・アラート・分析 Workers Analytics Engine Workers 統合のデータストアで SQL API を用いてクエリーによるデータの分析を実 現できます。 Baselime また Cloudflare による買収により Baselime の統合が進むため、こちらも選 択肢になってくると思われます。
32. AbemaTV, Inc. All Rights Reserved
 32 監視・アラート・分析 (Workers Analytics Engine 検証)
33. AbemaTV, Inc. All Rights Reserved
 まとめ 33 ABEMA で Cloudflare Workers を活用しています！
34. AbemaTV, Inc. All Rights Reserved
 34 Cloudflare Workers, Images, Cache な どを用いて ABEMA の画像配信基盤を実 装・運用しています！ 制限のある Node.js で実行されるため JavaScript/TypeScript における開発・ 運用の知見が利用できます！ (WASM も選択肢になります) まとめ Cloudflare Workers は各種 Cloudflare 製 品との連携に優れており Workers を中心 としたアプリケーションの構築が可能で す！ Cloudflare Workers の導入を検討する際 の参考になれば幸いです！
35. AbemaTV, Inc. All Rights Reserved
 Thank you! 35 🦅 Enjoy Cloudflare Workers 🦅
36. AbemaTV, Inc. All Rights Reserved
 36 Cloudflare • Cloudflare Workers https://www.cloudflare.com/ja-jp/developer-platform/workers/ • Baselime https://www.cloudflare.com/ja-jp/press-releases/2024/cloudflare-enters-observability-market-with-acquisition-baselime/ • Cloudflare Enterprise Plan https://www.cloudflare.com/plans/enterprise/ Cloudflare Docs • Node.js compatibility https://developers.cloudflare.com/workers/runtime-apis/nodejs/ • Cache Rules https://developers.cloudflare.com/cache/how-to/cache-rules/ • Cloudflare Images https://developers.cloudflare.com/images/ • Logpush https://developers.cloudflare.com/logs/about/ • Workers Analytics Engine https://developers.cloudflare.com/analytics/analytics-engine/ • Cloudflare Notifications https://developers.cloudflare.com/notifications/ • Wrangler https://developers.cloudflare.com/workers/wrangler/ • Partial (CNAME) setup https://developers.cloudflare.com/dns/zone-setups/partial-setup/ • Gradual deployments https://developers.cloudflare.com/workers/configuration/versions-and-deployments/gradual-deployments/ • Rollbacks https://developers.cloudflare.com/workers/configuration/versions-and-deployments/rollbacks/ • Enable destinations | Logs https://developers.cloudflare.com/logs/get-started/enable-destinations/ Links
37. AbemaTV, Inc. All Rights Reserved
 37 Others • Turborepo https://turbo.build/repo • Grafana Alerting https://grafana.com/docs/grafana/latest/alerting/ • Monorepo for Cloudflare Workers https://speakerdeck.com/peaceiris/monorepo-for-cloudflare-workers • JSON Lines (JSONL), newline-delimited JSON (NDJSON) https://jsonlines.org/ 今回の connpass • Findy Lunch LT: Cloudflare Workers 活用事例 業務利用の決め手とその効果に迫る Lunch LT https://findy.connpass.com/event/318382/ Links