[Nginx] 웹에서는 동작하는데 모바일에서 동작하지 않는다면 파일의 크기를 고려해보자!(feat. 파일의 크기 제한 413)

발단

최근에 토이 프로젝트를 진행하며 웹에서는 동작하는데 모바일에서 같은 동작임에도 오류가 발생하여 공유하고자 한다.

 

 

문제 발생

웹에서는 `파일`을 전송하고 모바일에서는 `카메라를 조작하여 서버에 파일`을 전송한다. 둘은 같은 동작을 함에도 왜인지 모바일에서는 정상적으로 요청을 할 수 없었다.

 

원인

로그를 확인하여 보니 413 오류를 내 뱉고 있었고, 이는 서버가 허용할 수 있는 크기보다 더 큰 크기의 파일을 전송하고 있다는 것을 의미하였습니다.(아래 참고 확인)

 

---

 

해결 방법

첫번째로 파일의 크기를 리사이징하여 서버가 허용할 수 있는 크기의 파일을 보내는 방법과, 두번째로 서버가 허용할 수 있는 파일의 크기를 늘리는 방법이 있을 것 입니다. 이 중에서 저는 프로젝트의 방향성에 따라 두번째 방법을 선택하여 해결 하였습니다.

 

Nginx 설정 변경

nginx 의 http 컨텍스트 하위에 `client_max_body_size` 를 수용 가능한 크기의 파일 사이즈로 설정

---

참고

• nginx 의 파일 크기에 대한 오류 핸들링 전략

Module ngx_http_core_module

• 웹에서와 모바일에서 서로 다른 현상이 생기게 된 구조

 

[React] 모바일 환경에서 카메라를 통해 이미지를 획득하는 방법(feat.. input, environment)