배경

사용하고 있는 s3의 용량이 크지 않기 때문에 관리 차원에서 사진을 업로드할 때 용량 제한을 할 필요가 있었다.

고려 사항

• 최대 10개의 사진 업로드 가능
• 사용하고 있는 s3용량 : 5GB
• 최소한의 사진 품질

소셜 플랫폼 특성상 사용자들이 게시글이나 시음기록을 작성할 때 사진을 첨부하는 경우가 꽤 있을것이다.

그러므로 각 사진의 최대 용량은 5MB으로 제한과 함께 백엔드 로직을 설정해 두었다.

문제 상황

front에서 개발중에 사진 업로드 테스트를 진행하였는데 413 에러가 발생하였다.

추가로 성공, 실패 케이스를 알려주셨다.

성공 케이스

• 사진 7개, 각 용량: 100KB -> 총 700KB

실패 케이스

• 사진 7개 , 각 용량 : 1MB -> 총 7MB
• 사진 7개, 각 용량 : 500KB -> 총 3.5MB

1MB가 넘지 않는 선에서는 api 호출하여 사진을 업로드하는데 문제가 없었다.

해결 과정

413 Content Too Large

HTTP 413 Content Too Large 응답 상태 코드는 요청 엔터티가 서버에 의해 정의된 제한보다 크다는 것을 나타냅니다. 출처: MDN

nginx를 proxy 서버로 설정해 놓은 상태에서 사진을 한번에 업로드할때 다른 개발자 분들도 413 에러를 겪은것을 찾아볼 수 있었다. 참고 블로그

nginx.conf에서 client의 요청 크기를 제한 설정을 한 적이 없었지만 nginx 공식문서를 찾아본 결과
기본 설정값은 1M으로 되어있기 떄문에 총 용량이 1M이 넘지 않는 케이스에서 성공한 것이었다.

server {
	listen 80;
	
	location / {
		...
		client_max_body_size 50M;
}

최대 요청 크기를 50M (5MB * 10개)으로
nginx.conf에서 http, server, location에 위의 Syntax에 맞게 설정하고
nginx를 reload한 후 테스트한 결과 모두 성공적으로 요청이 가능했다.

추가 고민

최악의 경우에 사용자가 5MB 10개 사진을 업로드 요청을 많이 하게 된다면
(5MB 10) 100번 = 5GB 으로 사용중인 s3 저장용량이 꽉 차게된다.

5개의 사진으로만 한다고 가정해보아도 200번이면 용량이 꽉 찬다...

해결하기 위한 방법 고민
1. s3 용량 증가. -> 가장 간단하지만 비용 증가
2. 각 사진 용량 제한 감소 -> 사진의 품질이 떨어질 수 있다.
3. 최대 사진 업로드 개수 감소 -> 요구사항 변경 제안 필요, 사용자의 자유도 감소

아직 배포하기 전이기 때문에 배포 후 사용자들의 한 게시물 당 평균 사진 업로드 개수를 파악하고 결정하기로 하였다.

느낀점

보통 api 오류가 있다면 백엔드 로직부터 확인해 보았다. 하지만 오류의 원인이 백엔드 로직에만 있다고 가정하지 않고 요청 흐름에 따라 하나씩 고민해보면 좋을것 같다고 느꼈다.
또한 nginx를 proxy서버로 사용중이지만 알지 못하고 사용되는 기능도 있는것을 알 수 있었고 좀 더 알아볼 필요가 있다고 느꼈다.