20230630 TIL Nestjs S3 이미지 링크가 바로 다운로드 되는 경우

문제점

s3로 이미지 업로드하는 것 까지는 해결이 되었는데 이미지 url을 클릭했을 때 바로 다운로드 창이 실행이 된다.. 나는 다운로드가 아니라 브라우저에서 열고 싶은건데!!! 분명 전에 다른 팀원이 node.js로 했을 때는 문제 없이 실행되었던 기억이 있다.
구글에 검색해보았더니 메타데이터의 Content-Type이 설정되지 않아서 그렇다고 한다. 하지만 nest.js에서는 바로 업로드된 파일의 정보를 읽은 후 메타데이터 타입을 자동으로 설정해주는 걸로 알고 있는데..? 
AWS에서 S3로 들어간 후 내가 생성한 버킷안에 들어가보았다. 버킷에 업로드되어 있는 이미지중 하나를 클릭한 후 아래로 쭉 내려서 정보를 확인해보니 메타데이터에 대한 정보도 있었다. 아래 사진에서 보이는 것 처럼 Content-Type이 application/octet-stream로 설정되어 있었다. 

Content-Type을 편집을 눌러서 하나하나 고쳐줄 수도 있지만 이미지가 업로드될 때마다 그렇게 할 수는 없기 때문에 업로드하면서 Content-Type을 설정해주어야 할 것 같다!!! (일단 업로드되어 있는 애들은 수정해주었다..ㅎ)

해결방안

//Controller계층
@Post()
@UseInterceptors(FileInterceptor('Image'))

Controller에서 @UseInterceptors()로 받은 파일의 키값 Image를 콘솔로 찍어보면 아래와 같은 값을 확인할 수 있다.

Image에서 얻은 값을 사용해서 service 계층에서 업로드를 해줄 때 사용하는데 여기에서 mimetype이 image/png 로 되어 있는 것을 확인할 수 있다. 원래는 보통 이 값을 자동으로 S3가 Content-Type으로 사용한다고 하는데 내경우 자동으로 설정이 안되고 있는 것 같다. 

//업로드 파일정보
const bucketName = configService.get('AWS_BUCKET_NAME');
const key = Image.originalname;
const fileData = Image.buffer;
const contentType = Image.mimetype;

return this.fundingService.createFunding(
  bucketName,
  key,
  fileData,
  contentType,
  createfunding,
);

위의 코드처럼 contentType에 Image.mimetype을 넣어서 서비스 계층의 createFunding으로 보내두었다. 아래의 코드는 서비스 계층의 createFunding 함수의 일부인 s3에 업로드해주는 부분이다. 이부분에 ContentType: contentType으로 설정해주고 업로드해주었더니 바로 해결되었다!!

    //s3 업로드
    const uuid = uuidv4();
    const uploadParams = {
      Bucket: bucketName,
      Key: `${uuid}-${key}`,
      Body: fileData,
      ContentType: contentType,
    };
    const uploadResult = await this.s3.upload(uploadParams).promise();