Cloudflare R2を使用して資産に安全にアクセスし、アップロードする

Last reviewed: over 1 year ago

このチュートリアルでは、TypeScriptベースのCloudflare Workersプロジェクトを作成し、Cloudflare R2バケットからファイルに安全にアクセスし、ファイルをアップロードする方法を説明します。Cloudflare R2は、開発者が通常のクラウドストレージサービスに関連する高額な出口帯域幅料金なしで、大量の非構造化データを保存できるようにします。

前提条件

続行するには：

まだアカウントを作成していない場合は、Cloudflareアカウント ↗にサインアップしてください。
npm ↗をインストールします。
Node.js ↗をインストールします。権限の問題を避け、Node.jsのバージョンを変更するために、Volta ↗やnvm ↗のようなNodeバージョンマネージャーを使用してください。Wranglerは、16.17.0以上のNodeバージョンを必要とします。

Workerアプリケーションの作成

まず、create-cloudflare CLI ↗を使用して新しいWorkerを作成します。これを行うには、ターミナルウィンドウを開き、次のコマンドを実行します：

npm create cloudflare@latest -- upload-r2-assets

yarn create cloudflare@latest upload-r2-assets

pnpm create cloudflare@latest upload-r2-assets

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 TypeScript.
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).

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

cd upload-r2-assets

R2バケットの作成

WorkerアプリケーションにR2バケットアクセスを統合する前に、R2バケットを作成する必要があります：

npx wrangler r2 bucket create <YOUR_BUCKET_NAME>

<YOUR_BUCKET_NAME>を、バケットに割り当てたい名前に置き換えます。新しいバケットが追加されたことを確認するために、アカウントのR2バケットをリストします：

npx wrangler r2 bucket list

R2バケットへのアクセスを構成する

新しいR2バケットの準備ができたら、Workerアプリケーション内で使用します。

wrangler.toml設定ファイルを修正して、R2バケットのbindingを含めることで、Workerプロジェクト内でR2バケットを使用します。次のR2バケットバインディングをwrangler.tomlファイルに追加します：

[[r2_buckets]]
binding = 'MY_BUCKET'
bucket_name = '<YOUR_BUCKET_NAME>'

R2バケットバインディング名を付けます。<YOUR_BUCKET_NAME>を、先ほど作成したR2バケットの名前に置き換えます。

これで、WorkerアプリケーションはMY_BUCKET変数を使用してR2バケットにアクセスできるようになりました。バケットの内容に対してCRUD（作成、読み取り、更新、削除）操作を実行できます。

R2バケットからの取得

R2バケットバインディングを設定した後、WorkerがR2バケットと対話する機能を実装します。たとえば、バケットからファイルを取得し、バケットにファイルをアップロードすることです。

R2バケットからファイルを取得するには、BINDING.get関数を使用します。以下の例では、R2バケットバインディングはMY_BUCKETと呼ばれています。.get(key)を使用して、URLパス名をキーとしてアセットを取得できます。この例では、URLパス名は/image.pngで、アセットキーはimage.pngです。

interface Env {
  MY_BUCKET: R2Bucket;
}
export default {
  async fetch(request, env): Promise<Response> {
    // たとえば、リクエストURL my-worker.account.workers.dev/image.png
    const url = new URL(request.url);
    const key = url.pathname.slice(1);
    // キー "image.png" を取得
    const object = await env.MY_BUCKET.get(key);

    if (object === null) {
      return new Response("オブジェクトが見つかりません", { status: 404 });
    }

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

    return new Response(object.body, {
      headers,
    });
  },
} satisfies ExportedHandler<Env>;

上記のコードは、特定のURLパスを使用してWorkerアプリケーションにGETリクエストが行われたときに、R2バケットからデータを取得して返します。

R2バケットへの安全なアップロード

次に、認証を使用してR2バケットにアップロードする機能を追加します。アップロードリクエストを安全に認証するために、Wranglerの秘密機能を使用します。create cloudflare@latestコマンドを実行したときにWranglerがインストールされました。

任意の秘密値を作成します。たとえば、ランダムな文字列やパスワードです。Wrangler CLIを使用して、秘密をAUTH_SECRETとしてプロジェクトに追加します：

npx wrangler secret put AUTH_SECRET

次に、PUT HTTPリクエストを処理する新しいコードパスを追加します。この新しいコードは、以前にアップロードされた秘密が正しく認証に使用されているかを確認し、その後MY_BUCKET.put(key, data)を使用してR2にアップロードします：

interface Env {
  MY_BUCKET: R2Bucket;
  AUTH_SECRET: string;
}
export default {
  async fetch(request, env): Promise<Response> {
    if (request.method === "PUT") {
      // すべてのリクエストに対して認証を要求することもできます
      // このコードをfetch関数の先頭に移動することで。
      const auth = request.headers.get("Authorization");
      const expectedAuth = `Bearer ${env.AUTH_SECRET}`;

      if (!auth || auth !== expectedAuth) {
        return new Response("未認証", { status: 401 });
      }

      const url = new URL(request.url);
      const key = url.pathname.slice(1);
      await env.MY_BUCKET.put(key, request.body);
      return new Response(`オブジェクト ${key} が正常にアップロードされました！`);
    }

    // ここに以前のコードを含めます...
  },
} satisfies ExportedHandler<Env>;

このアプローチにより、Authorizationヘッダーを介してAUTH_SECRET値と等しい有効なベアラートークンを提供するクライアントのみがR2バケットにアップロードできるようになります。AUTH_SECRETとは異なるバインディング名を使用した場合は、上記のコードでそれを置き換えてください。

Workerアプリケーションのデプロイ

Cloudflare Workerプロジェクトを完了したら、Cloudflareにデプロイします。このチュートリアルのために作成したWorkerアプリケーションのディレクトリにいることを確認し、次のコマンドを実行します：

npx wrangler deploy

あなたのアプリケーションは現在ライブで、<YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.devでアクセス可能です。

R2バケットと対話するCloudflare Workerを正常に作成しました。これにより、ファイルのアップロードやダウンロードなどのタスクを実行できます。これを自分のプロジェクトの出発点として使用できます。

次のステップ

R2とWorkersを使ってさらに構築するには、チュートリアルやR2ドキュメントを参照してください。

質問がある場合、支援が必要な場合、またはプロジェクトを共有したい場合は、Cloudflare開発者コミュニティに参加して、他の開発者やCloudflareチームとつながるためにDiscord ↗に参加してください。

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings