Cloudflare R2 — Object Storage không phí Egress cho Developer

Posted on: 4/27/2026 12:15:37 PM

Mỗi tháng, hóa đơn AWS S3 của bạn có bao nhiêu phần trăm là phí egress — tiền trả cho việc người dùng download file từ bucket? Với nhiều dự án, con số này chiếm 50-80% tổng chi phí storage. Cloudflare R2 sinh ra để giải quyết đúng vấn đề này: S3-compatible object storage với zero egress fees — không tốn một đồng nào cho bandwidth ra ngoài. Bài viết này phân tích sâu kiến trúc R2, tích hợp Workers tại edge, các pattern upload/download production-ready, và so sánh chi tiết chi phí với AWS S3.

1. Vấn đề — "Egress Tax" của Cloud Storage

AWS S3 tính phí egress từ $0.09/GB cho data transfer ra Internet. Nghe có vẻ nhỏ, nhưng khi ứng dụng scale lên, chi phí này tăng phi tuyến tính:

graph LR
    subgraph "AWS S3 — Chi phí ẩn"
        S3["S3 Bucket
$0.023/GB storage"] --> EG["Egress
$0.09/GB"]
        EG --> USER["Người dùng"]
        S3 --> CF["qua CloudFront
$0.085/GB"]
        CF --> USER
    end
    subgraph "Cloudflare R2 — Minh bạch"
        R2["R2 Bucket
$0.015/GB storage"] --> CDN["Cloudflare CDN
$0 egress"]
        CDN --> USER2["Người dùng"]
    end
    style S3 fill:#ff9800,stroke:#fff,color:#fff
    style EG fill:#e94560,stroke:#fff,color:#fff
    style R2 fill:#4CAF50,stroke:#fff,color:#fff
    style CDN fill:#4CAF50,stroke:#fff,color:#fff

2. Kiến trúc Cloudflare R2

R2 không phải là một bản copy đơn giản của S3. Nó được thiết kế từ đầu để tích hợp sâu với hệ sinh thái Cloudflare:

graph TB
    CLIENT["Client
(Browser / Mobile / Server)"]

    subgraph "Cloudflare Edge — 330+ PoP"
        WORKER["Cloudflare Worker
Auth, Transform, Route"]
        CACHE["Edge Cache
Tự động cache objects"]
    end

    subgraph "Cloudflare R2 Storage"
        R2["R2 Bucket
S3-compatible API"]
        IA["Infrequent Access
$0.01/GB/tháng"]
        LIFECYCLE["Lifecycle Rules
Auto-transition"]
    end

    subgraph "Event System"
        NOTIFY["Event Notifications"]
        QUEUE["Cloudflare Queue"]
        CONSUMER["Consumer Worker
Process events"]
    end

    CLIENT --> WORKER
    CLIENT -->|"S3 API / Presigned URL"| R2
    WORKER -->|"Bindings API"| R2
    WORKER --> CACHE
    CACHE --> R2
    R2 --> LIFECYCLE
    LIFECYCLE --> IA
    R2 --> NOTIFY
    NOTIFY --> QUEUE
    QUEUE --> CONSUMER

    style WORKER fill:#e94560,stroke:#fff,color:#fff
    style R2 fill:#f76c02,stroke:#fff,color:#fff
    style CACHE fill:#4CAF50,stroke:#fff,color:#fff
    style QUEUE fill:#2196F3,stroke:#fff,color:#fff

3. Hai cách truy cập R2

R2 cung cấp 2 API hoàn toàn khác nhau, phù hợp với các use case riêng biệt:

3.1. S3-compatible API — Cho server-to-server

Dùng bất kỳ S3 SDK nào (AWS SDK, boto3, @aws-sdk/client-s3) với endpoint R2:

// Node.js — Upload file lên R2 bằng AWS SDK v3
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

const r2Client = new S3Client({
  region: "auto",
  endpoint: "https://<ACCOUNT_ID>.r2.cloudflarestorage.com",
  credentials: {
    accessKeyId: process.env.R2_ACCESS_KEY_ID!,
    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
  },
});

// Upload
await r2Client.send(new PutObjectCommand({
  Bucket: "my-bucket",
  Key: "uploads/avatar-123.webp",
  Body: fileBuffer,
  ContentType: "image/webp",
}));

// .NET — Upload file lên R2 bằng AWSSDK.S3
using Amazon.S3;
using Amazon.S3.Model;

var config = new AmazonS3Config
{
    ServiceURL = $"https://{accountId}.r2.cloudflarestorage.com",
    ForcePathStyle = true // R2 yêu cầu path-style
};

var s3Client = new AmazonS3Client(
    accessKeyId, secretAccessKey, config);

await s3Client.PutObjectAsync(new PutObjectRequest
{
    BucketName = "my-bucket",
    Key = "uploads/avatar-123.webp",
    InputStream = fileStream,
    ContentType = "image/webp"
});

3.2. Workers API — Cho edge processing

Khi xử lý tại edge, Workers binding nhanh hơn S3 API vì không qua HTTP:

// wrangler.toml
// [[r2_buckets]]
// binding = "MY_BUCKET"
// bucket_name = "my-bucket"

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);
    const key = url.pathname.slice(1); // bỏ leading /

    switch (request.method) {
      case "GET": {
        const object = await env.MY_BUCKET.get(key);
        if (!object) return new Response("Not Found", { status: 404 });

        const headers = new Headers();
        object.writeHttpMetadata(headers);
        headers.set("etag", object.httpEtag);
        headers.set("cache-control", "public, max-age=86400");

        return new Response(object.body, { headers });
      }

      case "PUT": {
        const contentType = request.headers.get("content-type") ?? "";
        await env.MY_BUCKET.put(key, request.body, {
          httpMetadata: { contentType },
          customMetadata: { uploadedBy: "worker" },
        });
        return new Response(JSON.stringify({ key }), { status: 201 });
      }

      case "DELETE": {
        await env.MY_BUCKET.delete(key);
        return new Response(null, { status: 204 });
      }

      default:
        return new Response("Method Not Allowed", { status: 405 });
    }
  },
};

4. Presigned URLs — Upload trực tiếp từ Browser

Pattern phổ biến nhất cho file upload: client lấy presigned URL từ server, rồi upload trực tiếp lên R2 mà không cần proxy qua backend.

sequenceDiagram
    participant B as Browser
    participant W as Worker / API Server
    participant R2 as Cloudflare R2

    B->>W: POST /api/upload/presign
{filename, contentType}
    W->>W: Validate user, generate presigned URL
    W-->>B: {uploadUrl, key}
    B->>R2: PUT uploadUrl
(file binary)
    R2-->>B: 200 OK
    B->>W: POST /api/upload/confirm
{key}
    W->>R2: HEAD key (verify exists)
    R2-->>W: 200 + metadata
    W-->>B: {url: "https://cdn.example.com/key"}

// Worker — Tạo presigned URL cho upload
import { AwsClient } from "aws4fetch";

const r2 = new AwsClient({
  accessKeyId: R2_ACCESS_KEY_ID,
  secretAccessKey: R2_SECRET_ACCESS_KEY,
});

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    if (request.method !== "POST") {
      return new Response("Method Not Allowed", { status: 405 });
    }

    const { filename, contentType } = await request.json();
    const key = `uploads/${crypto.randomUUID()}/${filename}`;

    // Tạo presigned PUT URL — hết hạn sau 1 giờ
    const url = new URL(
      `https://${env.ACCOUNT_ID}.r2.cloudflarestorage.com/${env.BUCKET_NAME}/${key}`
    );
    url.searchParams.set("X-Amz-Expires", "3600");

    const signed = await r2.sign(
      new Request(url, {
        method: "PUT",
        headers: { "Content-Type": contentType },
      }),
      { aws: { signQuery: true } }
    );

    return Response.json({
      uploadUrl: signed.url,
      key,
    });
  },
};

// Frontend — Upload file dùng presigned URL
async function uploadFile(file: File) {
  // Bước 1: Lấy presigned URL
  const { uploadUrl, key } = await fetch("/api/upload/presign", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      filename: file.name,
      contentType: file.type,
    }),
  }).then(r => r.json());

  // Bước 2: Upload trực tiếp lên R2
  await fetch(uploadUrl, {
    method: "PUT",
    headers: { "Content-Type": file.type },
    body: file,
  });

  // Bước 3: Xác nhận với backend
  const result = await fetch("/api/upload/confirm", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ key }),
  }).then(r => r.json());

  return result.url;
}

