지난 프론트 img를 서버로 전송한 코드를 이어서
서버에서 받은 img를 aws s3 bucket에 올리고자 한다
과정은 크게 나누자면
- 프론트에서 받은 formData를 fomidable로 파싱하고 서버 폴더에 저장
- 서버에 저장한 이미지를 fs module로 buffer로 읽어온다
- buffer를 params body에 담아서 s3 bucket으로 보낸다.
- 이미지 전송에 성공하면 서버에 저장되었던 이미지를 지운다.
- 파일 이름을 응답으로 내보낸다.
- 추후에는 파일 이름을 응답으로 내보내지 않고 파이어베이스 데이터베이스에 저장할 것 이다.
이전 프로젝트에서 프론트에서 s3에 업로드 기능을 구현한 코드를 참고하고자 했는데
AWS.s3.upload()함수의 params body가 타입을 string 밖에 받지 않아
서버에 저장된 이미지를 읽어서 base64로 변환해서 올리면 업로드 되지않아 좀 많이 헤멧다.
처음에 시도한 코드는 aws-sdk 패키지를 이용하였지만
구현에 성공한 코드는 @aws-sdk/client-3 패키지를 이용하였다.
@aws-sdk/client-3를 사용한 코드가 좀 더 최신 버전인듯 하다.
사용된 next.js 버전은 v13.2.3이다.
filename을 그대로 리턴하기 때문에 나중에 이미지 업로드시 파일 이름을 검증하는 과정이 필요할 것 같다.
또한 이미지 url를 반환해주지 않기 때문에 업로드한 이미지에 접근하려면
위와 같은 방식으로 파일 이름를 통해 url를 직접 조합해야 한다.
추가 fs/promise가 아닌 그냥 fs모듈을 사용하려면 next.config.js를 수정해줘야 한다.
그러나 이 방식으로 fs모듈을 불러오면 async/await가 적용되지 않아서 fs/promise를 사용하였다.
참고
