[D+138] Final Project : 18일차 Multer로 AWS 업로드하기

 

 

D+138

-  Final Project : 18일차 -

( multer-s3로 이미지 업로드 하기 )

 

---

 

 

오늘은 지난번에 multer 모듈을 사용해서 파일에 직접 이미지를 업로드하는 것을 시도해보았다면,

이번에는 본격적으로 AWS multer -s3에 이미지를 직접 업로드하는 방법을 직접 시도해 보았다.

 

multer-s3를 npm에서 찾아본 결과 AWS S3용 멀터 스토리지 엔진이라는 정의가 되어있다.

 

해당모듈을 사용하기 전에는 multer는 파일자체에서 업로드시키는 방법이고,

multer-s3는 S3버킷에 업로드하기위해 사용되는 multer와 다른 버전이라고 생각했었다.

 

그런데  막상 사용해 보니 일단 기본적으로 multer모듈에 대한 이해가 있어야 사용가능한 녀석이었고,

multer-s3는 일종의 multer와 AWS S3를 연결해주는 연결다리 같은 역할을 해주는 것 같았다.

 

그렇기 때문에 혹시 multer-s3를 사용하기를 원한다면

먼저 multer를 시도해보고 그 다음에 사용해 보기를 권한다.

 

일단 해당 모듈들을 사용하기위해 npm install을 해주고 require해주는 것을 잊지말자.

 

여기서 부터는 본격적으로 코드를 작성해 주면 되는데

이때 헷갈리지 말아야 할 것은 multer가 더 포괄적인 부분이기 때문에

multer의 storage안에 s3에 관련된 정보를 넣어줘야 한다.

 

나는 multer에 이미지가 너무 큰거를 들어가는 것을 원하지 않아서 크기를 제한해줬는데

이 과정에서 multer에 옵션을 설정해줘야 하는데 multer-s3에 넣어줘서

오류 찾는데 애좀 먹었다...ㅎㅎ

 

s3에는 aws와 연결해 주기 위해서 액세스키와 비밀키를 넣어주게 되는데

해당 키들은 aws에서 받아오는 것으로 인터넷에 검색하거나 aws에 찾으면 확인할 수 있다.

 

그 이후에 storage에 s3의 정보들을 작성해 주는데 버킷에는 내가 s3에 설정해준 버킷이름을 넣어주고,

key는 파일 이름을 어떻게 지정해 줄지 설정해 주는 것이며,

나는 파일의 이름이 중복되는 것을 원하지 않았기 때문에 파일의 이름을 날짜와 관련지어서 설정해주었다.

 

이후에 나는 회원의 이미지가 잘 업데이트 될 수 있도록

요청이 돌아갈때마다 미들웨어로 돌아갈 수 있게 설정해 주었다.

 

aws의 버킷이 제대로 돌아가는지 확인하기 위해서 포스트 맨을 사용해서 요청을 시도해 보았다.

 

이때 주의해야할 것은 form-data로 보내야 하지 그렇지 않으면 요청이 제대로 가지 않는다.

 

요청이 제대로 보내지게 되면 터미널찰에 이렇게 파일의 이름(key)과 

파일의 위치가 어디있는지(location)에 대해서 확인 가능하며,

aws S3로 가면 상단의 화면처럼 이미지가 제대로 업로드 되어있는 것을 확인할 수 있다.

 

이밖에도 이미지를 여러개를 보내거나 버킷안에있는 이미지를 삭제할 수도 있는데

해당 정보들은 npm이나 aws 공식문서에서 참고 가능하다.

 

multer에 대해서 굉장히 애를 먹었었는데 그래도 이렇게 버킷에 올라가는걸 보니

왜 이렇게 겁을 먹었나 싶기도 하다.