aws s3 sharp image resizing 로직/어느 시점에서 리사이징을 하는것이 좋은지 + multer-s3-transform error

리사이징을 어느 시점에서 할지 고민을 많이 해 본 결과 , aws s3에 올라가기전에 리사이징을 해주는것이 현 프로젝트에서 서는 더 좋은 방향이라 결론이 났다. 우선적으로 서버비용을 아낄 수 있고 , 기존에 있던 에러도 해결할 수 있으며, 현 프로젝트의 데이터 전송량이 적기 때문이다.

 

프론트단에서 리사이징을 하는 것은 데이터 전송량이 많아지면서 프로토콜 응답이 느려질 수도 있다고 한다. 보통은 백단에서 처리하는 경우가 많은 것 같다. 당근 마켓도 그렇게 하고 있다고 한다.

 

기존 s3 미들웨어 upload 코드에서 조금만 수정해주면 리사이징을 할 수 있을것 같아 multer-s3-transform 으로 sharp 패키지를 사용하기로 했다.

Lamda라고 함수코드를 만들어서 리사이징 하는 방법이 있긴 한데 , 로직을 한번 더 거쳐야하고 서비스가 더 무거워지기 때문에 최대한 간단하게 만들고자 했다.

 

기존 업로드 코드이다

const multer = require('multer');
const { S3Client, PutObjectCommand } = require('@aws-sdk/client-s3');
const multerS3 = require('multer-s3');
const path = require('path');
const s3Client = new S3Client({
  region: process.env.AWS_BUCKET_REGION,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY,
    secretAccessKey: process.env.AWS_SECRET_KEY,
  },
});
const upload = multer({
  storage: multerS3({
    s3: s3Client,
    bucket: process.env.AWS_BUCKET_NAME,
    acl: 'public-read',
    contentType: multerS3.AUTO_CONTENT_TYPE,
    key: function (req, file, cb) {
      let extension = path.extname(file.originalname);
      cb(null, Date.now().toString() + extension);
    },
  }),
});

이런식으로 업로드 객체를 만들어놓고 , 싱글업로드 , 멀티업로드를 나누어 사용했었다.

이 상태에서 multer-s3-transform형식으로 바꿔서 작성하려고 하니 에러가 났었다.

 

const multerS3 = require('multer-s3-transform');

 

이렇게 가지고 오면 

 var upload = this.s3.upload(params);
                       ^
TypeError: this.s3.upload is not a function

이런 에러가 났고

 

const multerS3 = require('multer-s3');

이렇게 가지고 오면 리사이징 없이 업로드 되었다

 

첫번째 방식으로 트랜스폼을 가져오는게 맞는데 에러가 나는 이유를 구글링해보니 , 나와 비슷한 경우가 없어서 결국 하나하나 뜯어봤다

결론적으로는 의존성 문제였는데 ,  multer-s3-transform  을 사용하려면 인스톨되어 있었던 multer-s3를 삭제하고, aws-sdk와 버젼을 맞춰줬어야했다. 

그리고 기존 문법도 조금 변경해주니 잘 먹었다.

이 문제를 해결하는데 자는시간 포함 24시간은 걸린것 같다.

현재 multer-s3-transform 공식문서가 업데이트가 된지 1년이 넘은 서비스였고 , 그만큼 사람들이 잘 사용하지 않아서 에러 포스팅도 존재하지 않았을 뿐더러, 기존 있었던 정보들도 2년이 지나서 문법도 버전별로 맞춰지지 않았었다.

사용은 문제없이 잘 된다 ! 참고할 문서들이 부족할 뿐 !

 

package.json 의 내용을 하단처럼 바꾸고 패키지 락이랑 노드 모듈을 삭제한뒤 다시 인스톨해줬다

"aws-sdk": "^2.1443.0",

 "multer-s3-transform": "^2.10.3",

 

그리고 코드를 ver2로 통일 해줬다 

const multer = require('multer');
// const { S3Client, PutObjectCommand } = require('@aws-sdk/client-s3');
// const multerS3 = require('multer-s3');
const multerS3 = require('multer-s3-transform');
const path = require('path');
const sharp = require('sharp');

const aws = require('aws-sdk');
aws.config.update({
  region: process.env.AWS_BUCKET_REGION,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY,
    secretAccessKey: process.env.AWS_SECRET_KEY,
  },
});
const s3 = new aws.S3();

// const s3Client = new S3Client({
//   region: process.env.AWS_BUCKET_REGION,
//   credentials: {
//     accessKeyId: process.env.AWS_ACCESS_KEY,
//     secretAccessKey: process.env.AWS_SECRET_KEY,
//   },
// });

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: process.env.AWS_BUCKET_NAME,
    contentType: multerS3.AUTO_CONTENT_TYPE,
    shouldTransform: true,
    transforms: [
      {
        id: 'resized',
        key: function (req, file, cb) {
          let extension = path.extname(file.originalname);
          cb(null, Date.now().toString() + extension);
        },
        transform: function (req, file, cb) {
          cb(null, sharp().resize(100, 100)); // 이미지를 100x100 으로 리사이징
        },
      },
    ],
    acl: 'public-read-write',
  }),
});

현재 주석처리된 부분이 기존 ver3 코드이고 , 바뀐게 ver2 코드이다 !!

sharp의 옵션을 조절하면 퀄리티라던지 , 확장자라던지 이것저것 커스텀 할 수 있다 

 

결론적으로 리사이징 전과 후는 

 

이렇게 사이즈가 줄었다 ! 파일 형식이 달라진건 , 내보내주는 multer 의 형식이 달라졌기 때문이다 !

 

aws s3에 올리기 전에 리사이징 했기 때문에 aws상에서도 확인 가능하다.

하단에 보면 url이 바뀌었는데, 기존 path를 변경했다 ! 이유는 내 블로그에 또 자세하게 적혀있다 !