[Typescript] Nest.js

소개

이 게시물에서는 URL 업로드 방식을 사용하여 Cloudflare 이미지 서비스를 nest.js 멀티 스토리지 엔진에 연결해 보았습니다.

1. Cloudflare 이미지란 무엇인가요?

Cloudflare Images는 Amazon S3 또는 Cloudflare R2와 같은 파일을 저장하고 제공하는 서비스이지만 파일은 “이미지”에 중점을 둡니다. 따라서 Cloudflare Images는 이미지 파일 전송을 위한 강력한 기능과 가격을 제공합니다.

Cloudflare 이미지 가격은 볼륨이 아닌 이미지 수를 기반으로 합니다. 따라서 100,000개의 이미지를 호스팅하는 데 5달러, 100,000개의 이미지를 보내는 데 1달러만 듭니다. 또한 Cloudflare Images는 이미지 크기를 최적화하는 데 편리한 URL 매개변수를 통해 이미지 크기 조정 기능을 제공합니다. 또한 Direct Upload 방식이 제공되기 때문에 클라이언트가 파일을 서버에 업로드하고, 서버가 파일을 임시로 저장하고, 서버가 다시 Cloudflare Images에 업로드하는 두 프로세스 대신 클라이언트가 직접 Cloudflare Images에 파일을 업로드합니다. 가지고 다닐 수 있기 때문에 더 빠르고 안전한 구조를 위한 것입니다. 그리고 이미지를 보호해야 하는 경우 Cloudflare Images는 유효한 토큰이 있는 사용자만 서명된 URL에서 이미지에 액세스할 수 있도록 “서명된 URL” 기능을 제공합니다.

하지만 “Amazon S3나 Cloudflare R2를 사용하여 파일을 제공하는 서비스인데 왜 데이터가 적은 Cloudflare 이미지를 사용해야 할까요?”
Cloudflare 이미지를 사용하려는 이유를 요약하면 다음과 같습니다.

• 요한복음 12장 너무 저렴함(이미지 100,000개에 월 호스팅 $5, 전송 100,000개에 $1)
• 설정 과정 요한복음 12장 간단합니다(Cloudflare에 로그인하고 이미지를 입력한 후 요금제를 선택하세요. 그런 다음 토큰을 복사하고 REST API를 사용하여 요청하세요.)
• 이미지 처리를 위해서만 제공되는 기능, 예. B. 이미지 크기 조정 요한복음 12장 편안한.

S3 또는 R2는 단순히 용량당 가격으로 파일 저장 및 제공 기능을 제공하지만 Cloudflare Images는 이미지 호스팅, 제공 및 처리를 위한 전용 가격 및 기능을 제공하므로 이미지 파일이 반드시 S3 또는 R2일 필요는 없습니다. R2에 저장하는 것보다 Cloudflare 이미지에 업로드하여 사용하는 것이 더 유리합니다.

Cloudflare 이미지 최적화 · Cloudflare 이미지 최적화 문서

Clouflare Image Optimization은 이미징 요구 사항에 맞는 제품군입니다. 각각의 차이점에 대한 자세한 내용은…

developer.cloudflare.com

2. Muler 스토리지 엔진이란 무엇입니까?

Multer는 Express 백엔드 프레임워크에서 다중 파트/양식 데이터 파일을 업로드하는 데 사용되는 미들웨어입니다. Storage Engine은 Multer가 파일을 저장하는 방법을 정의하는 구현입니다. 그래서 Multer는 기본적으로 DiskStorage(디스크 저장 방식)와 MemoryStorage(메모리 저장 방식)를 제공하지만 이 저장 엔진을 사용자 정의할 수 있는 인터페이스를 제공합니다. 그래서 이 인터페이스로 Amazon S3, Cloudflare R2 등에 파일 저장을 구현할 수 있고 저는 이 인터페이스로 Cloudflare 이미지에 파일을 저장하기 위해 Multer를 구현하려고 생각했습니다.하지만 순조롭지 않았다…)

GitHub – expressjs/multer: `multipart/form-data`를 처리하는 Node.js 미들웨어.

`multipart/form-data`를 처리하는 Node.js 미들웨어. – GitHub – expressjs/multer: `multipart/form-data`를 처리하는 Node.js 미들웨어.

github.com

3. Cloudflare 이미지 업로드 방법

Cloudflare Images는 세 가지 업로드 방법을 제공합니다. 아쉽게도 Programmable 방식 중에서 단순히 파일을 직접 업로드하는 방식이 제공되지 않는 점이 매우 아쉽습니다.

3-1 이미지 대시보드 수동 업로드

Cloudflare 이미지 대시보드로 이동하여 이미지 파일을 수동으로 업로드하는 방법은 다음과 같습니다. 이미지 파일을 직접 업로드하는 몇 안 되는 방법 중 하나인데… 문제는 수동이라는 점입니다.

이미지 대시보드 업로드 · Cloudflare 이미지 최적화 문서

대시보드를 사용하여 단일 이미지를 Cloudflare 이미지 계정에 빠르게 업로드하세요.

developer.cloudflare.com

3-2 제작자가 직접 업로드

이 방법은 앞에서 설명한 직접 업로드 방법입니다. 서버가 Cloudflare 이미지 직접 업로드 URL을 수신하여 클라이언트로 전송하면 클라이언트는 직접 업로드 URL을 사용하여 Cloudflare 이미지에 이미지 파일을 직접 업로드합니다. 이는 서버가 파일을 디스크나 메모리에 임시로 저장할 필요가 없기 때문에 성능과 보안을 향상시키는 이점이 있습니다.

