이미지 업로드를 클라이언트에서 하면 안되는 걸까?

정민·2022년 12월 9일

문제상황

서버에게 부하를 최대한 줄이기 위해, 클라이언트에서 이미지를 업로드 하자!
클라이언트에서 Object Storage 업로드 하려고 찾아보니까 계속 CORS 오류가 뜸..
- (=브라우저에서 바로 storage에 업로드 할 수 없음. 무조건 서버를 거쳐가야함)
- 찾아보니 클라이언트 측에서 직접 업로드 하는 방식은 서버로부터 인증된 url(signed require url)을 받아서, 업로드 하는 것 같다. https://medium.com/@cpatarun/client-side-vs-server-side-file-upload-to-amazon-s3-5c46ac0f4c7f
- curl 로 확인해도 잘 받아옴 (참고: https://aws.amazon.com/ko/premiumsupport/knowledge-center/s3-configure-cors/)
- 서버에서 업로드 하는 코드가 많은 이유가 있었다…ㅜ
- 그렇다면 서버에서 업로드 하는 방식은 도대체 어떻게 서버 I/O을 줄이는가?
  - multer 라는 미들웨어를 사용

결론

1) 클라이언트가 이미지 전송 → 서버가 object storage에 업로드 → 서버가 url DB에 저장

클라이언트 : 전송만 함
서버 : multer를 통해 클라이언트가 쏴준 데이터를 받아옴(대략적으로 구현 되어있음...), object storage에 업로드(대략적으로 구현 되어 있음…), DB에 저장

단점. 업로드가 전적으로 서버에게 맡겨지는 것이기 때문에, 서버의 부하가 존재할 수 있을 것 같다.

2) 클라이언트가 서버에게 signed request url 요청 → 받아온 후 object storage에 업로드 → 서버에게 url 전달

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#getSignedUrl-property

클라이언트 : signed url로 object storage에 업로드, url 전송
서버 : signed url 만들어서 내려줌, url db에 저장

export const makeSignedURL = (S3:AWS.S3, contentHash:String, musicName:String):string =>{
    const params = {Bucket: 'xoxo', Key: `${contentHash}/${musicName}`, Expires: 60};
    const url = S3.getSignedUrl('putObject', params);
    return url;
}