5. Multipart Upload — File lớn hàng GB

Với file trên 100 MB, multipart upload chia file thành nhiều part nhỏ (5-100 MB mỗi part), upload song song, và R2 tự ghép lại. Nếu 1 part fail, chỉ cần retry part đó.

// Worker — Multipart upload qua Workers API
export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const key = "videos/large-file.mp4";

    // Bước 1: Khởi tạo multipart upload
    const mpu = await env.MY_BUCKET.createMultipartUpload(key, {
      httpMetadata: { contentType: "video/mp4" },
    });

    // Bước 2: Upload từng part (5 MB minimum, trừ part cuối)
    const partSize = 10 * 1024 * 1024; // 10 MB
    const body = await request.arrayBuffer();
    const uploadedParts: R2UploadedPart[] = [];

    for (let i = 0; i * partSize < body.byteLength; i++) {
      const start = i * partSize;
      const end = Math.min(start + partSize, body.byteLength);
      const chunk = body.slice(start, end);

      const part = await mpu.uploadPart(i + 1, chunk);
      uploadedParts.push(part);
    }

    // Bước 3: Complete — R2 ghép tất cả parts
    const object = await mpu.complete(uploadedParts);

    return Response.json({
      key: object.key,
      size: object.size,
      etag: object.httpEtag,
    });
  },
};

