Final Project: 2주차 (multer-s3)

프로젝트 기간 2주차에 들어섰다.

1주차에서 간단한 api들과, 테스트케이스들까지 작성을 완료하였고

2주차에 들어서면서 처음으로 부딫힌 어려운 부분은 '이미지 파일 저장'관련 내용이였다.

 

현재 우리가 만들고있는 기능중에는 클라이언트가 이미지파일을 업로드하면 서버에서 그 이미지파일을 어딘가에 저장해놓고, 해당 요청이 오면 클라이언트에게 보내줄 수 있는 기능이 필요했다.

 

이미지파일 저장 방법에 대해 알아보면서 할 수 있는 방법은 크게 세가지가 있는것 같았다.

1. 클라이언트에게 받은 이미지파일을 aws s3버킷에 업로드 해놓고, 그 url을 db에 저장해놓은후, 필요할때마다 클라이언트에게 그 url을 제공

2. 서버 컴퓨터 자체에 그 이미지파일을 저장해놓고, 클라이언트가 요청할때 이미지 파일자체를 제공

3. db에 이미지 파일 자체를 저장..(용량문제 등등 아주 안좋은 방법이라고 한다..)

 

먼저 2의 방법은 실제로 많이 쓰이기도 하지만, 많은 이미지파일을 저장할 경우 서버 컴퓨터에 과부화가 걸릴수 있다고 한다. 현재 aws 프리티어로 ec2컴퓨터를 사용하고 있는 나로써는 좋은 방법은 아닐것 같다는 생각에 1의 방법을 선택하게 되었다.

 

1의 방법을 어떤식으로 적용해야 할까를 고민하며 찾아보던 중, multer-s3라는 패키지의 존재를 알게 되었다. s3버킷에 파일을 업로드 할 수 있도록 도와주는 아주 편리한 패키지였다.

 

대략적인 방법들을 숙지한 후, 작업에 들어가게 되었다.

먼저 필요한 것은 aws의 액세스 키발급,  s3버킷 생성이였다.

이부분들에 대해서는 이 글에서는 자세히 다루지 않기로 했다. 간단히만 언급하면,

액세스 키는 aws에 로그인 후, 내 보안자격 증명 탭에 들어가면 발급받을 수 있다. (절대 외부로 노출되면 안됨)

s3버킷의 경우는 일단 생성을 한 후, 권한 설정(퍼블릭 액세스 차단, 액세스 제어목록)이 조금 필요하다.

 

이렇게 필요한것들을 준비시킨 후, 실제로 코드로 구현에 들어갔다.

필요한 패키지들은 다음과 같다. 

npm install aws-sdk multer multer-s3

 

설치 후에는 프로젝트의 루트디렉토리에 awsconfig.json 파일을 생성해 준 후, 위에서 발급받은 aws액세스 키들을 넣어준다. 이 파일은 절대 외부로 노출되면 안된다!!

 

{
  "accessKeyId": "자신의 aws accessKeyId",
  "secretAccessKey": "자신의 aws secretAccessKey",
  "region": "ap-northeast-2"  // 지역을 서울로 설정
}

 

다음으로 간단한 예제로 multer-s3를 적용해 보겠다.

/src/app.ts

 

import AWS from "aws-sdk";
import path from "path";
import multer from "multer";
import multerS3 from "multer-s3";
AWS.config.loadFromPath(__dirname + "/../awsconfig.json");

const s3 = new AWS.S3();

const upload = multer({
  storage: multerS3({
    s3,
    bucket: "my-image", // 자신의 s3버킷의 이름을 입력
    key: (req, file, cb) => {
      const extension = path.extname(file.originalname);
      cb(null, Date.now().toString() + extension); // 저장할 파일 이름을 변경(중복되지 않도록)
    },
    acl: "public-read-write",   // 권한 설정
    limits: { fileSize: 5 * 1024 * 1024 }  // 파일크기 제한 설정
  })
});

...(express를 사용한 서버구현 코드는 생략)

// 여기서 'imgFile'은 클라이언트가 보낸 form-data형식의 이미지파일 데이터의 key값과 맞춰야 한다.
app.post('/upload', upload.single('imgFile'), (req, res) => {
	console.log(req.file)  // s3 버킷에 이미지가 업로드 된 후, 해당되는 데이터가 req.file로 온다.
                           // 그중에서 url이 담겨있는 req.file.location이 지금 내게 필요한 정보!
})

 

위의 경우는 upload.single로 이미지 파일 하나만을 다룰 수 있다.

여러 이미지파일을 다루고 싶은 경우, upload.fields, upload.array등을 사용할 수 있다.

자세한 내용은 밑의 링크에서 확인 할 수 있다.
https://github.com/expressjs/multer/blob/master/doc/README-ko.md

expressjs/multer