S3 연결 절차

1) 필요한 모듈 설치
    1. multer
    2. multer-s3
    3. aws-sdk
2) /config/s3.json 작성
3) /modules/multer.js 작성
4) route에 적용! (미들웨어 적용)

---

본격적인 NodeJS프로젝트와 S3를 연결하기에 앞서 연결을 도와주는
' multer ' 라는 모듈의 원리를 알아야 한다

Multer ?

multer는 파일 업로드를 위해 사용되는 multipart/form-data를
다루기 위한 node.js의 미들웨어
(multer를 거치면 req.file 혹은 req.files 로 내용을 넘겨준다)

---

• 실질적으로 파일를 다루는 것은 multer 의 역할
• 미들웨어로 사용
• 해당 글보다 자세한 정보는 https://gngsn.tistory.com/37 참조

const upload = require('../modules/multer')
...
/* 사용자 요청 -> multer가 이미지 처리 -> controller로 이동! */
router.put('/post/modify', authUtil, upload.single('productImg'), exchangeController.modifyPost);

---

[ single Image 다루기 ]

(/routes/user.js)

const express = require('express');
const router = express.Router();
const multer = require('multer');
const upload = multer({
   dest : 'uploads/'
});
const User = require('../controllers/user');

router.post('/profile', upload.single('image'), User.uploadProfile);

module.exports = router;

• multer 모듈을 통해 upload를 생성
• 생성 시 dest는 저장될 장소를 의미!
• upload.single('변수이름')를 미들웨어로 route에 적용

---

(/controllers/user)

...
const user = {
  uploadProfile : async (req, res) => {
    /* singleImage의 경우 req.file에서 파싱! */
    const image = req.file.path;
    ...
  }
}

• singleImage는 req.file에 해당 정보가 들어있다

---

[ Image Array 다루기 ]

(/routes/user.js)

const express = require('express');
const router = express.Router();
const multer = require('multer');
const upload = multer({
   dest : 'uploads/'
});
const User = require('../controllers/user');

  /* Image Array는 upload.array를 사용! */
router.post('/profile', upload.array('image', 4), User.uploadProfile);

module.exports = router;

• Image Array는 upload.array를 사용해서 처리

---

(/controllers/user)

...
const user = {
  uploadProfile : async (req, res) => {
    /* singleImage의 경우 req.file에서 파싱! */
    const image = req.files;
    /* 이미지의 경로들을 path에 배열로 저장시킴 */
    const path - image.map(img => img.path);
    ...
  }
}

• Image Array는 req.files에 해당정보가 들어있다

연결

1) 필요한 모듈 설치

npm install multer multer-s3 aws-sdk --save
혹은
yarn add multer multer-s3 aws-sdk --dev

---

2) /config/s3.json 작성**

(/config/s3.json)

{
    "accessKeyId": "IAM에서받은액세스키ID입력바람",
    "secretAccessKey": "IAM에서받은시크릿액세스키입력바람",
    "region": "ap-northeast-2" // 위치는 서울
}

: 해당 코드는 S3에 접근하기 위한 IAM 키를 입력하는 부분
  (유출되면 안되기 때문에 .gitignore에 추가된 /config에 작성)

---

2) /modules/multer.js 작성

(/modules/multer.js)

const multer = require('multer');
const multerS3 = require('multer-s3');
const aws = require('aws-sdk');
aws.config.loadFromPath(__dirname + '/../config/s3.json');

const s3 = new aws.S3();
const upload = multer({
    storage: multerS3({
        s3: s3,
        bucket: 'YourBucketName',
        acl: 'public-read',
        key: function(req, file, cb){
                cb(null, Date.now() + '.' + file.originalname.split('.').pop()); // 이름 설정
        }
    })
},'NONE');
module.exports = upload;

---

3) route에 적용! (미들웨어 적용)

(/routes/exchange.js)

...
const upload = require('../modules/multer')
...

// Single Image 처리
router.put('/post/modify', authUtil, upload.single('productImg'), exchangeController.modifyPost);
...
module.exports = router;

1. 사용자가 이미지가 포함된 multipart-form/data를 보냄

2. s3와 연결된 multer가 s3에 파일을 올리고
    관련 정보를 req.file에 담아 controller로 보냄

3. controller에서는 req.file.location에 정보가 들어있다
   (위에는 req.file.path였지만 s3연결하면 req.file.location에 존재!)

modifyPost: async (req, res) => {
  /* 보낸 이미지가 없는 경우 예외처리! */
  if(req.file !== undefined)
    var productImg = req.file.location;
  ...