cloudflare images에서 direct uploads 활용해서 유저가 직접 업로드 하도록 구현하기

왜 direct uploads 기능을 사용해야 할까?

cloudflare말고도 다른 스토리지에서도 direct uploads를 지원하고 있다. 가격적인 면에서 cloudflare images가 좋아보여서 사용하고 있지만 다른 스토리지를 사용하더라도 direct uploads 기능이 가능하다면 이용하는 것이 좋다. 유저가 직접 업로드를 하게되면 서비스를 운영하는 서버의 부하도 감소 시킬 수 있고 비용도 절감할 수 있기 때문이다. 일반적인 상황을 보면 유저는 서비스가 운영되는 서버에 이미지를 전달하고, 그 서버에서 스토리지에 다시 이미지를 저장하는 순서가 될 것이다.

즉 유저 -> 서비스가 올려져 있는 서버(자사 서버) -> 외부 스토리지에 업로드 -> 이미지에 접근할 수 있는 url을 자사 서버에 전달 -> DB에 이미지 url 저장이라는 순서가 될 것이다. 하지만 직접 업로드 할 수 있게 되면 유저 -> 외부 스토리지에 업로드 -> 이미지에 접근할 수 있는 url 획득 -> 해당 url과 다른 데이터들을 자사 DB에 저장할 수 있게되고 이미지를 옮기는 사이에 낭비되는 불필요한 자원들을 감소시킬 수 있는 것이다.

토큰 생성하기

우선 클라우드 플레어 이미지에 회원가입을 해야한다. (이동하기)

그 후엔 네비게이션의 계정관리 > 계정 API 토큰을 클릭해서 이동 후 토큰 생성 버튼을 누르면 된다.

그 후엔 사용자 설정 토큰 생성 버튼을 누르면 된다.

토큰 이름엔 내가 구분할 수 있는 값을 적어주고, 권한에는 계정, cloudflare images, 편집을 선택한 후 요약 계속을 누르면 된다. api key의 경우 화면에서 떠나면 다시는 확인할 수 없으니 잘 저장해둬야 한다.

직접 업로드 구현하기

공식문서를 찾아보면 직접 업로드의 경우 /accounts/{account_id}/images/v2/direct_upload으로 보내면 업로드 url을 받을 수 있다고 나온다.

const response = await fetch( "https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v2/direct_upload",
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.API_KEY || ""}`,
      },
    }
  );

// 업로드 url 예시
//https://upload.imagedelivery.net/{계정 해시}/e22e9e6b-c02b-42fd-c405-6c32af5fe600

받은 API키는 Bearer를 붙여서 url을 통해서 보내주면 직접 업로드할 수 있는 url을 받을 수 있다.

const uploadUrl = https://upload.imagedelivery.net/{계정 해시}/e22e9e6b-c02b-42fd-c405-6c32af5fe600;

const formData = new FormData();
const file = files[0];
formData.append("file", file);
// formData를 생성한 후 이미지를 file이란 이름으로 담아준다.

const response = await fetch(uploadUrl , {
  method: "POST",
  body: formData,
})

업로드 후 접근할 수 있는 아이디나 주소를 받았다면 DB에 데이터를 저장할 때 해당 부분을 저장하고, 이미지를 불러올 때는 저장한 부분 뒤에 내가 지정한 변형을 붙여서 사용하면 된다.