😊

画像のホスティングに Cloudflare Images はいかが？

2024/07/25に公開

Webアプリケーションを作る場合に画像のホスティングをどうするのか悩むことがあると思う。
弊社で一番よくあるパターンは「APIにData URI化した画像を送る」。そしてAPI側でそれをAWS S3に保存する。画像のトリミングはフロントエンド側で行い、リサイズはサーバーサイド側で実行する。

画像のパターンをフロントエンド側で調べてバックエンド側に連絡したり、画像側に何か変更があるとバックエンド側に手間をかけてしまう。これが気難しいバックエンドエンジニアが相手だとフロントエンドエンジニアが消耗…といった具合にあまり良くないケースだ。

画像まわりはフロントエンド側で巻き取れないのか？

Cloudflare Images を使ってみよう

Clouflare Imagesを利用するとWebアプリケーションにおける画像登録・配信のフローは以下のようになる。

フロントエンド側でRemix等なにかしらバックエンド処理ができるのが条件になるが、画像系処理をフロントエンド側で巻き取ることができる。

気になるのは料金だ。残念ながらさすがに無料ではない。これが無料だったらCloudflareの収益体系を本当に疑う。管理画面に保存時のコストの説明があった。

100万枚の画像をホストしても月50ドル。これはお安い。

ストレージは、保存されている画像 100,000 枚につき 5 ドルです。

とあるので自分でカスタムして請求額を決めることも可能だ。そして、後述するが自分のストレージを利用することも可能らしい。S3に画像をホストしてどうする？と思うがこれもメリットがある。

このTransformという機能は、Cloudflare Image外に保存されている画像に何かしらの加工を加え、Cloudflareを通して配信することが可能な模様。自分の用途だとこれを利用するケースが現状無いのでこれ以上は深掘りをしない。

料金についてのページのドキュメントはこちら。

配信について、が重要。

この料金体系は、Cloudflare Images製品を使用して画像を保存・管理する場合にのみ適用され、外部ストレージからの画像最適化には適用されないことが重要なポイント。

バリアントを使うと、アップロードした画像に対してどのように加工するのかをあらかじめ定義しておくことができる。バリアントは最大100個作成することができる。
これはダッシュボードから作成が可能だ。

ちなみに画像には以下のようなパスでアクセスする。

https://imagedelivery.net/[アカウントハッシュ]/[画像ID]/[バリアント]

バリアントを指定しないとアクセスはできない。デフォルトではPublicというバリアントが付与されている。

Fitプロパティは、幅と高さの寸法をどのように解釈するべきかを記述する。

どれも使いそうなオプションなので詳細をドキュメントを読んでほしい。
あとは画像のメタデータの保存方法も選択できたりする。

バリアントの違いだけで画像のサイズを変更できるのは非常に便利だ。

今回はCloudflare Imagesの基本的な概念をご紹介した。次回は実際に実装に組み込む方法を紹介したい。

トゥーアールはフロントエンドに特化したWeb制作会社です。 ReactやNext.jsなどのJavaScriptフレームワークを利用したフロントエンド開発についてお気軽にご相談ください。