Cloudflare R2 Direct Upload：0円大容量アップロード

バックエンドリレーアップロードの悲劇：メモリタイムアウトと帯域幅課金

大容量画像、高解像度動画、大容量PDFドキュメントを処理するWeb/モバイルアプリケーションにおいて、開発者が最も陥りがちなアーキテクチャ上の過ちは、「クライアント -> バックエンドAPIサーバー -> オブジェクトストレージ(S3/R2)」の経路で送信するリレー（Relay）アップロード方式です。

[非効率なバックエンドリレーアップロード方式]
[Client] --- (100MB ファイルアップロード) ---> [Node.js / Lambda Server] --- (100MB 再転送) ---> [Storage]
                                              * サーバーRAMメモリのバッファリング爆発
                                              * CPU execution timeおよびタイムアウト終了
                                              * 二重帯域幅およびEgress課金の発生

このリレー方式は、次のような致命的なクラウドボトルネックを引き起こします。

1. サーバーコンピューティング時間とメモリ爆弾：100MB〜1GB単位の大容量ファイルがバックエンドサーバーのメモリにバッファリングされることでRAM不足（OOM Error）が発生したり、HTTP通信が30秒以上維持されてAWS LambdaやCloudflare Workersがタイムアウト終了します。
2. 二重帯域幅コスト：大容量データをクライアントからサーバーへ一度受信し、サーバーから再びS3ストレージへ送信するため、ネットワークインバウンド/アウトバウンド手数料が2倍発生します。
3. ボトルネック現象：サーバーインフラのスケーリングがファイルアップロード帯域幅に縛られ、サービス全体の速度が低下します。

Cloudflare R2 Presigned URLs（事前署名付きURL）およびDirect Uploadアーキテクチャは、この問題を完全に解決します。

バックエンドサーバー（Cloudflare Worker）はわずか1msでセキュリティ暗号化署名されたPresigned PUT URLのみを発行し、クライアント（Web / Flutter）はこのURLを通じてCloudflare R2ストレージバケットへファイルを直接（Direct）1:1転送します。

この方式はバックエンドサーバーのコンピューティング消費を99%削減するだけでなく、Cloudflare R2特有の**「アウトバウンドEgress手数料$0」**のメリットと組み合わさることで、完全な$0大容量ファイルアップロードパイプラインを実現します。

本記事では、Presigned URLの動作原理から単一ファイルの直接アップロード、100MB〜5GBファイルのマルチパートアップロード（Multipart Upload）、CORSセキュリティ設定、そして実践的なベンチマークまで詳細に解説します。

R2 Direct Upload アーキテクチャ比較

R2 Direct Upload の動作原理：Presigned PUT URLの暗号化

Cloudflare Workersでは、AWS S3 API標準の暗号化ライブラリ（@aws-sdk/client-s3）および@aws-sdk/s3-request-presignerを使用できます。

+-----------------------------------------------------------------------------------+
| Cloudflare R2 Presigned Direct Upload パイプライン                                |
+-----------------------------------------------------------------------------------+

[Client (Web / Flutter)]         [Cloudflare Worker (1ms)]        [Cloudflare R2 Bucket]
           |                                 |                                |
           |--- 1. アップロードリクエスト (ファイル名/サイズ) ->|              |
           |                                 |--- 2. HMAC署名URL生成 ------->| (Presigned PUT URL)
           |<-- 3. Presigned URL返却 --------|                                |
           |                                                                  |
           |----------------------- 4. Direct HTTP PUT (バイナリ転送) -------->|
           |<---------------------- 5. 200 OK (アップロード完了) --------------|

1. 署名リクエスト：クライアントはアップロードするファイル名（video.mp4）、mimeType（video/mp4）、サイズをWorkerへ送信します。
2. Presigned PUT URL生成：WorkerはAWS S3 HMAC-SHA256アルゴリズムを使用して、5分間のみ有効な暗号化署名付きURLを1msで発行します。
3. Direct HTTP PUT転送：クライアントは取得したPresigned URLへ直接HTTP PUTリクエストを送信し、データをR2へダイレクト転送します。

ステップ1：R2バケット作成とCORSセキュリティ設定

クライアントブラウザがCloudflare R2ドメインへ直接HTTP PUTリクエストを送信するには、R2バケットに**CORS（Cross-Origin Resource Sharing）**ルールを設定する必要があります。

