Cloudflare R2로 미디어 관리하기

npx wrangler r2 bucket create sw-blog-media

# wrangler.toml
[[r2_buckets]]
binding = "MEDIA"
bucket_name = "sw-blog-media"

// src/app/api/media/route.ts
import { getRequestContext } from "@cloudflare/next-on-pages";
 
export const runtime = "edge";
 
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const key = searchParams.get("key");
  if (!key) return Response.json({ error: "key required" }, { status: 400 });
 
  const bucket = getRequestContext().env.MEDIA;
  const object = await bucket.get(key);
  if (!object) return new Response("Not Found", { status: 404 });
 
  return new Response(object.body, {
    headers: {
      "Content-Type": object.httpMetadata?.contentType ?? "application/octet-stream",
      "Cache-Control": "public, max-age=31536000, immutable",
    },
  });
}

export async function POST(request: Request) {
  const formData = await request.formData();
  const files = formData.getAll("files") as File[];
  const folder = formData.get("folder") as string | null;
  const bucket = getRequestContext().env.MEDIA;
 
  for (const file of files) {
    const timestamp = Date.now();
    const key = folder
      ? `${folder}/${timestamp}-${file.name}`
      : `${timestamp}-${file.name}`;
 
    await bucket.put(key, await file.arrayBuffer(), {
      httpMetadata: { contentType: file.type },
    });
  }
 
  return Response.json({ success: true });
}

function isAuthorized(request: Request): boolean {
  const password = request.headers.get("x-admin-password");
  const adminPassword =
    getRequestContext().env.ADMIN_PASSWORD ?? process.env.ADMIN_PASSWORD;
  return !!password && !!adminPassword && password === adminPassword;
}

const listed = await bucket.list({
  prefix: folder ? `${folder}/` : undefined,
  delimiter: "/",
  limit: 500,
});
 
const folders = (listed.delimitedPrefixes ?? []).map((p) => p.replace(/\/$/, ""));
const items = listed.objects.map((obj) => ({
  key: obj.key,
  size: obj.size,
  uploaded: obj.uploaded.toISOString(),
}));

const orderKey = prefix ? `${prefix}.order.json` : ".order.json";
const orderObj = await bucket.get(orderKey);
 
let items = allItems;
if (orderObj) {
  const order = (await orderObj.json()) as string[];
  const orderMap = new Map(order.map((k, i) => [k, i]));
  items = [...allItems].sort((a, b) => {
    const ai = orderMap.get(a.key) ?? Infinity;
    const bi = orderMap.get(b.key) ?? Infinity;
    return ai - bi;
  });
}

// PUT
const orderKey = folder ? `${folder}/.order.json` : ".order.json";
await bucket.put(orderKey, JSON.stringify(order), {
  httpMetadata: { contentType: "application/json" },
});

const allItems = listed.objects.filter(
  (obj) => !obj.key.endsWith(".order.json"),
);

export async function DELETE(request: Request) {
  const { key, folder, keys, folders } = await request.json();
  const bucket = getRequestContext().env.MEDIA;
  const allKeys: string[] = [];
 
  if (key) allKeys.push(key);
  if (keys) allKeys.push(...keys);
 
  const folderList = folder ? [folder] : folders ?? [];
  for (const f of folderList) {
    const listed = await bucket.list({ prefix: `${f}/`, limit: 500 });
    allKeys.push(...listed.objects.map((obj) => obj.key));
  }
 
  await bucket.delete(allKeys);
  return Response.json({ success: true, deleted: allKeys.length });
}

// 이렇게 하면 안 됨
fetch("/api/media", {
  method: "POST",
  headers: { "Content-Type": "multipart/form-data" },
  body: formData,
});

const range = request.headers.get("Range");
if (range) {
  const match = range.match(/bytes=(\d+)-(\d*)/);
  if (match) {
    const start = Number(match[1]);
    const end = match[2] ? Number(match[2]) : undefined;
    const object = await bucket.get(key, {
      range: { offset: start, length: end !== undefined ? end - start + 1 : undefined },
    });
    if (!object) return new Response("Not Found", { status: 404 });
    const size = object.size;
    const actualEnd = end !== undefined ? end : size - 1;
    return new Response(object.body, {
      status: 206,
      headers: {
        "Content-Type": object.httpMetadata?.contentType ?? "application/octet-stream",
        "Content-Range": `bytes ${start}-${actualEnd}/${size}`,
        "Content-Length": String(actualEnd - start + 1),
        "Accept-Ranges": "bytes",
      },
    });
  }
}

const listed = await bucket.list({ prefix: `${from}/`, limit: 1000 });
 
for (const obj of listed.objects) {
  const newKey = obj.key.replace(from, to);
  const data = await bucket.get(obj.key);
  if (!data) continue;
  await bucket.put(newKey, await data.arrayBuffer(), {
    httpMetadata: data.httpMetadata,
  });
}
 
await bucket.delete(listed.objects.map((obj) => obj.key));