6. Event Notifications — Xử lý bất đồng bộ

R2 Event Notifications cho phép trigger Worker khi object thay đổi — pattern lý tưởng cho image processing, video transcoding, search indexing:

graph LR
    UPLOAD["Upload ảnh
avatar.jpg"] --> R2["R2 Bucket"]
    R2 -->|"Event: object-create"| QUEUE["Cloudflare Queue"]
    QUEUE --> WORKER["Consumer Worker"]
    WORKER -->|"Resize 3 kích thước"| R2_THUMB["R2 Bucket
/thumbs/"]
    WORKER -->|"Phân tích nội dung"| AI["Workers AI
Image Classification"]
    WORKER -->|"Cập nhật metadata"| DB["D1 Database"]

    style R2 fill:#f76c02,stroke:#fff,color:#fff
    style QUEUE fill:#2196F3,stroke:#fff,color:#fff
    style WORKER fill:#e94560,stroke:#fff,color:#fff

// wrangler.toml — Cấu hình Event Notifications
// [[r2_buckets]]
// binding = "MY_BUCKET"
// bucket_name = "my-bucket"
//
// [[queues.consumers]]
// queue = "r2-events"
// max_batch_size = 10
// max_batch_timeout = 5

// Consumer Worker — Xử lý event từ R2
export default {
  async queue(
    batch: MessageBatch<R2EventNotification>,
    env: Env
  ): Promise<void> {
    for (const message of batch.messages) {
      const event = message.body;

      if (event.action === "PutObject") {
        const key = event.object.key;

        // Chỉ xử lý ảnh
        if (key.match(/\.(jpg|jpeg|png|webp)$/i)) {
          const original = await env.MY_BUCKET.get(key);
          if (!original) continue;

          const imageData = await original.arrayBuffer();

          // Tạo thumbnail 200x200
          const thumb = await resizeImage(imageData, 200, 200);
          await env.MY_BUCKET.put(
            `thumbs/${key}`,
            thumb,
            { httpMetadata: { contentType: "image/webp" } }
          );

          // Cập nhật database
          await env.DB.prepare(
            "UPDATE files SET thumbnail_key = ? WHERE key = ?"
          ).bind(`thumbs/${key}`, key).run();
        }
      }

      message.ack();
    }
  },
};

7. Migrate từ S3 sang R2

Cloudflare cung cấp 2 công cụ migration chính thức, phù hợp với các tình huống khác nhau:

sequenceDiagram
    participant C as Client
    participant R2 as Cloudflare R2
    participant S3 as AWS S3 (source)

    Note over R2: Sippy đã enabled

    C->>R2: GET /images/photo.jpg
    R2->>R2: Check local storage
    alt Object tồn tại trong R2
        R2-->>C: 200 OK (từ R2)
    else Object chưa có
        R2->>S3: Fetch /images/photo.jpg
        S3-->>R2: Object data
        R2->>R2: Lưu vào R2 storage
        R2-->>C: 200 OK (đã cache)
    end

    Note over C,S3: Lần request tiếp theo sẽ lấy từ R2,
không cần gọi S3 nữa

8. Lifecycle Rules và Infrequent Access

R2 đơn giản hóa storage class chỉ còn 2 tier — không có hàng chục tier gây confusion như S3:

# Wrangler CLI — Quản lý lifecycle rules
# Thêm rule: chuyển sang IA sau 90 ngày, xóa sau 365 ngày
npx wrangler r2 bucket lifecycle add my-bucket \
  --prefix "logs/" \
  --transition-to-ia-after 90 \
  --expire-after 365

# Liệt kê rules hiện tại
npx wrangler r2 bucket lifecycle list my-bucket

# Xóa rule
npx wrangler r2 bucket lifecycle remove my-bucket --id rule-id-123

9. Production Patterns

9.1. CDN Cache + R2 — Tối ưu read-heavy workload

// Worker — Serve R2 objects với CDN caching
export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);
    const key = url.pathname.slice(1);

    // Check Cache API trước
    const cache = caches.default;
    let response = await cache.match(request);
    if (response) return response;

    // Không có cache → lấy từ R2
    const object = await env.MY_BUCKET.get(key);
    if (!object) {
      return new Response("Not Found", { status: 404 });
    }

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

    // Cache static assets 1 năm, dynamic content 1 giờ
    const isStatic = key.match(/\.(js|css|woff2|webp|avif|svg)$/);
    headers.set(
      "cache-control",
      isStatic
        ? "public, max-age=31536000, immutable"
        : "public, max-age=3600, s-maxage=86400"
    );

    response = new Response(object.body, { headers });

    // Lưu vào edge cache
    request.method === "GET" && cache.put(request, response.clone());

    return response;
  },
};