wrangler.jsonc R2バケットバインディング

// wrangler.jsonc
{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "edge-r2-direct-upload",
  "main": "src/index.ts",
  "compatibility_date": "2026-01-01",
  "compatibility_flags": ["nodejs_compat"],

  // Cloudflare R2 バケットバインディング
  "r2_buckets": [
    {
      "binding": "MY_BUCKET",
      "bucket_name": "effidev-media-uploads"
    }
  ]
}

R2バケット CORSポリシー設定（cors.json）

wrangler r2 bucket cors setコマンドを使用して、許可するオリジン（Origin）とPUTメソッドを指定します。

[
  {
    "AllowedOrigins": ["https://effidev.dev", "http://localhost:3000"],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
    "AllowedHeaders": ["Content-Type", "x-amz-*"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3600
  }
]

npx wrangler r2 bucket cors set effidev-media-uploads --file=cors.json

ステップ2：エッジサーバーレス Presigned URL発行APIの実装（Hono.js）

AWS S3 SDKをCloudflare Workers互換パイプラインで構築し、Presigned PUT URLを発行するHono.jsサーバーの実装例です。

パッケージインストール

npm install hono @aws-sdk/client-s3 @aws-sdk/s3-request-presigner

Presigned URL発行ハンドラー（src/index.ts）

// src/index.ts
import { Hono } from "hono";
import { cors } from "hono/cors";
import {
  S3Client,
  PutObjectCommand,
  CreateMultipartUploadCommand,
  UploadPartCommand,
  CompleteMultipartUploadCommand,
} from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";

type Env = {
  Bindings: {
    MY_BUCKET: R2Bucket;
    R2_ACCOUNT_ID: string;
    R2_ACCESS_KEY_ID: string;
    R2_SECRET_ACCESS_KEY: string;
    R2_BUCKET_NAME: string;
  };
};

const app = new Hono<Env>();
app.use("*", cors());

// Cloudflare R2 S3互換クライアントファクトリ
function getR2S3Client(env: Env["Bindings"]) {
  return new S3Client({
    region: "auto",
    endpoint: `https://${env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
    credentials: {
      accessKeyId: env.R2_ACCESS_KEY_ID,
      secretAccessKey: env.R2_SECRET_ACCESS_KEY,
    },
  });
}

// -------------------------------------------------------------------
// 1. 単一ファイル（100MB以下）Presigned PUT URL発行API
// -------------------------------------------------------------------
app.post("/api/upload/presigned-url", async (c) => {
  const { fileName, contentType, fileSize } = await c.req.json();

  // セキュリティバリデーション：最大100MB制限
  if (fileSize > 100 * 1024 * 1024) {
    return c.json({ error: "File size exceeds 100MB limit. Use multipart upload." }, 400);
  }

  const s3Client = getR2S3Client(c.env);
  const fileKey = `uploads/${Date.now()}_${crypto.randomUUID().slice(0, 8)}_${fileName}`;

  const command = new PutObjectCommand({
    Bucket: c.env.R2_BUCKET_NAME || "effidev-media-uploads",
    Key: fileKey,
    ContentType: contentType,
  });

  // 5分間（300秒）有効のPresigned PUT URL署名生成（1ms所要）
  const presignedUrl = await getSignedUrl(s3Client, command, { expiresIn: 300 });

  return c.json({
    success: true,
    fileKey,
    uploadUrl: presignedUrl,
    expiresIn: 300,
  });
});

ステップ3：大容量ファイル（100MB〜5GB）マルチパートアップロード API

動画や大容量バイナリデータは、チャンク（Chunk）単位に分割して並列アップロードし統合するMultipart Upload方式を適用します。

// -------------------------------------------------------------------
// 2. 大容量マルチパートアップロード - Step 1: マルチパートセッション開始
// -------------------------------------------------------------------
app.post("/api/upload/multipart/initiate", async (c) => {
  const { fileName, contentType } = await c.req.json();
  const s3Client = getR2S3Client(c.env);
  const fileKey = `videos/${Date.now()}_${fileName}`;

  const command = new CreateMultipartUploadCommand({
    Bucket: c.env.R2_BUCKET_NAME,
    Key: fileKey,
    ContentType: contentType,
  });

  const response = await s3Client.send(command);

  return c.json({
    uploadId: response.UploadId,
    fileKey: fileKey,
  });
});

// -------------------------------------------------------------------
// 3. 大容量マルチパートアップロード - Step 2: 各チャンク(Part)別 Presigned URL発行
// -------------------------------------------------------------------
app.post("/api/upload/multipart/presigned-part", async (c) => {
  const { fileKey, uploadId, partNumber } = await c.req.json();
  const s3Client = getR2S3Client(c.env);

  const command = new UploadPartCommand({
    Bucket: c.env.R2_BUCKET_NAME,
    Key: fileKey,
    UploadId: uploadId,
    PartNumber: partNumber,
  });

  const uploadUrl = await getSignedUrl(s3Client, command, { expiresIn: 600 });
  return c.json({ partNumber, uploadUrl });
});

// -------------------------------------------------------------------
// 4. 大容量マルチパートアップロード - Step 3: アップロード完了結合 (Complete)
// -------------------------------------------------------------------
app.post("/api/upload/multipart/complete", async (c) => {
  const { fileKey, uploadId, parts } = await c.req.json();
  // parts 例: [{ PartNumber: 1, ETag: '"e123..."' }, { PartNumber: 2, ETag: '"f456..."' }]
  const s3Client = getR2S3Client(c.env);

  const command = new CompleteMultipartUploadCommand({
    Bucket: c.env.R2_BUCKET_NAME,
    Key: fileKey,
    UploadId: uploadId,
    MultipartUpload: { Parts: parts },
  });

  await s3Client.send(command);

  return c.json({
    success: true,
    fileUrl: `https://pub-effidev-media.r2.dev/${fileKey}`,
  });
});

