이미지 호스팅 솔루션: Cloudflare R2 + PicGo + WebP Cloud

들어가며

그동안 제 이미지 호스팅은 Cloudflare + Telegraph라는 두 은인에게 기대고 있었습니다. 그들이 제 블로그보다 더 오래 살아남을 거라고 생각했기 때문에, 이 구성이 충분히 믿을 수 있고 쓰기 쉬우며 무엇보다 무료인 장기 솔루션이라고 여겼습니다.

하지만 최근 텔레그램 CEO가 체포되었고, 한국도 검열 문제로 텔레그램과 갈등을 겪고 있습니다. 이 영향 때문인지 Telegraph의 이미지 호스팅 서비스에는 더 이상 새 이미지를 업로드할 수 없게 되었습니다. 기존 이미지에는 아직 접근할 수 있지만 언제 사라질지 모릅니다.

그래서 새로운 이미지 호스팅 솔루션을 찾아보았고, 제 기준은 믿을 수 있고 쓰기 쉬우며, 가급적 무료였습니다. Cloudflare R2 + PicGo + WebP Cloud가 바로 그런 솔루션입니다.

이 글은 주로 이 포스트를 참고했고, WebP Cloud 사용자 지정 도메인과 Telegraph에서 R2 이미지 호스팅으로 이미지 옮기기 내용도 포함합니다.

구축

2024년 9월 시점에는 제 구축 방식이 유효하다는 것을 보장합니다.

준비물

1. Cloudflare 계정 및 신용카드 등록(R2를 활성화하는 데 필요)
2. 도메인 하나(필수는 아니지만, 있으면 더 멋집니다)

그럼 시작해 볼까요...

Cloudflare R2 활성화

1. Cloudflare 대시보드를 열고 R2를 선택합니다. 여기서 R2의 무료 할당량을 확인할 수 있으며, 동의 후 활성화를 진행합니다.
2. 새 버킷을 생성합니다(Create bucket)
   1. 마음에 드는 이름을 입력합니다. 예: image.
   2. 원하는 리전을 선택합니다. 예: APAC.
   3. Create bucket을 클릭해 생성합니다.
3. 방금 만든 image 버킷을 클릭합니다.
   1. 도메인이 있다면 setting으로 들어가 Custom Domains를 설정합니다. (도메인이 Cloudflare에 있다면 바로 아주 빠르게 추가할 수 있습니다.)
   2. 도메인이 없다면 setting에서 R2.dev subdomain 옆의 Allow Access를 클릭하고 allow를 입력합니다. 그러면 xxxxxx.r2.dev 형식의 주소를 얻게 됩니다.
   3. 이제 이미지를 업로드할 수 있습니다. image 버킷의 Objects 섹션에서 이미지를 업로드해 테스트해 보세요.
4. 이제 페이지 왼쪽의 R2를 클릭해 Overview로 돌아갑니다. Account details에서 Account ID 아래의 Manage R2 API Tokens를 클릭합니다.
   1. Create API token을 클릭해 새 API 토큰을 생성합니다.
   2. 이름을 지정합니다. 예: image-R2.
   3. Permission은 Object Read & Write를 선택합니다.
   4. Specify buckets에서 방금 만든 image를 선택합니다.
   5. Create API Token을 클릭해 생성합니다.
   6. Access Key ID, Secret Access Key, endpoints 등 PicGo에 필요한 정보를 얻을 수 있습니다. 한 번만 표시되므로 꼭 저장해 두세요.
5. 이로써 Cloudflare 대시보드에서 진행할 작업은 끝났습니다.

PicGo 설정

1. PicGo를 다운로드합니다.
2. 설치 후 플러그인 설정을 열고 s3를 검색해서 개발자가 WayJam So인 플러그인을 찾아 설치합니다.
3. 이미지 호스팅 설정으로 들어가 Amazon S3를 찾아 기본 설정을 추가하거나 수정합니다.
   1. 이미지 호스팅 구성 이름은 아무거나 입력합니다. 예: r2.
   2. Access Key ID 항목에는 발급받은 Access Key ID를 입력합니다.
   3. Secret Access Key 항목에는 발급받은 Secret Access Key를 입력합니다.
   4. 버킷 이름은 설정한 버킷 이름인 image를 입력합니다.
   5. 사용자 지정 엔드포인트에는 endpoints 값을 입력합니다.
   6. 사용자 지정 도메인에는 설정한 Custom Domains 또는 Cloudflare가 할당한 xxxxxx.r2.dev 주소를 입력합니다.
   7. 확인을 클릭합니다.
4. 이제 PicGo로 이미지를 업로드할 수 있습니다.

WebP Cloud로 주소 프록시 설정하기

1. WebP Cloud Dashboard에 접속해 로그인합니다.
2. 왼쪽의 Price 메뉴에 들어가면 무료 할당량을 확인할 수 있습니다.
3. 왼쪽의 Home 메뉴로 들어가 아래로 스크롤한 뒤 Create Proxy를 클릭합니다.
   1. 원하는 리전을 선택합니다. 저는 Hillsboro, OR를 선택했습니다.
   2. Proxy Name은 아무거나 입력합니다. 예: R2-image.
   3. Proxy Origin URL에는 설정한 Custom Domains 또는 Cloudflare가 할당한 xxxxxx.r2.dev 주소를 입력합니다.
   4. Create를 클릭해 생성합니다.
   5. 그러면 xxxxxx.webp.li 주소가 할당됩니다.
4. 사용자 지정 도메인을 설정하려면 방금 만든 Proxy로 들어가 Custom domain을 클릭합니다. 안내에 따라 DNS 레코드에 해당 항목을 추가하고 잠시 기다리면 Custom domain에서 사용자 지정 도메인을 활성화할 수 있습니다.
5. 다음으로 PicGo의 사용자 지정 도메인을 WebP Cloud에서 설정한 사용자 지정 도메인 또는 WebP Cloud가 할당한 xxxxxx.webp.li 주소로 변경합니다.

이미지 옮기기

Telegraph 이미지 호스팅에 보관된 이미지가 꽤 많아서 전부 R2로 옮기고 싶었습니다. PicGo의 플러그인 pic-migrater가 좋은 선택지입니다. 개발자는 Molunerfinn입니다.

1. 플러그인을 다운로드한 뒤, 플러그인 설정에서 플러그인 오른쪽 아래의 톱니바퀴를 클릭하고 plugin - picgo-plugin-pic-migrater 설정을 클릭합니다.
2. 새 파일 이름의 접미사는 아무거나 입력합니다. 예: _new.
3. 기존 내용을 새 파일에 쓰기를 no로 설정했습니다. 변환된 파일은 원본 파일 이름_new.md로 저장되므로 해당 파일들을 편하게 검토할 수 있습니다.

하지만 일부 markdown 파일은 pic-migrater가 마이그레이션하지 못하는 경우가 있습니다. 해결 방법은 아직 모르겠습니다. 제 경우에는 마이그레이션되지 않고 남은 파일을 하나씩 수동으로 처리했습니다.

마치며

할 말은 여기까지입니다.