문제의 발단
모바일에서의 CORS
모바일에서 테스트중 사진이 등록되지 않는 문제를 발견했다. 콘솔창을 보기위해 chrome://inspect/#devices을 이용해 콘솔을 확인했었다.
콘솔로 얻은 나의 상태는 CORS.
너무나도 당황스럽게 CORS문제였다. 웹브라우저에서는 잘 작동하던게 모바일에서 들어간 브라우저에서 작동이 안되다니. 너무나 어처구니가 없었다.
그렇게 multer, s3, lambda를 이잡듯이 뒤졌다.
데이터 타입?
그렇게 열심히 찾아보다가 어제인 12월 9일 데이터 타입일지 모른다는 생각을 했다. 이미지 re-sizing을 위해 사용한 sharp 모듈에서 jpg 확장자를 jpeg로 바꾸는 과정에 오류가 있을 수 있다고 생각했다. 그래서 모바일에서 jpeg파일을 업로드하니 정상적으로 되었다.
아 이거구나!
그러나 sharp의 jpeg함수를 사용해보며 적용했지만 결과는 같았다. 사실 jpg와 jpeg의 차이는 거의 없었다. 확장자를 단순히 바꿔주는 것만으로도 확장자가 변경되는 사실상 같은 확장자였다.
그러다 문득 용량이 큰 jpeg파일을 웹브라우저에서 업로드를 했고 모바일처럼 똑같은 CORS에러가 나를 사로잡았다.
용량!!
그렇다. 용량문제였다. 그러면 어디서 잘못되었을까. 다시 multer, multer-s3, lambda 모두 확인하는 과정을 거쳤다. multer의 사이즈 오류라고 생각했지만 불현듯 나의 뇌리에 스친건 Nginx였다.
Nginx 설정
nginx의 기본설정에 client_max_body_size는 1mb로 설정되어있다. 다시말하자면 사진을 아무리 보내도 결국에 1mb이하 사이즈 사진만 업로드 되고 있었던 것이다.
해결
먼저 sudo vim /etc/nginx/nginx.conf로 설정파일에 들어간다.
해당설정은 http, server, location context에 설정할 수 있다.
예를들어 이렇게!
http { ... client_max_body_size 20M; }
마무리
이것저것 많이 써보고 싶어서 시도해본 것들이 나를 붙잡았다. 어떻게 이런 오류가 뜰까 싶었지만 이제는 적어도 이해가 간다. 너무 기본적이 내용을 살펴보지 않고 무턱대고 들어간 내 책임이다. 기본적으로 사용법, 기본설정 등은 꼭 읽는 습관을 들여야겠다.
