Cloudflare R2 を試す

2022/05/13

話題の Cloudflare R2 を試してみた
サービスの詳細等は割愛する

https://developers.cloudflare.com/r2/get-started/

Wrangler のインストールとログイン

Wrangler というコマンドラインツールを使って、R2 の操作や Worker の作成を行う

$ yarn global add wrangler
$ wrangler --version
2.0.3

$ wrangler login

ブラウザが開かれるので、ポチってしたらよい

バケット作成

GUI でもできるが、CLI からバケットの作成をする
sample-bucket という名前のバケットを作成

$ wrangler r2 bucket create sample-bucket

$ wrangler r2 bucket list
[
  {
    "name": "sample-bucket",
    "creation_date": "2022-05-12T13:01:17.947Z"
  },
  {
    "name": "sample-bucket-preview",
    "creation_date": "2022-05-12T13:08:51.542Z"
  }
]

開発環境で動かすためには、本番環境とは別のバケットを用意する必要があるので、別で sample-bucket-preview も作った

Worker の作成

バケットのオブジェクトの操作は基本的に Worker で行う

Worker プロジェクトを作成

$ wrangler init sample-r2

いろいろ聞かれるが全部 y を選択
自然と TypeScript になった

バケットの設定を追記

wrangler.toml

 name = "sample-r2"
 main = "src/index.ts"
 compatibility_date = "2022-05-12"
 
+ [[r2_buckets]]
+ binding = "MY_BUCKET"
+ bucket_name = "sample-bucket"
+ preview_bucket_name = "sample-bucket-preview"

バインディングという機能で、Worker からは MY_BUCKET という名前で R2 にアクセスすることができる

Worker の実装

src/index.ts

interface Env {
  MY_BUCKET: R2Bucket;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);
    const key = url.pathname.slice(1);

    switch(request.method) {
      case "PUT":
        await env.MY_BUCKET.put(key, request.body);
        return new Response(`Put ${key} successfully!`);
      case "GET":
        const object = await env.MY_BUCKET.get(key);

        if (!object) {
          return new Response("Object Not Found.", { status: 404 });
        }

        return new Response(object.body);
      case "DELETE":
        await env.MY_BUCKET.delete(key);
        return new Response("Deleted!", { status: 200 });
      default:
        return new Response("Route Not Found.", { status: 404 });
    }
  },
};

開発サーバーの起動

$ yarn start

Worker のデプロイ

$ wrangler publish

動作確認

本当は画像をやってみたかったけど、多分ファイルタイプとかいろいろやらないといけないから、テキストファイルで妥協した

アップロード

$ curl -X PUT sample-r2.ytkg.workers.dev/sample.txt --data 'Hello, World!'
Put sample.txt successfully!

取得

$ curl -X GET sample-r2.ytkg.workers.dev/sample.txt
Hello, World!

削除

$ curl -X DELETE sample-r2.ytkg.workers.dev/sample.txt
Deleted!

削除後は取得できなくなる

$ curl -X GET sample-r2.ytkg.workers.dev/sample.txt
Object Not Found.

認証/認可

このままだと誰でもファイルのアップロードや削除ができてしまうので、自分でアクセス制限の仕組みを作る必要がある

Basic認証やカスタムヘッダーでやるっぽい

今回は面倒だったので、やらずに Worker を削除した

リポジトリ

今回作った物を GitHub にあげた

https://github.com/ytkg/sample-r2

高木のブログ