서론
이번 포스팅에서는 R2 Object Storage를 활성화하고 Workers 프로젝트에 연동하는 방법을 알아보겠습니다.
R2 Object Storage 활성화
R2를 사용하려면 먼저 cloudflare의 dashboard에서 서비스를 활성화 시켜야 합니다. 그렇지 않으면 bucket 생성이 안됩니다.
Add R2 Subscription to my account버튼을 클릭하여 활성화 합니다.
R2 Bucket 생성
다음 명령어를 입력하면 bucket이 생성됩니다 wrangler login이 안되어있으면 로그인 창이 먼저 나오고 그 후 몇 가지 권한을 허용하는 창이 뜨면 Allow합니다.
npx wrangler r2 bucket create <YOUR_BUCKET_NAME>
여기서는 image-bucket이라는 이름의 bucket을 만들어봤습니다.
npx wrangler r2 bucket create image-bucket
로그인 창이 뜨면 로그인 합니다.
권한을 허용합니다.
완료되면 아래 내용이 터미널에 뜨고 브라우저는 닫아도 됩니다.
R2 Bucket 확인
제대로 생성되었는지 확인합니다.
npx wrangler r2 bucket list
cloudflare dashboard에서도 확인해봅니다.
Bucket 생성이 안될 때
R2 Storage Object를 활성화 하지 않으면 bucket 생성 시 다음과 같은 에러가 나옵니다. 그럼 이 포스트의 처음으로 가서 활성화하고 다시 시도하면 됩니다.
wrangler.toml 설정
다음은 workers project root 경로에서 wrangler.toml에서 bucket을 설정하면 사용할 수 있습니다. binding은 js 또는 ts 파일에서 bucket으로 접근하는 R2Bucket이라는 type을 제공하는데 사용됩니다. binding을 "MY_BUCKET"으로 설정하면 프로젝트의 js 또는 ts 파일에서 await env.MY_BUCKET.pub(key, value) 이런 식으로 사용할 수 있습니다. bingding에 대한 자세한 내용은 https://developers.cloudflare.com/workers/runtime-apis/bindings/#what-is-a-binding 에서 확인할 수 있습니다.
binding: js나 ts에서 사용할 bucket의 변수 이름bucket_name: wrangler cli로 생성한 bucket 이름
[[r2_buckets]]
binding = "MY_BUCKET" # valid javascript variable name
bucket_name = "<YOUR_BUCKET_NAME>"
이번 포스팅의 예제에서는 다음과 같이 설정했습니다.
[[r2_buckets]]
binding = "IMAGE_BUCKET"
bucket_name = "image-bucket"
worker-configuration.d.ts 파일 업데이트
새로운 바인딩을 추가했으면 worker-configuration.d.ts을 업데이트합니다. 이 파일은 typescript에서 해당 bindings을 사용하는데 필요한 적절한 type definition을 제공하고 에디터에서 code completion을 사용할 수 있게 합니다.
npx wrangler types
# or
npm run cf-typegen
프로젝트 루트에서 worker-configuration.d.ts 찾습니다
업데이트된 내용을 확인합니다.
코드에서는 다음과 같이 사용합니다.
결론
R2 Object Storage 를 사용하기 위해서는 먼저 Dashboard에서 활성화 해야합니다. 그 뒤 npx wrangler r2 bucket create <YOUR_BUCKET_NAME>로 bucket을 생성하고 wrangler.toml에서 binding을 설정한 뒤 npx wrangler types를 통해 typescript에서 사용할 수 있게 합니다.
다음 포스팅에서는 연동된 R2에 이미지를 업로드하는 방법을 알아보겠습니다.