R2 Storage 사용법

Cloudflare의 강력한 이미지 호스팅 서비스를 사용해봅시다.

사용 이유

무료입니다. 무료로 이미지 호스팅을 전문적으로 관리할 수 있는 몇 안되는 서비스입니다.
처음부터 파일 호스팅을 위한 서비스이므로 악용 염려도 없습니다.

로그인 및 환경설정

여기에 들어가서 로그인해주세요.

이러한 창이 뜨면 정상적으로 로그인된 것입니다.

언어가 한국어가 아닌 경우

1. 우측 상단 프로필 아이콘 클릭
2. 4번째 항목 클릭 (화살표 표시가 있습니다.)
3. 한국어 선택

스토리지 따라가기

좌측 사이드바에서, 아래 순서대로 클릭하시면 들어가실 수 있습니다.

1. 스토리지 및 데이터베이스 클릭
2. R2 Object Storage 클릭
3. 개요 클릭

이와 같은 창이 뜨면 성공입니다.

카드 등록

무료이긴 하지만, 사용량이 지나치게 많아질 경우 추가 요금을 청구해야 하기 때문에 카드 등록이 필요합니다.
개인이 이용하는 수준으로는 추가 요금이 발생할 일은 거의 나오지 않으니 안심하고 등록해주세요.

이와 같은 창이 떴다면 정상적으로 등록된 것이 맞습니다.

⚠️ 주의

우측 하단의 Account ID와 S3 API 정보는 어디에도 노출하지 마세요.

버킷 생성

최초 1회만 생성해도 됩니다. 우측 상단의 버킷 생성 (파란 버튼)을 눌러주세요.

아래 순서대로 눌러주세요.

1. 버킷 이름 설정 (아무거나 해도 괜찮습니다.)
2. 버킷 생성 클릭

이와 같은 창이 뜨면 성공입니다.

강력 권장사항

버킷의 최상위 폴더는 작품마다 생성하는 것을 강력히 권장하고 있습니다.
이는 추후 폴더 관리가 용이하기 때문에 그렇습니다.

우측 상단의 디렉터리 추가 버튼을 눌러주세요.

이와 같은 창이 떴다면, 아래 순서대로 눌러주세요.

1. 디렉터리 이름 설정 (캐릭터 제목 관련이면 좋습니다.)
2. 디렉터리 생성 클릭

이와 같은 창이 뜨면 성공입니다.

이후의 이미지 등록 및 관리 방법은 일반적인 컴퓨터 폴더 시스템과 동일합니다.

Workers 연결

기업의 경우 유료 도메인을 사서 구매해야 제한 없이 전송할 수 있지만,
여기서는 개인이 소규모로 다루기 때문에 Workers를 사용할 것입니다.

일일 10만 건의 제한이 있기는 하지만 걱정하지는 마세요. 차고 넘칩니다.

좌측 사이드바에서, 아래와 같이 링크를 타고 들어가주세요.

1. 컴퓨팅 및 AI 클릭
2. Workers 및 Pages 클릭

아래 창이 나타났다면 성공입니다.
우측 상단의 응용 프로그램 배포를 눌러 주세요.

Hello World로 시작하십시오! 를 눌러 주세요.

배포를 눌러주세요.
여기서 가린 부분은 사적 이메일이라 그렇습니다. (해당 부분은 공개되어도 되는 부분입니다.)

상단의 바인딩을 눌러주세요.

바인딩 추가를 눌러주세요.

1. R2 버킷을 눌러주세요.
2. 바인딩 추가를 눌러주세요.

1. 변수명을 BUCKET (대문자) 로 설정해주세요.
2. 생성한 버킷을 클릭해주세요.
3. 배포를 눌러주세요.

아래와 같이 화면에 무언가 새로 추가되었다면 성공입니다.
좌측 상단의 개요를 클릭해 돌아갑니다.

우측 상단의 코드 편집을 클릭합니다.

해당 부분에 있는 코드를 모두 삭제하고, 대신 아래 코드를 붙여넣으세요.

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    const key = url.pathname.slice(1);
    
    const cache = caches.default;
    
    let response = await cache.match(request);
    if (response) return response;

    const object = await env.BUCKET.get(key);

    if (object === null) return new Response('Not Found', { status: 404 });

    const headers = new Headers();

    object.writeHttpMetadata(headers);
    headers.set('etag', object.httpEtag);
    headers.set('Access-Control-Allow-Origin', '*');
    headers.set('Cache-Control', 'public, max-age=31536000, immutable');

    response = new Response(object.body, { headers });

    ctx.waitUntil(cache.put(request, response.clone()));
    return response;
  },
};

위와 같이 파일 경로를 대입하고 이동을 눌렀을 때, 이미지가 뜨면 성공입니다.

우측 상단의 배포를 눌러 저장하면 모든 절차가 끝났습니다.
이제 이 링크를 이용하면 어디서든 자신만의 이미지를 공유할 수 있습니다.