Cloudflare R2 사용법 - 나만의 이미지 호스팅 서버 만들기

Cover Image for Cloudflare R2 사용법 - 나만의 이미지 호스팅 서버 만들기
swhan
· 4 min read

Cloudflare의 글로벌 객체 스토리지 R2를 이용해서 무료 이미지 호스팅 서버 만드는 방법을 알아봅시다.

들어가며

이전 Cloudflare R2 소개, 내부 아키텍처 알아보기 포스팅에서 클라우드플레어의 객체 스토리지R2를 간단하게 알아보았는데요, 이제 네트워크 송신료 없는 R2의 장점을 살려서 나만의 정적 콘텐츠 서버(이미지, JS, CSS 등등) 만드는 방법을 알아보겠습니다.

버킷 생성

버킷 생성은 aws s3 api, wrangler(클라우드플레어 cli), 웹 대시보드 이렇게 세가지 방법이 있는데요, 저희는 빠르게 시작하기 위해서 웹 기반 dashboard를 이용하도록 하겠습니다.

R2 개체 저장 공간 탭 들어가신 후 R2 서비스 활성화 해주시고

  • 위치: 자동 (위치 힌트 아시아 태평양 APAC)
  • 클래스: 표준

위 옵션으로 r2-test라는 테스트용 버킷 생성하고, hello-r2.webp 이미지 파일 하나 업로드 해주겠습니다.

r2 버킷 생성 스크린샷

r2 객체 업로드 스크린샷

버킷 공개

보안을 위해 R2 버킷은 기본적으로 공개적으로 접근할 수 없습니다.

인터넷에서 버킷에 공개적으로 접근하기 위해서 클라우드플레어는 두 가지 방법을 권장하는데요, 두 방법이 어떤 차이가 있는지 알아보겠습니다.

r2 버킷 공개 설정 방법 스크린샷

공개 개발 URL

프로덕션보다는 개발 및 테스트 용도로 권장되는 도메인 입니다. cloudflare가 관리하는 https://r2.dev의 서브도메인으로 발급되는 구조인데요, 클라우드플레어 개발자 문서를 보시면 액세스 제어 및 캐싱과 같은 Cloudflare 기능을 사용하지 못하고, 초당 100개의 요청으로 속도 제한이 적용됩니다.

사용 버튼 눌러서 allow 입력 후 활성화하면

r2 공개 개발 URL 활성화 스크린샷

https://pub-xxxx.r2.dev 이렇게 r2.dev의 서브 도메인이 발급되는데요, 저희가 버킷 생성할 때 업로드한 hello-r2.webp파일 curl 이용해서 확인해보면

curl -I 'https://pub-xxxx.r2.dev/hello-r2.webp'

HTTP/1.1 200 OK
Content-Type: image/webp
...
Server: cloudflare

응답 잘 나오고, 브라우저에서도 접근해보면

r2 공개 개발 URL 객체 가져오기 스크린샷

동일하게 잘 표시되는 것을 볼 수 있습니다.

사용자 지정 도메인

이제 언젠가 초당 100개 이상의 요청을 받는 블로그로 성장했을 때를 대비해서 속도 제한이 걸리지 않도록, 사용자 지정 도메인(custom domain)을 연결해 보도록 하겠습니다.

R2 개체 저장 공간 - 설정 탭에서 사용자 지정 도메인 추가 버튼 클릭 후

  • 도메인: 버킷 호스팅에 사용할 주소. 저는 img를 서브도메인으로 선택했습니다.
  • 최소 TLS: 최소 TLS 버전. 1.1 정도면 호환성 걱정 없습니다.

r2 사용자 지정 도메인 설정 스크린샷

이렇게 옵션 넣어주시고 계속 버튼 눌러주시면 cloudflare가 CNAME 레코드를 이용해서 버킷과 연결해 주는데요

nslookup img.day1swhan.com

Name:	img.day1swhan.com
Address: 104.21.87.14
Name:	img.day1swhan.com
Address: 172.67.139.37
curl -I https://img.day1swhan.com/hello-r2.webp

HTTP/2 200
content-type: image/webp
...
server: cloudflare

r2 사용자 지정 도메인 객체 가져오기 스크린샷

nslookup, curl, 브라우저 모두 정상적으로 응답하는 것을 보실 수 있습니다.

마무리

이렇게 간단하게 R2를 이용해서 무료 이미지 호스팅 서버 만드는 방법을 알아보았는데요, 다음 포스팅들을 통해서 R2를 조금 더 전문적으로 사용할 수 있도록 CORS 설정, CDN 캐싱, Workers 연결, S3 SDK, S3 CLI 이용 방법을 알아보도록 하겠습니다.