export default app;

ステップ4：クライアント（Web / Flutter）Direct Upload連携

Webブラウザ JavaScript連携例

クライアントはバックエンドからuploadUrlのみを受け取った後、fetch(uploadUrl, { method: 'PUT', body: file })で直接送信します。

// フロントエンド単一ファイル Direct Upload 関数
async function uploadFileDirectToR2(file) {
  // 1. Workerへ1ms署名URLをリクエスト
  const res = await fetch("/api/upload/presigned-url", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      fileName: file.name,
      contentType: file.type,
      fileSize: file.size,
    }),
  });

  const { uploadUrl, fileKey } = await res.json();

  // 2. Cloudflare R2バケットへ直接HTTP PUT送信（バックエンドリレーなし！）
  const uploadRes = await fetch(uploadUrl, {
    method: "PUT",
    headers: {
      "Content-Type": file.type,
    },
    body: file, // File / Blob オブジェクトバイナリ送信
  });

  if (uploadRes.ok) {
    console.log("R2 Direct Upload Success:", fileKey);
    return fileKey;
  } else {
    throw new Error("Direct upload failed to R2 bucket");
  }
}

実務パフォーマンスおよびコストベンチマーク

10GB相当の大容量メディアファイル（100MB × 100個）のアップロード処理における、従来のバックエンドリレー方式とCloudflare R2 Presigned Direct Uploadの比較レポートです。

パフォーマンス＆コスト比較表

結論：サーバーを経由しない現代的なファイルアーキテクチャ

もはや大容量ファイルデータを処理するためにバックエンドサーバーのメモリを無駄にし、タイムアウトと戦い、帯域幅Egress料金の爆弾に悩まされる必要はありません。

Cloudflare WorkersとR2 Presigned URLs Direct Uploadの組み合わせは、次のような決定的なメリットをもたらします。

1. サーバーインフラ消費 ZERO：バックエンドWorkerは1msで署名URLを発行して終了するため、メモリとCPUの消費が全くありません。
2. Egress手数料 $0：Cloudflare R2の恩恵により、大容量アウトバウンドトラフィック費用が$0です。
3. 無制限のスケーラビ리티（Scalability）：クライアントがR2エッジバケットへ直接1:1転送するため、同時アップロードユーザーが数万人に増えてもバックエンドサーバーの負荷はありません。
4. 大容量マルチパート対応：5GB以上の超大型動画もエッジパイプラインで並列処理します。

今すぐバックエンドのリレーアップロードロジックをR2 Presigned Direct Uploadへ切り替え、99%のコスト削減と障害ゼロの快適なアップロードUXを体験しましょう。

関連記事：AWS S3からCloudflare R2への移行：転送料金99%削減でR2アーキテクチャ構築ガイドもあわせてご覧いただけます。