AWS3 사진 등록

 

아마존 서버를 이용해서 사진 등록을 꼭 해보고 싶었다. 프로젝트를 진행하며 등록해보기로 한다.

타입 스크립트를 이용해서 문제가 많았다

 

1. 아마존 서버에 아이디 등록하고 권한 설정하기

https://paranyu.tistory.com/2

가입에는 위 블로그를 많이 참고했다.

https://zzang9ha.tistory.com/358

버킷 생성을 참고한 블로그.

위를 따라서 포스트맨으로 등록하면 재대로 등록이 되는 걸 알 수 있다.

 

2. multer를 사용한 미들웨어 작성

일단 타입 스크립트를 이용하면 그냥 multer가 아니라 @types/multer도 설치해줘야 하고 multers3도 마찬가지다. aws-sdk도 이대로 설치해줬다.

 

import multer from 'multer';
import multerS3 from 'multer-s3';
import { S3 } from '@aws-sdk/client-s3';

const s3 = new S3({
  credentials: {
    accessKeyId: process.env.S3_ACCESS_KEY_ID as string,
    secretAccessKey: process.env.S3_SECRET_ACCESS_KEY as string,
  },
  region: process.env.REGION,
});

const bucket: string = process.env.BUCKET || 'none';

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: bucket,
    key: function (req, file: Express.MulterS3.File, cb) {
      cb(
        null,
        'images/origin/' +
          Date.now() +
          '.' +
          file.originalname.split('.').pop(),
      );
    },
    acl: 'public-read-write',
  }),
});

export { upload };

위와 같이 미들웨어를 생성했다.

 

임시 라우터를 할당해서 확인해 봤다. 포스트맨에서도 제대로 작동한다!

 

 

3. 실제로 사용하는 라우터에 할당

프로필 이미지를 수정을 위한 미들웨어라 그 라우터에 미들웨어로 넣어 주었다. 

하지만 그 과정에서 문제가 생겼다.

가장 문제였던 부분.

 

타입 스크립트를 쓸 때는 해당 타입이 어떤지 제대로 파악을 해야 한다. Vscode를 이용해 해당 타입을 살펴본다.

 

보면 MulterS3가 아니라 Multer를 사용하고 있다. 이럴 때는 위의 방법처럼 타입 지정을 해 주면 된다.

 

 

프론트에서 확인하면 완료!