Cloudflare ImagesやWorkersを活用してABEMAの画像配信基盤を再構築

参考になった

レビュー投稿日の情報になります

株式会社AbemaTV / peaceiris 上田菖平

バックエンドエンジニア / 従業員規模: 501名〜1,000名 / エンジニア組織: 101名〜300名

最終更新日2024/05/08投稿日2024/05/02

利用プラン	ツールの利用規模	ツールの利用開始時期
Enterprise	10名以下	2023年4月

導入の背景・解決したかった問題

導入背景

以前はサイバーエージェントの全社システムとして提供されていた画像配信システムを利用して画像配信を行っていましたが、この廃止にともない、その移行先となる画像配信システムを ABEMA 内で構築する必要がありました。

比較検討したサービス

Akamai Image Manager
Fastly Image Optimizer
Cloudinary
imgix
Amazon CloudFront + AWS Lambda

比較した軸

検討する際には、下記の点を重視して選定しました。

以前利用していた画像配信システムと同等以上の品質で画像配信ができること
多くの画像フォーマットがサポートされていること
開発体験が優れていること
コストパフォーマンスが優れていること
必要な場合に十分なサポートが提供されるか

ABEMA 内での画像配信システムの運用実績、および Edge Computing の利用実績がなかったため慎重に技術検証や導入検討を行いました。

選定理由

以前利用していた画像配信システムでもCloudflareを利用しており、画像配信の品質が担保されていたこと、コスト面で有利だったことが決め手となりました。

また移行にともない配信画像が劣化していないか、意図した変換処理が行われているかなど、品質担保も移行における必須要件としてありました。

移行中だけでなく現在においても、技術検証や新機能のキャッチアップなどで手厚く継続的にサポートをいただけており、安心して開発・運用を進めることができています。

導入の成果

これまで外部チームが提供する画像配信基盤で配信していたサムネイル画像を、社内で実装した画像配信基盤で配信・運用できるようになりました。また、重視していた画像品質も以前と同等の品質で提供することができました。

導入前は社内で Workersの運用知見はありませんでしたが、三人の移行チームで情報をキャッチアップしながら、半年ほどの期間で移行でき、旧システム廃止前に対応が完了できたのも大きな成果だと感じています。

キャッシュヒット率も時間帯やスパイク状況に寄らず安定して98.5%と非常に高い水準を記録しており、膨大な数のサムネイル画像を配信している中でもオリジンアクセスを大幅に削減することができています。

導入時の苦労・悩み

画像を参照している箇所でドメインやパスを移行する必要がありました。それらの影響範囲を洗い出し、以前の動作を保証しつつ移行しなければならず、影響調査・移行実装・動作確認に多くの時間を使いました。

導入に向けた社内への説明

経営陣・上長への説明

配信画像の品質に問題がないこと、コストパフォーマンスで優れていること、Service Level Agreement が社内の要求を満たすことなどを、判断基準として提供し最終的な採用判断にいたりました。

社内・チームへの展開

まずタスクフォースチームを立ち上げて検証、選定を行い PoC を実施して評価を行いました。
採用が決定してからは移行手順を整備してサーバーサイド、クライエントサイドへ展開して移行作業を実施しました。ドメインや証明書の運用方針に関しては他の CDN を管理しているチームへアドバイスを求めて整備しました。

活用方法

現在、手を動かすのは軽微な機能開発や運用メンテナンスがある時のみです。

リポジトリ管理に関してはモノリポ構成を採用しました。これに関してのスライドと発表内容を以下で公開しています。

よく使う機能

Cloudflare CDN
Cloudflare Workers
Cloudflare Images

アーキテクチャ

アーキテクチャの意図・工夫

リサイズなどの画像加工処理が必要なため Cloudflare Images Resizing (現 Cloudflare Images) を利用しています。

ツールの良い点

Workers 開発体験の良さ
Wranglerによる Workers の開発体験が優れており、JavaScript/TypeScript の資産も活用して機能実装が可能です。
Cloudflare 関連サービスの充実と連携容易性
Workers 関連サービスが充実しており、連携も容易なため Workers でサーバーサイドを実現することも可能です。
Workers AI など機械学習基盤の提供
LLM 系などの機械学習モデルが提供されており AI 搭載機能を容易に実現することが可能です。

ツールの課題点

ローカル開発におけるエミュレータの充実に期待
現時点では画像変換部分のエミュレータが存在せず、動作確認をするためには実際にWorkersをデプロイする必要があります。ローカルで動作確認が完結できるようになると開発効率が上がるためエミュレータの提供に期待しています。
OpenID Connect (OIDC) の充実
現時点ではOIDCによる認証がサポートされておらずWranglerを実行する場合はAccess Tokenを発行しCIサービスに登録して利用しています。トークン管理が不要になるため OIDC 周りの充実に期待したいです。

ツールを検討されている方へ

Cloudflare Workersを利用する場合には多くのケースで JavaScript/TypeScript を採用することになるかと思われます。Workersの開発・運用環境を整備するにあたり、JavaScript/TypeScript における開発・運用のベストプラクティスを適用できると後々の開発体験の良さを保証できます。そのようなバックグラウンドのある Node.js サーバーサイドエンジニアやフロントエンドエンジニアを開発メンバーの一人として割り当てるとよいです。

株式会社AbemaTV / peaceiris 上田菖平

バックエンドエンジニア / 従業員規模: 501名〜1,000名 / エンジニア組織: 101名〜300名

2022年度サイバーエージェント新卒入社、株式会社 AbemaTV バックエンドエンジニアを経て、現在 Developer Productivity Engineer として ABEMA における開発生産性に向き合っています。個人としては peaceiris として各種 OSS のメンテナーをしています。