🐟

Cloudflare R2をオリジンとした画像リサイズ戦略

2023/04/21に公開

Cloudflare

Cloudinary

tech

Cloudflare R2は、ポータビリティ性が高く、コストも使った分だけなので、サービスのローンチ初期から成長に合わせて、柔軟に構築・運用を支援してくれます。

多くのサービスでは、ユーザがアップロードした画像をそのままオリジナルの形で表示することは希で、リサイズして視聴する端末や表示に適したサイズへ加工することが殆どだと思います。自前でリサイズするプログラムを書くことも戦略の1つですが、今回の戦略は、Cloudflare R2にオリジナルの画像を保存しておき、動的に必要なサイズへ加工して表示するための方法を紹介します。

今回は、URLの一部を加工するだけで、動的にリサイズできる方法なので、URLを変えずにリサイズするケースは、別の機会に紹介出来ればと思います。

Cloudinary

無料枠内でかなり多くの機能を使えるので、自社のニーズに合うかどうか検証することは十分可能だと思います。料金体験は、月毎に出来る加工の回数や転送量があり、動画や種類が多くなるとその限りではないですが、ほとんどの場合で問題にならないかと思います。唯一ネックになるのがストレージ容量で、25GBをオリジナルの画像と加工した画像、バックアップが有効であればその容量が対象になります。そのため、事業の成長の前に、使い果たしてしまうと月額89ドルの支払いが必要になります。
https://cloudinary.com/pricing

実装

ブラウザからもアップできますので、実装は参考までに。ただしURLの組み立て部分はSDKを使った方が簡単かもしれません。

npm i cloudinary

const cloudinary = require('cloudinary');

cloudinary.v2.config({
  cloud_name: 'hoge',
  api_key: 'API KEY',
  api_secret: 'API SECRET',
  secure: true,
});

cloudinary.v2.uploader.upload("https://pub-xxx.r2.dev/test.png", {public_id: "test"}, (error, result) => {
  console.log(result, error)
})

const url = cloudinary.v2.url("test/", {width: 200, height: 200}

https://res.cloudinary.com/hoge/image/upload/h_200,w_200/test

公式SDKを使ってuploadする際、URLで指定できるので、Cloudflare R2の公開されたURLを使ってみました。これをpublic_idで任意の文字列を付けることで、リサイズされたURLを生成するときに、どの画像に対して行うのかを指定できます。

今回は、200pxの正方形を作りましたが、他にもクロップするなどの指定もできます。このURLを生成する部分は同期的に行われますので、実際の画像があるかどうかは気にしていません。引数として渡したリサイズの条件を単にURLにするだけです。

URLをブラウザ等でアクセスすると、初回こそ生成の時間が掛かりますが、2回目以降は生成せず作られた画像を返してくれます。そのため、オリジナルの画像を削除しても、一度作ってしまえば返してくれます。当然作ったことのない条件の動的生成は、オリジナル画像がないため出来ません。

削除

cloudinary.v2.uploader.destroy("test", function(error,result) {
  console.log(result, error) })

Cloudflare Image Resizing

Proプラン以上であればこちらも動的に作ることができる仕組みがあって、Cloudinaryと同じくURLを渡して動的リサイズをしてくれます。Image Resizingを行う方法は2つあって、URLアクセスで行うかCloudflare Workerを介してプログラムで行うかですが、URLでアクセスする場合はCloudflareにドメインとDNSの登録が必要です。

ドメインの登録を済ましたら、R2で作成したバケットに画像をアップして、公開バケットを確認します。

次にDNSのレコードを追加します。CNAMEで登録しますが、サブドメインは自由に設定しつつ、コンテンツは公開バケットのホストを指定します。

これらの設定が完了していれば、以下のURLにアクセスするだけで、動的な画像リサイズができます。もちろんR2ではない公開されたURLでもリサイズできます。

https://image.example.com/cdn-cgi/image/width=200,height=200,quality=75/https://pub-xxx.r2.dev/test.png

最後に

Cloudflare R2をオリジンにして、URLを部分的に変更するだけで、動的リサイズが可能なリサイズサービスの切り替えを紹介しました。プログラム的な変更は必要ですが、サービスの成長や要望に応じて、利用するサービスを切り替えられるようにしておくことは大事かと思います。
サービスを運用していくと、必要な画像サイズも変わってくることがありますが、そういったニーズに応えられますし、サムネイル生成の実装・運用コストも考えると、こういったサービスを活用していくことも検討が必要だと思います。

Cloudinary

実装

Cloudflare Image Resizing

最後に

Discussion