[사진블로그 제작기 -2] cloudflare R2 bucket 사용하기

문제

사진블로그 템플릿 오픈 소스를 써서 내 사진 블로그를 만들고 싶었다.
리드미에서 추천하는 storage는 vercel postgres + vercel blob이었는데, 이러면 별도의 환경변수 셋팅을 안해줘도 돼서 매우 편했지만 vercel blob의 무료 제공 대역폭이 작아서 금방 제한 용량에 도달했다.
리드미를 읽어보니 blob만 쓸 수 있는 건 아니고, cloudflare R2랑 aws S3도 사용할 수 있는 템플릿이었다. 둘 중 cloudflare가 가격정책이 괜찮다는 이야기를 들어서 를 내 사진 블로그의 저장소로 물려보기로 했다.

리드미 읽어보기

Cloudflare R2

1. Setup bucket

• Create R2 bucket with default settings
• Setup CORS under bucket settings:

[{
    "AllowedHeaders": ["*"],
    "AllowedMethods": [
      "GET",
      "PUT"
    ],
    "AllowedOrigins": [
       "http://localhost:3000",
       "https://{VERCEL_PROJECT_NAME}*.vercel.app",
       "{PRODUCTION_DOMAIN}"
    ]
}]

• Enable public hosting by doing one of the following:
  • Select "Connect Custom Domain" and choose a Cloudflare domain
    OR
  • Select "Allow Access" from R2.dev subdomain
    Store public configuration:
    NEXT_PUBLIC_CLOUDFLARE_R2_BUCKET: bucket name
    NEXT_PUBLIC_CLOUDFLARE_R2_ACCOUNT_ID: account id (found on R2 overview page)
    NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_DOMAIN: either "your-custom-domain.com" or "pub-jf90908...s0d9f8s0s9df.r2.dev" (do not include "https://" in your domain)

2. Setup private credentials
   Create API token by selecting "Manage R2 API Tokens," and clicking "Create API Token"
   Select "Object Read & Write," choose "Apply to specific buckets only," and select the bucket created in Step 1
   Store credentials (⚠️ Ensure access keys are not prefixed with NEXT_PUBLIC):
   CLOUDFLARE_R2_ACCESS_KEY
CLOUDFLARE_R2_SECRET_ACCESS_KEY

작업을 모두 마치고 다시 읽어보니 참 친절한 리드미긴하지만,, cloudflare를 가입부터 해야하는 내 입장에서는 모든게 낯설게 느껴졌다.

cloudflare R2

cloudflare 쪽에서 설정해야하는 일들을 순서대로 정리해보면 다음과 같다.

1. 버킷 생성

• 회원가입
• 대시보드 > R2 > 'create bucket'

2. 버킷 설정

• 생성된 bucket으로 이동 > Settings
  • R2.dev subdomain의"Allow Access" 선택
  • CORS Policy에서 리드미에 적혀있는 CORS 세팅 등록

3. 토큰 생성

• Manage R2 API Tokens > Create API Token
• "Object Read & Write" > "Apply to specific buckets only" > 1 에서 생성한 버킷 선택

4. 환경변수로 가져와야 하는 값 확인 (총 다섯 개)

• 버킷명: NEXT_PUBLIC_CLOUDFLARE_R2_BUCKET
• R2 계정식별자: NEXT_PUBLIC_CLOUDFLARE_R2_ACCOUNT_ID
• R2 퍼블릭 도메인 (bucket>setting>R2 subdomain에서 확인 가능): NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_DOMAIN
• 접근 키 1: CLOUDFLARE_R2_ACCESS_KEY
• 접근 키 2: CLOUDFLARE_R2_SECRET_ACCESS_KEY

vercel

이제 vercel에서 위 다섯개 환경변수를 등록하면 끝!
나 같은 경우에는 R2 퍼블릭 도메인 환경 변수인 NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_DOMAIN를 잘못 등록해서 한참 헤맸었다. 내 페이지 도메인이 아니라 public R2 bucket (https://pub-으로 시작하는)을 등록해주어야 했는데 내 페이지 도메인인 photo-of-mizign.vercel.app을 등록해서 bucket에 저장된 이미지를 불러오지 못하고 있었다.

결과

https://photo-of-mizign.vercel.app/

소스코드도 슬쩍 보니까 사진 캐시도 해주는 것 같다. (새로 고침해도 리소스를 매번 잡아먹진 않는 걸 확인함!) 갑자기 이 변방의 블로그가 바이럴타지 않는 이상은 스토리지비용도 무료로 유지가능할 것 같다. 하지만 카드를 연결해놓은 상태라서 좀 겁이 난다. 끝