Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Cloudflare R2 でアセットに安全にアクセスし、アップロードする

最終更新 Markdown で表示Agent セットアップ

このチュートリアルでは、Cloudflare R2 バケットからファイルを安全に取得し、アップロードできる TypeScript ベースの Cloudflare Workers プロジェクトの作り方を説明します。Cloudflare R2 では、一般的なクラウドストレージに付きものの高額なエグレス帯域料金なしで、大量の非構造化データを保存できます。

前提条件

次を用意します。

  1. Cloudflare アカウント ↗ にまだ登録していなければ、登録します。
  2. npm ↗ をインストールします。
  3. Node.js ↗ をインストールします。権限の問題を避け、Node.js のバージョンを切り替えるには、Volta ↗ や nvm ↗ などの Node バージョンマネージャーを使います。Wrangler には、Node のバージョン 16.17.0 以降が必要です。

Worker アプリケーションを作成する

まず、create-cloudflare CLI ↗ で新しい Worker を作成します。ターミナルを開き、次のコマンドを実行します。

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

セットアップでは、次のオプションを選びます。

  • What would you like to start with? では、Hello World example を選びます。
  • Which template would you like to use? では、Worker only を選びます。
  • Which language do you want to use? では、TypeScript を選びます。
  • Do you want to use git for version control? では、Yes を選びます。
  • Do you want to deploy your application? では、No を選びます（デプロイ前にいくつか変更します）。

作成したディレクトリに移動します。

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 設定ファイル に R2 バケットの バインディング を追加して、Worker プロジェクトから R2 バケットを使えるようにします。Wrangler ファイルに、次の R2 バケットバインディングを追加します。

{
	"r2_buckets": [
		{
			"binding": "MY_BUCKET",
			"bucket_name": "<YOUR_BUCKET_NAME>"
		}
	]
}
[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "<YOUR_BUCKET_NAME>"

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

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

R2 バケットから取得する

R2 バケットバインディングを設定したら、バケットからファイルを取得したり、バケットへファイルをアップロードしたりする機能を Worker に実装します。

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> {
		// For example, the request URL my-worker.account.workers.dev/image.png
		const url = new URL(request.url);
		const key = url.pathname.slice(1);
		// Retrieve the key "image.png"
		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,
		});
	},
} satisfies ExportedHandler<Env>;

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

R2 バケットへ安全にアップロードする

次に、認証付きで R2 バケットへアップロードできるようにします。アップロードリクエストを安全に認証するには、Wrangler の secret 機能 を使います。Wrangler は、create cloudflare@latest コマンド実行時にインストールされています。

任意のシークレット値（ランダムな文字列やパスワードなど）を作成します。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") {
			// Note that you could require authentication for all requests
			// by moving this code to the top of the fetch function.
			const auth = request.headers.get("Authorization");
			const expectedAuth = `Bearer ${env.AUTH_SECRET}`;

			if (!auth || auth !== expectedAuth) {
				return new Response("Unauthorized", { 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(`Object ${key} uploaded successfully!`);
		}

		// include the previous code here...
	},
} 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 のドキュメント を参照してください。

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

役に立ちましたか？