🧮

Cloudflare R2をトリガーにCloudflare Workersを動かしてみた

2024/12/09に公開

だいぶ前ですが、CloudflareのBuilder Dayで18個の大きなアップデートが発表されました。

https://blog.cloudflare.com/builder-day-2024-announcements/

その中の一つで、それまでBeta版だったQueueがGAになりました。

そして、そのQueuesを使ったR2のイベント通知もGAになりました。

これにより、Cloudflare R2をトリガーにしたイベント駆動型のアプリケーションを作成することが可能になりました。

というわけで、今回はCloudflare R2をトリガーにCloudflare Workersを動かしてみます。

今回構築するもの

今回は以下の画像のように、R2のファイルをアップロードしたら、そのイベントをQueuesを使ってWorkersで受け取るという構成を作成します。

MQでいうところのProducerがR2、ConsumerがWorkersになります。


公式発表より

事前準備

  • Cloudflare WorkersのPaidプランに登録していること(QueuesはPaidプラン以上で利用可能です)
  • Queuesを有効にしていること
  • R2を有効にしていること
  • Node.js(v18以上)
  • Wranglerのインストール

構築手順

Wranglerのプロジェクト作成

まずはWranglerのプロジェクトを作成します。

wrangler init cloudflare-r2-queue-sample 

対話形式でプロジェクトの設定を行います。以下の質問に対する回答を入力していきます。

その他のバージョンコントロールの設定などは任意で入力してください。

What would you like to start with?
-> Hello World Example

Which template would you like to use?
-> Hello World Worker

Which language do you want to use?
-> JavaScript

プロジェクトが作成されたら、作成したディレクトリに移動します。

cd r2-queue-worker

Cloudflare Queueの設定

以下のコマンドでQueueを作成します。

wrangler queues create r2-event-queue

作成すると以下の出力が表示されます。

🌀 Creating queue 'r2-event-queue'
✅ Created queue 'r2-event-queue'

Configure your Worker to send messages to this queue:

[[queues.producers]]
queue = "r2-event-queue"
binding = "r2_event_queue"

Configure your Worker to consume messages from this queue:

[[queues.consumers]]
queue = "r2-event-queue"

今回はWorkerをConsumerとして使うので、[[queues.consumers]]の設定をWorkerのwrangler.tomlに追加します。

[[queues.consumers]]
queue = "r2-event-queue"

Cloudflare R2の設定

以下のコマンドでR2を作成します。

wrangler r2 bucket create sample-bucket

作成すると以下の出力が表示されれば成功です。今回はWorkerでR2のAPIを叩くことは無いので、wrangler.tomlには何も追加する必要はありません。

Creating bucket 'sample-bucket'...
✅ Created bucket 'sample-bucket' with default storage class of Standard.

Configure your Worker to write objects to this bucket:

[[r2_buckets]]
bucket_name = "sample-bucket"
binding = "sample_bucket"

R2のイベント通知を設定

作成したR2のバケットのイベント通知を設定します。R2のイベント通知ではバケットにオブジェクトが追加されたか削除されたかのイベントをトリガーにWorkerを実行することができます。

今回はファイル追加時にイベントを通知する設定を、以下のコマンドで行います。

wrangler r2 bucket notification create sample-bucket --event-type object-create --queue r2-event-queue

作成すると以下の出力が表示されます。

Creating event notification rule for object creation (PutObject,CompleteMultipartUpload,CopyObject)
Event notification rule created successfully!

Workerの実装

今度はConsumerとして動作するWorkerを実装します。

src/index.jsを以下のコードに書き換えます。

export default {
  async queue(batch, env) {
    const messages = JSON.stringify(batch.messages);
    console.log(`Received batch: ${messages}`);
  },
};

このコードでQueuesにメッセージが追加されるたびに、そのメッセージをログに出力します。

Workerのデプロイ

コードを書き換えたら、Workerをデプロイします。

wrangler deploy

以下のような出力が表示されれば成功です。

Total Upload: 25.59 KiB / gzip: 6.21 KiB
Worker Startup Time: 11 ms
Uploaded cloudflare-r2-queue-sample (4.86 sec)
Deployed cloudflare-r2-queue-sample triggers (2.44 sec)
  https://cloudflare-r2-queue-sample.xxxx.workers.dev
  Consumer for r2-event
Current Version ID: 323baa5c-a008-4706-bc5c-b47a7c9d111c

動作確認

これで構築は完了したので、実際に動作確認を行います。

動作確認にあたり、wranglerのプロジェクト上で以下のコマンドを実行して、Workerのログをリアルタイムで確認します。

wrangler tail

次に何かしらの方法でR2のバケットにファイルを追加します。

今回は、Cloudflareのコンソールからファイルをアップロードしてみます。

ファイルをアップロードしてしばらく待つと、tailコマンドを実行しているコンソールに以下のような出力が表示されたらイベント通知が成功しています。

Queue r2-event-queue (1 message) - Ok @ 12/9/2024, 1:37:31 AM
  (log) Received batch: [{"attempts":1,"body":{"account":"f8b55c4f10161be121e865b3ae6ef820","bucket":"sample-bucket","eventTime":"2024-12-08T16:37:25.243Z","action":"PutObject","object":{"key":"Community Builder badge 1600px.png","size":155092,"eTag":"0dd71f0b777485f44a1c91dcb8adceb0"}},"timestamp":"2024-12-08T16:37:25.894Z","id":"b97ee0909d7bc2d6a511d59f999ce718"}]

削除

今回作成したリソースは放置して追加で課金されることはありませんが、不要になった場合は削除しておくことをおすすめします。

というわけでリソースの削除方法を説明します。

R2のイベント通知の削除

以下のコマンドでR2のイベント通知を削除します。

wrangler r2 bucket notification delete sample-bucket --queue r2-event-queue

Queueの削除

以下のコマンドでQueuesを削除します。

wrangler queues delete r2-event-queue

R2の削除

R2のバケットを削除するには中身を空にしてから削除する必要があります。

ただ、wranglerのコマンドではバケットの中身を一括で削除するコマンドが用意されていないので、Cloudflareのコンソールから手動で一括削除します。

バケットの中身を削除したら、以下のコマンドでバケットを削除します。

wrangler r2 bucket delete sample-bucket

Workerの削除

以下のコマンドでWorkerを削除します。

wrangler delete

以上でリソースの削除は完了です。

まとめ

今回はCloudflare R2をトリガーにCloudflare Workersを動かす方法を紹介しました。

R2のイベント通知を使うことで、ファイルのアップロードや削除などのイベントをトリガーにWorkerを動かすことができます。

Cloudflare上でイベント・ドリブンのアプリケーションを作りやすくなったと思います。

今回のリポジトリ

今回のサンプルコードは以下のリポジトリにあります。

https://github.com/Miura55/cloudflare-r2-queue-sample

Discussion