문제상황

// multer setting
const upload = multer({
  storage: multerS3({
    s3: storageClient,
    bucket: "bucketName",
    metadata: (req, file, cb) => {
      cb(null, { fieldName: file.fieldname });
    },
    key: (req, file, cb) => {
      console.log(file);
      const fileNameList = file.originalname.split(".");
      cb(null, `${uuid()}.${fileNameList[fileNameList.length - 1]}`);
    },
  }),
});

/*
 * Post images in s3 bucket.
 */
app.post("/images", upload.single("image"), async (req, res) => {
	// logic
});

• 블로그를 firebase에서 amplify 서비스로 이전하고 있다. (firebase는 무료티어에서 서버리스 함수 사용 불가능)
• storage를 사용해 구현했던 이미지 업로드는 aws의 s3을 이용해서 다시 구현하면 된다.
• 구현 자체는 multer, multer-s3을 이용한 서브파티 라이브러리가 있기 때문에 sdk 사용없이 이를 사용해 업로드가 가능하다.
• 그런데 S3에 올라온 파일의 용량이 달라지고, 다운로드를 하면 파일이 깨지는 문제가 발생하였다.
• 로그를 찾아봐도 파일 전송은 정상적으로 진행이 되고있는 것으로 보였다.

원인

공식 문서 URL

• API Gateway에서 binaryMediaTypes에 관한 설정을 하지 않으면 페이로드는 기본적으로 UTF8 문자열이 된다.
• 서버에서 content type은 "multipart/form-data"로 받아오고 있기 때문에, binaryMediaTypes로 이를 추가해주면 된다.

문제 해결

1. API Gateway에 접속한다.
2. 수정하고자 하는 API에 들어가서 API의 설정 탭을 클릭한다.
3. 이진 미디어 형식에 multipart/form-data을 추가한다.

출처:
https://docs.aws.amazon.com/ko_kr/apigateway/latest/developerguide/api-gateway-payload-encodings-workflow.htmlhttps://github.com/dougmoscrop/serverless-http/issues/34