클라우드 플레어 R2에 이미지 업로드 하는 방법

bun add -D wrangler@latest # 또는 pnpm, npm 사용 가능

wrangler login

bunx wrangler r2 bucket list # 또는 npx wrangler r2 bucket list

bun add @aws-sdk/client-s3 sharp

R2_ACCESS_KEY_ID=your_access_key_id
R2_SECRET_ACCESS_KEY=your_secret_access_key
R2_BUCKET_NAME=your_bucket_name
R2_ACCOUNT_ID=your_account_id

import { z } from "zod";
const envSchema = z.object({
  R2_ACCESS_KEY_ID: z.string().min(1),
  R2_SECRET_ACCESS_KEY: z.string().min(1),
  R2_BUCKET_NAME: z.string().min(1),
  R2_ACCOUNT_ID: z.string().min(1),
  // 기타 환경 변수들...
});
const parsed = envConfigSchema.safeParse(process.env);
 
if (!parsed.success) {
  console.error("❌ Invalid environment variables:", parsed.error.issues);
  process.exit(1); // 잘못된 경우 서버 실행 중단
}
 
export const envConfig = parsed.data;

import { S3Client } from "@aws-sdk/client-s3";
import { envConfig } from "@/config/env";
 
export const r2Client = new S3Client({
  region: "auto", // R2는 region 개념 없음
  endpoint: `https://${envConfig.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
  credentials: {
    accessKeyId: envConfig.R2_ACCESS_KEY_ID,
    secretAccessKey: envConfig.R2_SECRET_ACCESS_KEY,
  },
});

import { Context } from "hono";
import sharp from "sharp";
import { r2Client } from "@/libs/r2Client.ts";
import { PutObjectCommand } from "@aws-sdk/client-s3";
import { envConfig } from "@/config/env.ts";
 
export const uploadController = async (c: Context) => {
  const formData = await c.req.formData();
  const file = formData.get("file") as File | null;
 
  const originalName = file?.name || "unknown";
  const folder = "uploads";
 
  const mimeType = file?.type;
 
  if (!file) {
    return c.json({ message: "파일이 없습니다." }, 400);
  }
 
  if (!mimeType?.startsWith("image/")) {
    return c.json({ message: "이미지 파일만 업로드할 수 있습니다." }, 400);
  }
 
  // 파일 이름과 확장자 설정
  const ext = originalName.split(".").pop();
  const filename = `${Date.now()}.${ext}`;
  const key = `${folder}/${filename}`;
 
  // file을 Buffer로 변환
  const arrayBuffer = await file.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);
 
  // sharp를 사용하여 이미지 리사이징
  // 이 부분은 필요에 따라 조정하세요
  // 원본이 필요하다면 이 부분을 제거하세요
  const resized = await sharp(buffer)
    .resize({ width: 1200, withoutEnlargement: true }) // 최대 너비 1200px, 확대 방지
    .toBuffer(); // format 지정 안 하므로 원본 포맷 유지
 
  // R2에 업로드할 키 생성
  await r2Client.send(
    new PutObjectCommand({
      Bucket: envConfig.R2_BUCKET_NAME,
      Key: key,
      Body: resized,
      ContentType: mimeType, // 클라이언트에서 받은 타입 그대로
    }),
  );
 
  const url = `https://${envConfig.R2_ACCOUNT_ID}.r2.cloudflarestorage.com/${envConfig.R2_BUCKET_NAME}/${key}`;
 
  // 이미지 업로드 후 URL 반환
  console.log("Uploaded image URL:", url);
 
  // db에 메타정보 저장하는 로직 추가 가능
  // const [image] = await db
  //   .insert(imagesTable)
  //   .values({
  //     folder,
  //     filename,
  //     url,
  //     refId,
  //   })
  //   .returning();
 
  return c.json({ url });
};

https://<your-custom-domain.com>/uploads/your-image-file-name.jpg

// ... 생략
await r2Client.send(
  new PutObjectCommand({
    Bucket: envConfig.R2_BUCKET_NAME,
    Key: key,
    Body: resized,
    ContentType: mimeType, // 클라이언트에서 받은 타입 그대로
  }),
);
const url = `https://<your-custom-domain.com>/${key}`; // 도메인은 차후 생성후 env 변수로 관리하세요.
// ...

import { randomUUID } from "crypto";
 
const createSafeFileName = (originalName: string) => {
  const ext = originalName.split(".").pop()?.toLowerCase() || "png";
 
  // 파일명만 추출
  const base = originalName.replace(/\.[^/.]+$/, "");
 
  // 영문/숫자/ - _ 만 허용 (한글, 공백, 특수문자 제거)
  const safeBase = base.replace(/[^a-zA-Z0-9-_]/g, "");
 
  // URL safe
  const encoded = encodeURIComponent(safeBase || "file");
 
  return `${Date.now()}-${randomUUID()}-${encoded}.${ext}`;
};

// ... 생략
import { createSafeFileName } from "@/utils/createSafeFileName.ts";
 
export const uploadController = async (c: Context) => {
  const formData = await c.req.formData();
  const file = formData.get("file") as File | null;
 
  if (!file) {
    return c.json({ message: "파일이 없습니다." }, 400);
  }
 
  const mimeType = file.type;
  if (!mimeType.startsWith("image/")) {
    return c.json({ message: "이미지 파일만 업로드할 수 있습니다." }, 400);
  }
 
  const arrayBuffer = await file.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);
 
  const folder = "uploads";
  const safeFilename = createSafeFileName(file.name);
  const key = `${folder}/${safeFilename}`;
 
  const resized = await sharp(buffer)
    .resize({ width: 1200, withoutEnlargement: true })
    .toBuffer();
 
  await r2Client.send(
    new PutObjectCommand({
      Bucket: envConfig.R2_BUCKET_NAME,
      Key: key,
      Body: resized,
      ContentType: mimeType,
    }),
  );
 
  const url = `${envConfig.CDN_URL}/${key}`;
 
  // 필요에따라 DB 저장 로직 추가 가능
  // const [image] = await db
  //   .insert(imagesTable)
  //   .values({
  //     folder,
  //     filename: safeFilename,
  //     url,
  //     refId,
  //   })
  //   .returning();
 
  return c.json(
    {
      message: "File uploaded successfully",
      name: safeFilename,
      url,
    },
    200,
  );
};