aws-sdk-js

開始する前に、Access Key を生成する必要があります。以降の例では、生成した Access Key ID と Secret Access Key の値を表す access_key_id と access_key_secret 変数を使います。

新しいバージョンの AWS JavaScript SDK を使う場合は、専用の aws-sdk-js-v3 の例のページを参照してください。

JavaScript または TypeScript では、これまでどおり aws-sdk ↗ の npm パッケージを使えます。S3 サービスクライアントを生成するときに、R2 の設定と認証情報を渡します。

import S3 from "aws-sdk/clients/s3.js";

const s3 = new S3({
	// Provide your Cloudflare account ID
	endpoint: `https://${ACCOUNT_ID}.r2.cloudflarestorage.com`,
	// Retrieve your S3 API credentials for your R2 bucket via API tokens (see: https://developers.cloudflare.com/r2/api/tokens)
	accessKeyId: `${ACCESS_KEY_ID}`,
	secretAccessKey: `${SECRET_ACCESS_KEY}`,
	signatureVersion: "v4",
});

console.log(await s3.listBuckets().promise());
//=> {
//=>   Buckets: [
//=>     { Name: 'user-uploads', CreationDate: 2022-04-13T21:23:47.102Z },
//=>     { Name: 'my-bucket', CreationDate: 2022-05-07T02:46:49.218Z }
//=>   ],
//=>   Owner: {
//=>     DisplayName: '...',
//=>     ID: '...'
//=>   }
//=> }

console.log(await s3.listObjects({ Bucket: "my-bucket" }).promise());
//=> {
//=>   IsTruncated: false,
//=>   Name: 'my-bucket',
//=>   CommonPrefixes: [],
//=>   MaxKeys: 1000,
//=>   Contents: [
//=>     {
//=>       Key: 'cat.png',
//=>       LastModified: 2022-05-07T02:50:45.616Z,
//=>       ETag: '"c4da329b38467509049e615c11b0c48a"',
//=>       ChecksumAlgorithm: [],
//=>       Size: 751832,
//=>       Owner: [Object]
//=>     },
//=>     {
//=>       Key: 'todos.txt',
//=>       LastModified: 2022-05-07T21:37:17.150Z,
//=>       ETag: '"29d911f495d1ba7cb3a4d7d15e63236a"',
//=>       ChecksumAlgorithm: [],
//=>       Size: 279,
//=>       Owner: [Object]
//=>     }
//=>   ]
//=> }

署名付き URL を生成する

読み取りまたは書き込みの公開アクセスを、一時的に共有するための署名付きリンクも生成できます。

// Use the expires property to determine how long the presigned link is valid.
console.log(
await s3.getSignedUrlPromise("getObject", {
	Bucket: "my-bucket",
	Key: "dog.png",
	Expires: 3600,
}),
);
// You can also create links for operations such as putObject to allow temporary write access to a specific key.
// Specify ContentType to restrict uploads to a specific file type.
console.log(
	await s3.getSignedUrlPromise("putObject", {
		Bucket: "my-bucket",
		Key: "dog.png",
		Expires: 3600,
		ContentType: "image/png",
	}),
);

https://my-bucket.<ACCOUNT_ID>.r2.cloudflarestorage.com/dog.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=<credential>&X-Amz-Date=<timestamp>&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=<signature>
https://my-bucket.<ACCOUNT_ID>.r2.cloudflarestorage.com/dog.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=<credential>&X-Amz-Date=<timestamp>&X-Amz-Expires=3600&X-Amz-SignedHeaders=content-type%3Bhost&X-Amz-Signature=<signature>

putObject の例で生成したリンクは、署名付きリンクの期限が切れるまで、指定したバケットとキーへのアップロードに使えます。ContentType 付きの署名付き URL を使うときは、クライアントはリクエストに一致する Content-Type ヘッダーを付ける必要があります。

curl -X PUT "https://my-bucket.<ACCOUNT_ID>.r2.cloudflarestorage.com/dog.png?X-Amz-Algorithm=..." \
  -H "Content-Type: image/png" \
  --data-binary @dog.png

CORS と Content-Type でアップロードを制限する

アップロード用の署名付き URL を生成するとき、次の方法で不正利用を抑えられます。

Content-Type を制限する: 署名付き URL のパラメーターに許可する Content-Type を指定します。クライアントが異なる Content-Type ヘッダーを送ると、アップロードは失敗します。
CORS を設定する: バケットに CORS ルールを設定し、どのオリジンからファイルをアップロードできるかを制御します。Cloudflare ダッシュボード ↗ で、バケット設定に JSON ポリシーを追加して CORS を設定します。

[
  {
    "AllowedOrigins": ["https://example.com"],
    "AllowedMethods": ["PUT"],
    "AllowedHeaders": ["Content-Type"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3600
  }
]

次に、Content-Type 制限付きの署名付き URL を生成します。

const putUrl = await s3.getSignedUrlPromise("putObject", {
	Bucket: "my-bucket",
	Key: "user-upload.png",
	Expires: 3600,
	ContentType: "image/png",
});

クライアントがこの署名付き URL を使うときは、次の条件を満たす必要があります。

許可されたオリジンからリクエストする（CORS で強制されます）
Content-Type: image/png ヘッダーを付ける（署名で強制されます）