コンテンツにスキップ

WorkersからR2を使用する

1. C3を使って新しいアプリケーションを作成する

C3 (create-cloudflare-cli) は、Workers & PagesアプリケーションをCloudflareにできるだけ早くセットアップしてデプロイするためのコマンドラインツールです。

始めるには、ターミナルウィンドウを開いて次のコマンドを実行します：

Terminal window
npm create cloudflare@latest -- r2-worker

For setup, select the following options:

  • For What would you like to start with?, choose Hello Worldの例.
  • For Which template would you like to use?, choose Hello World Worker.
  • For Which language do you want to use?, choose JavaScript.
  • For Do you want to use git for version control?, choose Yes.
  • For Do you want to deploy your application?, choose No (we will be making some changes before deploying).

次に、新しく作成したディレクトリに移動します：

Terminal window
cd r2-worker

2. バケットを作成する

次のコマンドを実行してバケットを作成します：

Terminal window
npx wrangler r2 bucket create <YOUR_BUCKET_NAME>

バケットが作成されたか確認するには、次のコマンドを実行します：

Terminal window
npx wrangler r2 bucket list

listコマンドを実行すると、作成したバケットを含むすべてのバケット名が表示されます。

3. バケットをWorkerにバインドする

バケットをWorkerにバインドする必要があります。

R2バケットをWorkerにバインドするには、wrangler.tomlファイルに次の内容を追加します。bindingプロパティを有効なJavaScript変数識別子に、bucket_nameをステップ2で作成した<YOUR_BUCKET_NAME>に更新します：

[[r2_buckets]]
binding = 'MY_BUCKET' # <~ 有効なJavaScript変数名
bucket_name = '<YOUR_BUCKET_NAME>'

Workerの設定に関する詳細情報は、Wrangler Configurationのドキュメントを参照してください。

4. WorkerからR2バケットにアクセスする

Workerコード内で、バケットはMY_BUCKET変数の下で利用可能になり、相互作用を開始できます。

R2バケットは、オブジェクトをREAD、LIST、WRITE、DELETEできます。以下に、Module Worker構文を使用したすべての操作の例を示します。次のスニペットをプロジェクトのindex.jsファイルに追加します：

export default {
  async fetch(request, env) {
    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 === null) {
          return new Response("Object Not Found", { status: 404 });
        }


        const headers = new Headers();
        object.writeHttpMetadata(headers);
        headers.set("etag", object.httpEtag);


        return new Response(object.body, {
          headers,
        });
      case "DELETE":
        await env.MY_BUCKET.delete(key);
        return new Response("Deleted!");


      default:
        return new Response("Method Not Allowed", {
          status: 405,
          headers: {
            Allow: "PUT, GET, DELETE",
          },
        });
    }
  },
};

5. バケットアクセスとプライバシー

上記のコードをWorkerに追加すると、すべての受信リクエストがバケットと相互作用できるようになります。これは、バケットが公開され、その内容が望ましくないアクターによってアクセスおよび変更される可能性があることを意味します。

これから、誰がどのアクションをバケットに対して実行できるかを決定するための認証ロジックを定義する必要があります。このロジックはWorkerのコード内に存在し、ユーザーの権限を決定するのはあなたのアプリケーションの仕事です。以下は、アクセスと認証の実践に関連するリソースの短いリストです：

  1. 基本認証: HTTP Basicスキーマを使用してアクセスを制限する方法を示します。
  2. カスタムヘッダーの使用: ヘッダー内の既知の事前共有キーに基づいてリクエストを許可または拒否します。

新しく作成したバケットとWorkerを使用して、すべてのバケット操作を保護する必要があります。

PUTおよびDELETEリクエストには、新しいAUTH_KEY_SECRET環境変数を使用します。これは後でWranglerのシークレットとして定義します。

GETリクエストでは、特定のファイルのみがリクエストできるようにします。これらのカスタムロジックは、authorizeRequest関数内で行われ、hasValidHeader関数がカスタムヘッダーのロジックを処理します。すべての検証が通過した場合、操作が許可されます。

const ALLOW_LIST = ["cat-pic.jpg"];


// 事前共有シークレットのリクエストをチェック
const hasValidHeader = (request, env) => {
  return request.headers.get("X-Custom-Auth-Key") === env.AUTH_KEY_SECRET;
};


function authorizeRequest(request, env, key) {
  switch (request.method) {
    case "PUT":
    case "DELETE":
      return hasValidHeader(request, env);
    case "GET":
      return ALLOW_LIST.includes(key);
    default:
      return false;
  }
}


export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    const key = url.pathname.slice(1);


    if (!authorizeRequest(request, env, key)) {
      return new Response("Forbidden", { status: 403 });
    }


    // ...
  },
};

これを機能させるには、Wranglerを使用してシークレットを作成する必要があります：

Terminal window
npx wrangler secret put AUTH_KEY_SECRET

このコマンドは、ターミナルにシークレットを入力するように促します：

Terminal window
npx wrangler secret put AUTH_KEY_SECRET
Enter the secret text you'd like assigned to the variable AUTH_KEY_SECRET on the script named <YOUR_WORKER_NAME>:
*********
🌀  Creating the secret for script name <YOUR_WORKER_NAME>
✨  Success! Uploaded secret AUTH_KEY_SECRET.

このシークレットは、WorkerのenvパラメータでAUTH_KEY_SECRETとして利用可能です。

6. バケットをデプロイする

Workerとバケットが設定されたら、npx wrangler deploy コマンドを実行してCloudflareのグローバルネットワークにデプロイします：

Terminal window
npx wrangler deploy

デプロイされたWorkerエンドポイントを使用して、認証ロジックが機能しているか確認できます：

Terminal window
# "X-Custom-Auth-Key"ヘッダーを提供せずにオブジェクトを書き込もうとする
curl https://your-worker.dev/cat-pic.jpg -X PUT --data-binary 'test'
#=> Forbidden
# ヘッダーが欠落しているため予想通り


# 誤った"X-Custom-Auth-Key"ヘッダー値でオブジェクトを書き込もうとする
curl https://your-worker.dev/cat-pic.jpg -X PUT --header "X-Custom-Auth-Key: hotdog" --data-binary 'test'
#=> Forbidden
# AUTH_KEY_SECRET値と一致しないため予想通り


# 正しい"X-Custom-Auth-Key"ヘッダー値でオブジェクトを書き込もうとする
# 注意: "*********"はAUTH_KEY_SECRET Wranglerシークレットの値であると仮定
curl https://your-worker.dev/cat-pic.jpg -X PUT --header "X-Custom-Auth-Key: *********" --data-binary 'test'
#=> Put cat-pic.jpg successfully!


# "foo"というオブジェクトを読み取ろうとする
curl https://your-worker.dev/foo
#=> Forbidden
# "foo"がALLOW_LISTに含まれていないため予想通り


# "cat-pic.jpg"というオブジェクトを読み取ろうとする
curl https://your-worker.dev/cat-pic.jpg
#=> test
# これは上記で成功裏にPUTされた値です

このガイドを完了することで、Wranglerを正常にインストールし、R2バケットをCloudflareにデプロイしました。

関連リソース

  1. Workersチュートリアル
  2. Workersの例
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings