20.02.02 s3 이미지 업로드

sykim·2020년 2월 2일

냉장고 프로젝트 업데이트

목록 보기

14/16

1. S3 에서 버킷 만들기

2. 프로젝트 이미지를 multer로 백엔드 upload 폴더에 보내던 걸 aws S3로 옮기기

=> 로컬 백엔드에서 aws-sd, multer-s3 설치

npm i aws-sdk multer-s3

route/post.js

const AWS = require('aws-sdk');
const multerS3 = require('multer-s3');

AWS.config.update({
    region : 'ap-northeast-2',
    accessKeyId : '',
    secretAccessKey : '',
});

3. 내 보안 자격 증명에서 액세스 키 만들기

4. 아마존 백엔드 서버의 .env 파일 수정

vim .env
(a 누르면 편집 모드)
파일 수정 후
(esc 누르고 :wq 쓰면 저장하면서 나가기)

5. 로컬 백엔드에 env 파일에서 불러오는 값으로 수정

route/post.js

const AWS = require('aws-sdk');
const multerS3 = require('multer-s3');

AWS.config.update({
    region : 'ap-northeast-2',
    accessKeyId : process.env.S3_ACCESS_KEY_ID,
    secretAccessKey : process.env.S3_SECRET_ACCESS_KEY,
});

6. diskStorage를 multerS3로 변경

const upload = multer({
    storage : multerS3({
        s3 : new AWS.S3(),
        bucket : 'rgproject-react',
        key(req, file, cb) {
            // original 이라는 폴더 안에 파일명 : 날짜+파일명으로 넣기 (파일명 중복 막기)
            cb(null, `original/${+new Date()}${path.basename(file.originalname)}`);
        },
    }),
    limits : { fileSize: 20 * 1024 * 1024 },
});
...
router.post('/images', upload.array('image'), (req, res) => {
    console.log(req.files)
    // req.files의 location에 경로가 들어있음
    res.json(req.files.map( v => v.location));
});