cloudflare R2 연동

⭐ cloudflare R2란?

 

cloudflare 자체는 플랫폼 전체를 의미하며 그중에 R2는 스토리지 기능 하나를 의미합니다.

즉, cloudflare R2는 대용량 파일(이미지, 영상, 데이터 등)을 저장하는 클라우드 스토리지 서비스입니다.

 

🌍 특징

1. AWS S3 등은 데이터를 꺼낼 때 비용이 들지만 R2는 데이터 다운로드 비용이 없음

2. AWS S3 API와 거의 동일하여 기존 S3 코드 그대로 쓰기 쉬움

3. cloudflare의 CDN 서비스와 결합되어 데이터 전송속도가 빠름

AWS S3와 간단 비교

구분	Cloudflare R2	AWS S3 (Standard)
데이터 송신료	무료 ($0)	유료 (GB당 부과)
저장 비용	약 $0.015 / GB	약 $0.023 / GB (리전별 상이)
호환성	S3 API 호환	표준 S3 API
리전 설정	자동 (글로벌 분산)	사용자 직접 선택

 

문서검색시스템을 개발하면서 다운로드 파일의 실체를 어디에서 관리를 하면 좋을까 고민하다가

AWS S3는 프리티어라 해서 처음 가입하면 1년동안 5GB 용량 무료혜택이라는 좋은 부분이 있었지만,

cloudflare R2 또한 무료혜택으로 10GB 저장 무료라고 하더군요.

저는 이미 가입한지 수년이 지난 지금 새롭게 가입하는 것보다 사용하지 않은 것을 해보자는 마음에

cloudflare R2를 선택하게 되었습니다.

 

 

⭐ cloudflare R2 시작하기

우선 cloudflare 홈페이지에 들어가줍니다.

 

https://www.cloudflare.com/ 

Connect, protect, and build everywhere

 

구글에 cloudflare라고 검색하셔도 최상단에 바로 사이트가 노출되어 있습니다.

 

로그인을 하시게 되면

 

 

 

해당 부분을 클릭해주시게 되면

 

 

위와 같이 결제수단을 등록하라고 뜹니다.

 

cloudflare에서 봇(Bot)이나 서비스를 남용하는 것을 막기 위해 실제 카드가 있는지 확인하는 과정이라고 합니다.

 

무료 범위(10GB 등) 내에서는 결제가 절대 되지 않는다고 나와있으니 확인 후 등록하시면 됩니다.

 

저는 잔고가 0원인 체크카드로 등록했습니다 :)

 

 

 

위와 같이 뜨면 카드 등록이 정상적으로 완료되었습니다.

 

 

다시 R2 object storage ->  Overview로 가시면

 

위 사진과 같이 뜨게 되는데 여기에서 Create bucket을 눌러주면 됩니다.

 

 

Location중 Automatic은 cloudflare가 알아서 최적 위치를 선택합니다.

보통 사용자와 가까운 지역을 선택하는데, 아시아면 Asia Pacific을 선택한다고 합니다.

Specify jurisdiction은 특정 지역/국가에서만 저장하도록 제한을 두는것입니다.

 

Default Storage Class에서 Standard는 자주 사용하는 데이터용, 빠르게 접근 가능, 기본 옵션

즉, 이미지, 사용자 업로드 파일, API에서 자주 읽는 데이터 용도입니다.

 

Infrequent Access는 거의 안쓰는 데이터용, 저장 비용은 더 싸지만 읽을 때 비용/지연 증가

즉, 백업 파일, 로그 저장, 오래된 데이터 용도입니다.

 

Automatic, Standard를 선택하고 Create bucket을 누릅니다.

 

 

위의 설정에서는 토큰명을 적으시고

 

권한은 Object Read & Write로 하면 됩니다.

 

그 다음 우측 하단의 파란색 버튼을 클릭하게 되면 최종적으로

 

Access Key ID, Secret Access Key 를 발급받게 되는데, 절대 창을 닫지 말고 따로 메모장에 복사해두세요!

 

여기까지 마무리 했으면, 

 

R2_ACCESS_KEY_ID=복사한_Access_Key_ID
R2_SECRET_ACCESS_KEY=복사한_Secret_Access_Key
R2_ACCOUNT_ID=사진에_있던_Account_ID
R2_BUCKET_NAME=생성한_Bucket_Name

 

위와 같이 .env 파일을 생성해줍니다. Account ID는 R2의 Overview에 들어가시면

 

우측에 Account Details란에 Account ID가 있는 것을 확인할 수 있습니다.

 

 

npm install @aws-sdk/client-s3 @aws-sdk/lib-storage dotenv

 

R2(S3 호환)와 연결할 npm module을 설치합니다.

 

업로드 테스트용 js파일을 하나 만드신 후 

 

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import "dotenv/config";

// 1. R2 클라이언트 설정
const s3 = new S3Client({
  region: "auto",
  endpoint: process.env.R2_ENDPOINT,
  credentials: {
    accessKeyId: process.env.R2_ACCESS_KEY_ID,
    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY,
  },
});

async function uploadTest() {
  const params = {
    Bucket: process.env.R2_BUCKET_NAME,
    Key: "test-file.txt", // R2에 저장될 파일 이름
    Body: "Hello R2! This is a test upload.", // 파일 내용
    ContentType: "text/plain",
  };

  try {
    const data = await s3.send(new PutObjectCommand(params));
    console.log("업로드 성공!", data);
  } catch (err) {
    console.error("업로드 실패:", err);
  }
}

uploadTest();

 

위와 같이 코드를 작성해줍니다.

 

S3Client : R2 서버와 컨넥션 하기 위한 메인 통신 장비

PutObjectCommand : 파일을 집어넣기 위한 구체적인 명령서

dotenv/config : 아까 만든 .env 파일의 정보를 읽어와서 process.env에 넣어줌

 

s3 변수는 이제 내 서버와 R2 사이의 전용통로가 되며, 해당 설정이 틀리면 "권한 없음" 또는 "주소 오류"가 발생합니다.

 

s3.send를 통해 R2 서버로 데이터를 전송합니다.

 

 

성공을 하게 되면 위와 같이 응답이 오면서 실제 cloudflare에서 R2의 Overview로 들어가

 

아까 생성했던 Bucket을 확인하게 되면

 

 

위와 같이 테스트파일이 생성된 것을 확인할 수 있습니다.