또한 Cloudflare Images에 저장할 이미지 파일의 업로드 URL과 ID 값이 미리 주어지기 때문에 클라이언트가 직접 파일을 업로드하는 것이 아니라 서버가 파일을 업로드하도록 구현할 수 있습니다. 다만, 이를 구현하기 위해서는 구조와 의존 관계가 복잡하고, 이미지 ID의 업로드 완료가 보장되지 않기 때문에, 사용 전 창작자 직접 업로드로 업로드된 이미지의 업로드 상태와 URL을 확인해야 출력 종료 클라이언트가 직접 이미지를 업로드하기 위해 포인트를 따로 분리해야 하는 단점이 있습니다.

Direct Creator Cloudflare 이미지 최적화 문서 업로드

Cloudflare 이미지의 크리에이터 직접 업로드 기능을 사용하면 사용자가 일회성 업로드 URL로 이미지를 업로드할 수 있습니다. 크리에이터 직접 업로드를 사용하면…

developer.cloudflare.com

3-3 업로드 URL

이 방법을 사용하면 파일을 Cloudflare 이미지에 직접 업로드하는 대신 외부에서 액세스할 수 있는 파일의 URL을 Cloudflare 이미지에 전달하면 Cloudflare 이미지가 URL에서 파일을 다운로드하고 저장합니다. 이 방식은 사용이 간편하고 파일을 Multipart에 직접 업로드하지 않기 때문에 요청 시간이 짧고 발급된 이미지 ID에 대한 업로드 완료를 보장하므로 이미지를 사용하기 전에 매번 조회할 필요가 없습니다. 하지만 반대로 Cloudflare의 단점은 이미지가 파일을 다운로드해야 하기 때문에 응답 시간이 매우 길어진다는 것입니다(Cloudflare Images는 이미지를 다운로드하고 저장이 완료되면 저장된 이미지에 대한 메타데이터를 응답으로 보냅니다). .
이 게시물에서는 이 URL 업로드 방법(서버가 파일을 Cloudflare 이미지에 직접 업로드하기 때문에 이것이 가장 쉬운 구현입니다…)

URL을 통해 Cloudflare Image Optimization에 문서 업로드

경우에 따라 데이터를 업로드하는 대신 이미지의 URL을 사용하는 것이 유용할 수 있습니다. 이러한 요구를 해결하기 위해 Cloudflare Images는 다음과 같은 옵션을 제공합니다.

developer.cloudflare.com

4. 뮬러 Cloudflare 이미지 스토리지 엔진 개발(URL 업로드 포함)

먼저 가장 개발하기 어려운 URL 업로드 방식을 사용하여 스토리지 엔진과 Nest.js 인터셉터를 구현했습니다.

Storage Engine은 _handleFile() 및 _removeFile()을 구현할 수 있지만 Cloudflare Images는 이미지를 별도로 삭제하는 기능을 제공하지 않으므로 _removeFile()은 즉시 콜백을 실행합니다.

이미지 파일만 저장하도록 Nest.js의 FileFieldsInterceptor에 구축한 Cloudflare 이미지 스토리지 엔진을 넣었습니다.

4-1 점수는?

이미지 파일이 multipart/form 데이터로 수신되면 정적 서빙이 가능한 경로에 임시 저장하고 파일 외부에서 접근 가능한 URL을 Cloudflare Images로 전송하여 정상적으로 볼 수 있도록 저장합니다. 그러나 테스트 후 단점은 매우 분명합니다.

클라이언트 입장에서는 이미지를 서버에 업로드하고 파일을 서버에서 Cloudflare Images로 업로드해야 하므로 업로드 시간이 두 배가 되고 응답을 다시 받는 시간도 두 배가 됩니다. URL 업로드 방식은 이미지의 ID와 액세스 URL을 반환하기 전에 Cloudflare 이미지가 서버에서 받은 URL에서 모든 이미지를 다운로드해야 하므로 서버는 다운로드한 Cloudflare 이미지가 file.state여야 할 때까지 클라이언트에 응답을 보내지 않고 오랜 시간을 기다립니다. 이러한 단점이 너무 커서 URL 업로드 방식을 사용하여 Cloudflare 이미지 서버에 직접 업로드하는 것은 실제 서비스에서 사용하기가 매우 어려울 것 같습니다.

4-2 대안은 무엇입니까?

URL 업로드 방식을 포기하고 크리에이터 직접 업로드 방식을 사용하고 싶습니다.

URL 업로드 방식은 URL에서 이미지 다운로드가 완료되면 Cloudflare Images가 이미지 ID와 접속 URL을 응답으로 보내주지만, 제작자 직접 업로드 방식은 클라이언트가 업로드 URL과 ID를 받아 해당 URL에 파일을 업로드합니다. 따라서 파일의 ID를 빠르게 얻을 수 있다는 장점이 있습니다.

이를 사용하면 서버가 클라이언트로부터 멀티파트 파일을 받으면 임시로 로컬에 저장하고, 업로드 URL과 ID를 받아 요청을 보내고, 업로드할 파일의 경로와 URL을 별도의 업로더에게 보낸다. 응답으로 이미지 ID를 클라이언트에 직접 보낼 수 있으므로 요청을 전달하고 기다리지 않습니다. 이 방법을 구현하면 별도의 업로드 URL 출력 엔드포인트를 설정할 필요가 없다는 이점이 추가됩니다.

그런데 이런 방식으로 스토리지 엔진을 구현하면 스토리지 엔진이 별도의 업로더(또는 업로드 컨트롤러)에 의존하기 때문에 관계가 매우 복잡해지지만 현실적으로 이 방법이 가장 유력한 방법이다.

다음 포스팅에서는 클라이언트 업로드를 이용한 서버 직접 업로드 방식으로 Storage Engine을 구현해 보겠습니다.