축스피드 프로젝트 3 (Multer S3 라이브러리 사진 업로드)

 

multer 라이브러리를 활용해 백엔드에서 사진업로드를 했고, 프론트엔드에서는 form태그를 이용했다. DB저장할때 multer라이브러리 S3를 통해서 이미지를 http url 경로로 저장하도록 했고 그 경로를 데이터 베이스에 저장하고 select 해와서 이미지태그에 넣어준다.

 

하지만 이미지 삭제 시, 그냥 DB만 날아가고 그래서 s3는 이미지가 그대로 남아있다. multer S3에 보면 딜리트라는 메서드가 있는데 삭제부분까지는 마저 구현을 못했다.

 

Multer 라이브러리

https://www.npmjs.com/package/multer-s3

multer-s3

 

아마존웹서비스(AWS)에 로그인하고, S3에 들어가서 버킷을 생성한다.

ACL 활성화, 엑세스 허용하고나서 버킷을 만들고 권한(permission)에서 엑세스제어목록을 아래와 같이 설정 후 엑세스 키 및 패스워드 발급받는다. 자세한방법 참조 -> https://celdan.tistory.com/38 이 값은 개인정보이므로 유출되면 안되며, config에 mySQL 시퀄라이즈 정보를 넣듯, 사진업로드 Multer S3 미들웨어의 정보에 버킷이름, 엑세스 아이디 및 키를 넣는다.

 

 

전체 파일은 이렇고, middleware의 upload미들웨어에 사진정보를 넣는다.

업로드미들웨어 코드

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: 'ap-northeast-2',
  credentials: {
    accessKeyId: '엑세스 아이디',
    secretAccessKey: '엑세스 키',
  },
});

const upload = multer({
  storage: multerS3({
    s3: s3Client,
    bucket: '생성한 버킷 이름',
    acl: 'public-read',
    contentType: multerS3.AUTO_CONTENT_TYPE,
    key: function (req, file, cb) {
      cb(null, `${Date.now()}_${path.basename(file.originalname)}`);
    },
  }),
});

module.exports = upload;

 

 

그리고 프론트엔드가 구현되기 전 이라면, 썬더클라이언트에서 사진을 업로드해본다.

 

body의 form에서 하단에 choose file을 하고 

Json타입으로 입력할때 key값과 value값을 각각 filedname과 value에 넣어준다.   위에 value에는 스크린샷~~ 넣었는데 잘못넣은것. 그냥 말그대로 value값 넣어주면됨.

 

  

만약 S3를 통해 업로드하면, 시퀄라이즈 데이터베이스에 https://soccersfeed.s3.ap-northeast-2.amazonaws.com/1688309598923_~~ 

 

이런식으로 버킷이름, 아마존 이런게 붙는다.