multer-S3를 이용한 동영상, 이미지 저장

multer-s3

S3 game 을 통한 S3 배워보기

 

 

추가로 multer, aws-sdk를 설치해야 합니다.

 

 

---

0. multer, aws-sdk, multer-s3를 설치합니다.

 

1. S3에 대해 퍼블릭하게 열어둡니다.

 

2. awsconfig.json에 accessKeyId, secretAccessKey를 넣어 둡니다. (해당 키를 사용하는 유저가 S3에 대한 권한이 있어야 합니다. IAM의 권한 쪽을 살펴봅시다)

 

3. 사용하고자 하는 route에서 multer를 세팅합니다.

 

loadFromPath에서 __dirname과 경로가 join이 안되어서 path.join을 따로 사용했습니다.

// awsconfig.json
{
  "accessKeyId": "액세스 키",
  "secretAccessKey": "비밀 액세스 키",
  "region": "사용하고자 하는 region"
}

 

contentType 빼먹지 맙시다. 이 것 때문에 아주 고생을...

key도 빼먹지 말고 줍시다.

// aws + multer-s3 setting
const multer = require("multer");
const multerS3 = require("multer-s3");
const aws = require("aws-sdk");

// LoadPath 설정
const awsLoadPath = path.join(__dirname, "../../config/awsconfig.json");
aws.config.loadFromPath(awsLoadPath);

// S3 객체
let s3 = new aws.S3();

// multer 업로드
let thumbnailUpload = multer({
  storage: multerS3({
    s3: s3,
    bucket: "생성한 bucket의 이름",
    key: function (req, file, cb) {
      let extension = path.extname(file.originalname);
      cb(null, Date.now().toString() + extension);
    },
    contentType: multerS3.AUTO_CONTENT_TYPE,
    acl: "public-read-write",
  }),
});

 

4. multer를 post하는 미들웨어에 살포시 얹어주기

 

watchRouter.post("/", thumbnailUpload.single("thumbnail"), async (req, res) => {
  ... 로직 생략
}

 

어렵게 생각했는데 문서를 읽어보니 그렇게 어려운 것도 아니었습니다. 이제 서버에 부담을 줄일 수 있게 되었습니다!

 

 

한편, req.file에 전달되는 내용은 다음과 같았습니다. 적절하게 꺼내 쓰면 유용할 듯 싶습니다.

특히, 웹사이트에서 해당 이미지나 영상을 사용할 때는 location을 사용합니다.

{ fieldname: 'thumbnail', 
originalname: '0d88ec7f047ebf21e4ebe45d7b852afe.jpg', 
encoding: '7bit', 
mimetype: 'image/jpeg', 
size: 20596, 
bucket: '내가 지정한 bucket', 
key: 's3에 저장된 이름', 
acl: 'public-read-write', 
contentType: 'application/octet-stream', 
contentDisposition: null, 
storageClass: 'STANDARD', 
serverSideEncryption: null, 
metadata: null, 
location: '해당 이미지를 가지고 있는 url 주소', 
etag: '"etag"', 
versionId: undefined }

 

 

---

위에서 multerS3를 storage로 구성하면서 key 값을 주었다. 이 key값은 저장되는 파일의 이름이 된다고 했다.

 

일반적으로 storage를 지정하지 않고 로컬에서 저장하면 req.file의 path를 사용했을 텐데 multer-S3로 변경하면서 req.file의 구성 내용이 바뀌면서 path가 존재하지 않게 되었다. (위를 확인해보라)

 

따라서 기존에 multer로 작성한 내용들은 multer-S3의 req.file 속성에 맞게 수정해줘야 한다.

 

---

이런 식으로 쓰는데 더 간편하고 보기 좋다.

// s3 인스턴스 생성
const s3 = new aws.S3({
  accessKeyId: process.env.AWS_ACCESS_KEY,
  secretAccessKey: process.env.AWS_SECRET_KEY,
  region: "ap-northeast-2",
});

const multerVideo = multer({
  storage: multerS3({
    s3,
    bucket: "youtubeclonedb/video",
    contentType: multerS3.AUTO_CONTENT_TYPE
    acl: "public-read-write",
  }),
});
export const uploadVideoMulterMiddleware = multerVideo.single("videoFile");