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

Slide 1

Slide 1 text

AbemaTV, Inc. All Rights Reserved  AbemaTV, Inc. All Rights Reserved  1 ABEMA 画像配信基盤における Cloudﬂare Workers の活用 2024-06-13 株式会社 AbemaTV, Shohei Ueda Findy Lunch LT Cloudﬂare Workers 活用事例 ~業務利用の決め手とその効果に迫る~

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

AbemaTV, Inc. All Rights Reserved  Shohei Ueda 2022年度に株式会社サイバーエージェントへ新卒入社した後、株式会社 AbemaTV へ配属。バックエンドエンジニアとして ABEMA の開発に従事。現在は Developer Productivity Engineer として ABEMA における開発生産性に向き合っています。個人としては peaceiris として各種 OSS を公開しています。 5 Proﬁle

Slide 6

Slide 6 text

Slide 7

Slide 7 text

AbemaTV, Inc. All Rights Reserved  7 以前はサイバーエージェント全社で運用されていた画像配信基盤 (Hayabusa) を ABEMA でも利用していました。 Hayabusa の廃止にともない、移行先として Cloudﬂare Workers を採用し Falcon と呼ぶ後継の基盤を実装・運用しています。 Cloudﬂare Workers 導入経緯比較検討したサービスや選定理由などは Findy Tools の記事に詳細がありますので参考になれば幸いです。成果として Hayabusa を完全に置き換えて Falcon へ移行することができました。（Hayabusa も同様に Workers で構成されていた背景があります）

Slide 8

Slide 8 text

Slide 9

Slide 9 text

AbemaTV, Inc. All Rights Reserved  9 ABEMA で取り扱うサムネイル等の画像を基本すべて Falcon から配信しています。 ● Cache: Cloudﬂare Cache ● 画像変換: Cloudﬂare 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 を管理

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

AbemaTV, Inc. All Rights Reserved  12 Amazon Route 53 管理下のサブドメインを Cloudﬂare へ登録しています。 ● サブドメイン ○ 開発環境 ○ 本番環境 ● TXT record で所有権を確認 ● Partial (CNAME) setup ドメイン管理 Partial (CNAME) setup は Cloudﬂare Business/Enterprise Plan でのみ可能な運用方法です。参考 https://qiita.com/khayama/items/8ede 50664283abae28fc

Slide 13

Slide 13 text

Slide 14

Slide 14 text

AbemaTV, Inc. All Rights Reserved  14 Machine Account マシンアカウントで Admin 権限を持つ Token を発行し GitHub Actions の Secrets に登録基本的にマシンアカウントでログインはしない Cloudﬂare アカウント運用 User Account (Read-only) 開発者アカウントは Read-only 権を付与 ● ダッシュボード閲覧 ● キャッシュパージ通常は各自のアカウントでログイン

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

AbemaTV, Inc. All Rights Reserved  17 Cloudﬂare Images の Transform images (以前の Image Resizing) を用いて画像の加工を行っています。 fetch() 経由でオリジン画像を参照することにより画像の加工が可能となります。クエリーパラメータの変換が Falcon worker の主な処理です。画像変換 ABEMA では以下機能を利用しています。 ● PNG, JPEG, WebP, AVIF への変換 ● ブラー調整 ● サイズ変更 ● 背景色の指定 ● 品質調整他にもトリミングやオーバーレイなどの画像処理が可能です。

Slide 18

Slide 18 text

Slide 19

Slide 19 text

AbemaTV, Inc. All Rights Reserved  19 ● URL は二つの形式 ○ 画像に変更があればクエリパラメータを更新 ○ 画像それぞれに一意の URL ● Cache Rules ○ 200-299: 1 month ○ 500: 1 minute ○ 400-499: 10 seconds Cache 戦略時間帯やスパイク状況に寄らず、キャッシュヒット率は安定して 98.5% と非常に高い水準を維持できています。膨大な数のサムネイル画像を配信している中でもオリジンアクセスを大幅に削減することに貢献しています。

Slide 20

Slide 20 text

Slide 21

Slide 21 text

AbemaTV, Inc. All Rights Reserved  21 Falcon 以外にも worker を作成することを想定してモノレポ構成にしました。実際に現在複数の worker を運用しています。 Linter, Test, CI/CD などの共通化を目的としています。 Monorepo モノレポ運用についての詳細は以下の発表で紹介しています。 Monorepo for Cloudﬂare Workers https://speakerdeck.com/peaceiris/mo norepo-for-cloudﬂare-workers

Slide 22

Slide 22 text

Slide 23

Slide 23 text

AbemaTV, Inc. All Rights Reserved  23 Cloudﬂare Workers SDK/CLI Cloudﬂare Workers の開発で用いる SDK/CLI として wrangler が提供されていますローカルサーバー ● wrangler dev --local デプロイ ● wrangler publish --env development Wrangler wrangler.toml Worker 構成をファイルで宣言的に管理 ● keep_vars = false ダッシュボードからの変更を維持せず wrangler.toml の設定を正とすることが可能

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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 をリリースすることが可能になります。ローリングアップデートやカナリアリリースが実現できるようになると思われます。（未検証）ロールバックはダッシュボードから簡単に実行可能です。（次ページ画像参考）

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

AbemaTV, Inc. All Rights Reserved  28 Logpush を用いてログの閲覧・保存が可能になります。ダッシュボードでのリアルタイムの分析の他に、オブジェクトストレージへのログのエクスポートが可能です。 ABEMA ではサンプリングしたログを Cloud Storage (Google Cloud) へ JSON Lines (JSONL) 形式で保存しています。ログ (Logpush) 多種多様なエクスポート先を設定できます。 ● Cloudﬂare R2 ● HTTP destination ● Amazon S3 ● S3-compatible endpoints ● Datadog ● Elastic ● Google Cloud: Cloud Storage, BigQuery cf. Enable destinations

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

AbemaTV, Inc. All Rights Reserved  31 Cloudflare Notifications を利用していますが、詳細な閾値を指定したアラートは設定できません。そこで Workers Analytics Engine から ABEMA で利用している Grafana Alerting への連携を検討しています。監視・アラート・分析 Workers Analytics Engine Workers 統合のデータストアで SQL API を用いてクエリーによるデータの分析を実現できます。 Baselime また Cloudflare による買収により Baselime の統合が進むため、こちらも選択肢になってくると思われます。

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

AbemaTV, Inc. All Rights Reserved  34 Cloudflare Workers, Images, Cache などを用いて ABEMA の画像配信基盤を実装・運用しています！制限のある Node.js で実行されるため JavaScript/TypeScript における開発・運用の知見が利用できます！ (WASM も選択肢になります) まとめ Cloudflare Workers は各種 Cloudflare 製品との連携に優れており Workers を中心としたアプリケーションの構築が可能です！ Cloudflare Workers の導入を検討する際の参考になれば幸いです！

Slide 35

Slide 35 text

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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