[cloudfront] 이미지 CDN과 리사이징

CloudFront

cloudfront를 통해 버킷에 올라간 파일을 배포하려고 하는데 컨텐츠 열람이 아니라 다운로드가 되는 문제가 발생했다. 검색해보니 content-type을 지정하지 않아 발생하는 문제라고 함.

 

# 기존 코드
await this.s3
        .putObject({
          Key: key,
          Body: file.buffer,
          Bucket: process.env.S3_BUCKET,
        })
        .promise();
        
# 수정한 코드
await this.s3
        .putObject({
          Key: key,
          Body: file.buffer,
          Bucket: process.env.S3_BUCKET,
          ContentType: file.mimetype, 
        })
        .promise();

이렇게 파일의 mimetype을 컨텐츠 타입으로 지정해주니까 해결되었다.

이미지 리사이징 파이프

이미지 리사이징을 위한 파이프를 제작하였음.

파이프란?

특정 데이터를 처리하고 변환하는 역할을 담당하는 클래스. 들어오는 요청의 데이터를 검증하거나 변환하는 데 주로 사용되며, NestJS의 파이프라인 중 하나로서 작동한다. 파이프는 유틸리티의 일종으로 볼 수 있으며, NestJS의 실행 과정에서 중간 처리 단계에서 활용된다.

 

파이프의 특징:

• 중간 처리: 파이프는 컨트롤러의 핸들러가 실행되기 전에 요청 데이터에 대한 중간 처리를 수행한다.
• 코드 재사용성: 파이프를 통해 검증 로직이나 변환 로직을 중앙에서 관리함으로써 코드의 재사용성을 높일 수 있다.
• 확장성: 사용자 정의 파이프를 생성하여 애플리케이션의 특정 요구사항을 충족시킬 수 있다.

파이프 사용 사례 :

• 유효성 검사(Validation): 들어오는 요청의 데이터가 특정 조건이나 규칙을 충족하는지 검사함. 예를 들어, API로부터 받은 데이터가 예상된 형식에 맞는지 확인할 수 있다.
• 데이터 변환(Transformation): 요청으로 받은 데이터를 원하는 형태로 변환한당. 예를 들어, 문자열을 숫자로, 또는 한 형태의 객체를 다른 형태의 객체로 변환하는 작업을 수행할 수 있다.

 

🖊️ image resize pipe

// 이미지 리사이징
const resizedBuffer = await sharp(value.buffer)
.resize({ width: this.width, height: this.height, fit: 'inside' })
.toBuffer();

// 리사이징된 이미지의 버퍼를 새 파일 데이터에 할당
const transformedFile = {
...value,
    buffer: resizedBuffer,
};

fit : 'inside' : 비율을 유지하면서 이미지의 일부를 잘라내지 않고 전체 이미지를 리사이징하게 해주는 옵션