[AWS] Node.js Multer로 S3에 이미지 업로드하고 Mysql에 저장하기

🛠 1. 패키지 설치 및 S3 정보입력

필요한 패키지들을 설치해줍니다. 이미지 업로드를 위한 multer,multer-s3과 aws-sdk를 설치해주세요.

npm install multer
npm install multer-s3

npm install aws-sdk  👉 s3,ec2 등 객체를 편리하게 생성할 수 있음.

설치했다면 📁 config 폴더에 js 파일 하나를 만들어주세요!

 

 

s3 객체를 생성하고, 버킷을 생성할 때 csv로 저장했던 파일에서 KeyID와 SecretKey, 그리고 리전을 입력합니다. 저는 리전은 서울로 만들어서, ap-northeast-2로 입력했습니다.
이 키들을 그대로 github에 올렸 을 시에는 해킹으로 과금이 일어날 수 있기 때문에, 반드시 .gitignore 파일에 추가해주고 .env로 관리해주세요!

 

const multer = require('multer');
const multerS3 = require('multer-s3');
const aws = require('aws-sdk');
require('dotenv').config();

const s3 = new aws.S3({
  accessKeyId: process.env.S3_KEYID,  👉 keyID 입력 
  secretAccessKey: process.env.S3_PRIVATE_KEY, 👉 시크릿 키 입력
  region: process.env.REGION, 👉 버킷 생성 리전 입력
});

 

multer에서 각 key에 대한 속성 값을 입력해줍니다. 다른 조건도 주고 싶다면, 📚 npm 공식 문서를 참고하시길 바랍니다!

let upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: process.env.BUCKET_NAME,
    contentType: multerS3.AUTO_CONTENT_TYPE,
    acl: 'public-read',
    key: (req, file, cb) => {
      cb(null, `${Date.now()}_${file.originalname}`);
    },
  }),
});

exports.upload = multer(upload);

📩 2. multer로 s3에 이미지 업로드하기

 

📁 router / s3.js
multer은 미들웨어이기 때문에 router 딴에서 추가를 해줍니다.
저는 Controller-Service-Model 구조로 폴더링을 해서, Controller에서 이미지를 등록하는 컨트롤러를 명시해주었습니다.

아까 config/s3.js에서 설정했던 upload를 가져와서 하나의 이미지를 업로드하려고 합니다.
이미지를 req에서 받아올 때는 req.file로 받아오는데, 이는 controller에서 설명할게요〰️

var express = require('express');
var router = express.Router();
const ticketController = require('../controller/ticket');
const { upload } = require('../config/s3');

router.post('/upload', upload.single('ticketImg' 👉 파일명), ticketController.registerTicket);

module.exports = router;

더 많은 이미지를 한꺼번에 업로드하려면 다음 코드를 참고해주세요.

upload.array('파일명', 최대 파일 개수) -> req.files
upload.field('[{ name : '파일명' }, { name : '파일명' }, { name : '파일명' } .....]')

 

📁 Controller / register.js

컨트롤러에서는 req.file로 이미지 정보를 받아봅니다.
.location을 하면 s3 경로가 나오는데, 이 경로로 클라이언트에게 사진 정보를 주어 관리할 수 있습니다.

exports.register = async (req, res, next) => {
  const Img = req.file;
  console.log('s3 이미지 경로 :',Img.location);
};

🏃‍♀️ postman에서 file을 전송하려면 body의 form-data를 선택해야합니다.
아까 지정했던 👉파일명인 'ticketImg'를 key로 넣고, 이미지를 불러와 value에 넣은 뒤 send를 누르면〰️〰️
s3 경로를 확인할 수 있습니다.

 

 

저 링크를 따라서 들어가보면 어디서나 사진에 접근할 수 있습니다.

🐝 S3 폴더 별로 업로드하는 법❓

s3에서 '폴더 만들기'로 폴더 하나를 생성해줍니다. 저는 ticket이라는 폴더를 만들어놓았습니다.

 

 

앞에서 📁 config/ s3.js 코드에 하나만 추가해주시면 됩니다!
${Date.now()}_${file.originalname} 에서 앞에 폴더 이름/ 만 추가해주세요.

그러면 s3 폴더 안에 이미지가 업로드됩니다.