15 CLOUDFLARE IMAGES - 사진 다루기

이제 훅 연습은 끝!!

15.0 Introduction
cloudfare images로 이미지를 추가해보자~
egress cost = 대역폭(bandwidth에 요금 내는거)
이미지 100,000개에 5달러.
이미지 resizing,최적화에도 돈 안받음.

15.1 Image Preview
blob: Binary Large Object
A binary large object is a collection of binary data stored as a single entity. Blobs are typically images, audio or other multimedia objects, though sometimes binary executable code is stored as a blob. Wikipedia
하나의 entity로 저장된 커다란 이진수 파일임. 주로 멀티미디어 객체가 되겠다.

<input
              {...register("avatar")}
              id="picture"
              type="file"
              className="hidden"
              accept="image/*"
            />

type을 file로 해서 아래처럼 url을 만들면

const file = avatar[0]; //이제 브라우저의 memory에 있겠지
console.log(URL.createObjectURL(file));
//브라우저가 만든 URL이 return됨

내 브라우저 메모리에 저장된 내가 올린 파일의 URL이 생김.
blob:http://localhost:3000/ead74686-349f-45fc-92d9-769f5ce35922
그럼 다른 브라우저에서는 될까? 안되야겠지?
해보니 안된다

브라우저에게 사용자가 올린 사진에 대한 엑세스를 URL을 통해 달라고 하는 것.
참고로 호출할 때마다 새로운 객체 URL을 생성해서 각각의 URL을 더는 쓰지 않을 땐 URL.revokeObjectURL()을 사용해서 해제해줘야 한단다.

15.2 Direct Creator Uploads
https://developers.cloudflare.com/images/cloudflare-images/upload-images/direct-creator-upload/

 API Token을 사용하는 방식을 이용했을 때
우리 서버가 있다면(우린serverless지)
유저가 올린 사진을 우리 서버에 올리고, 우리서버에서 cloudflare에 올려야 함.
서버가 있다면 이상한 방법이 아니긴 한데 우리 서버에 data가 왔다갔다 하는게 다 돈임.
그러니 유저 브라우저가 하게 하자.
유저에게 secure URL을 주고, 유저는 그 URL에 업로드하게 한다.
token같은거 유출 될일 없다.

Direct Creator Upload
작동원리:
1. 유저 사진 업로드 원함
2. 백엔드에서 key같은걸로 안전하게 CloudFlare(CF)에 URL달라고 요청
3. CF는 빈파일의  URL을 만들어서 백엔드에 주고 백엔드는 유저에게 .
4. 그럼 유저는 그 URL을 이용해 이미지를 direct로 올린다.

참고로 AWS에도 있다고 한다.
lambda 같이 써서 해야 한단다.
presigned url
ref: https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/PresignedUrlUploadObject.html

 

15.2 Direct Creator Uploads

const cloudflareRequest = await fetch(`/api/files`);
const cloudflareURL = await cloudflareRequest.json();

//shortened
const cloudflareRequest = await (await fetch(`/api/files`)).json();​

15.3 Cloudflare Setup
15.4 Direct Upload URL
15.5 Cloudflare Upload

{
    "result": {
      "id": "2cdc28f0-017a-49c4-9ed7-87056c83901",
      "uploadURL": "https://upload.imagedelivery.net/Vi7wi5KSItxGFsWRG2Us6Q/2cdc28f0-017a-49c4-9ed7-87056c83901"
    },
    "result_info": null,
    "success": true,
    "errors": [],
    "messages": []
  }

 

 

uploadURL은 30분뒤 만료 되니 id만 BE에 저장하자.

file의 세번째 인자는 파일 이름.

15.6 Serving Images
15.7 Resizing Images
URL뒤에 variant(변형)을 둬서 미리 설정한 변형대로 리사이징 해줌.
15.8 Product Images