9.2. Access Control — Signed URLs + CORS

// Worker — Kiểm tra auth trước khi cho download
export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    // Verify JWT token
    const token = request.headers.get("Authorization")?.replace("Bearer ", "");
    if (!token) return new Response("Unauthorized", { status: 401 });

    const payload = await verifyJWT(token, env.JWT_SECRET);
    if (!payload) return new Response("Forbidden", { status: 403 });

    const key = new URL(request.url).pathname.slice(1);

    // Kiểm tra quyền truy cập file
    const allowed = await checkPermission(env.DB, payload.userId, key);
    if (!allowed) return new Response("Forbidden", { status: 403 });

    const object = await env.MY_BUCKET.get(key);
    if (!object) return new Response("Not Found", { status: 404 });

    const headers = new Headers();
    object.writeHttpMetadata(headers);
    headers.set("cache-control", "private, no-store");

    return new Response(object.body, { headers });
  },
};

10. So sánh tổng quan với các Object Storage khác

11. Kết luận

Cloudflare R2 không phải là "S3 rẻ hơn" — nó là một mô hình kinh doanh khác biệt cho object storage, loại bỏ hoàn toàn "egress tax" mà cloud providers truyền thống đã tính trong hơn một thập kỷ. Với S3-compatible API, tích hợp sâu Workers tại edge, event notifications, và Sippy migration không downtime — R2 đã sẵn sàng cho production ở mọi quy mô.

Nếu ứng dụng của bạn phục vụ nhiều file cho người dùng cuối (ảnh, video, documents, static assets), R2 có thể giảm 90-98% chi phí storage so với S3. Hãy bắt đầu với free tier (10 GB storage, 10 triệu operations/tháng), migrate dần bằng Sippy, và chỉ trả tiền khi thực sự scale.

Nguồn tham khảo

• Cloudflare R2 Documentation — Cloudflare Docs
• R2 Pricing — Cloudflare Docs
• R2 Event Notifications, GCS Migration, Infrequent Access — Cloudflare Blog
• Workers API Reference — Cloudflare R2 Docs
• Presigned URLs — Cloudflare R2 Docs
• Sippy Incremental Migration — Cloudflare R2 Docs
• Cloudflare R2 vs AWS S3 — Cloudflare