1) 필요한 모듈 설치
1. multer
2. multer-s3
3. aws-sdk
2)/config/s3.json
작성
3)/modules/multer.js
작성
4) route에 적용! (미들웨어 적용)
본격적인 NodeJS프로젝트와 S3를 연결하기에 앞서 연결을 도와주는
' 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; ...