NGINX 설정 net::ERR_INCOMPLETE_CHUNKED_ENCODING 오류 해결

문제 발단

RgbitCode page 라우팅으로 사용했을 때는 문제가 없었지만 App 라우팅 방식으로 마이그레이션을 한 후 웹사이트를 배포하고 기존에 발생하지 않았던 오류가 발생하게 되었다. PC, 노트북 환경에서는 문제가 없었는데, 모바일에서 접속해보니 루트페이지와 로그인이 필요한 특정 페이지를 접속하려고 하면 아래와 같은 오류가 발생하였다.

Application error: a client-side exception has occurred (see the browser

console for more information)

모바일 웹 브라우저 디버깅하기

삼성 갤럭시 핸드폰의 경우 [설정] > [휴대전화 정보] > [소프트웨어 정보] 에 들어가서 [빌드번호]를 7연타 하게 되면 개발자 모드로 접근할 수 있다. 그리고 핸드폰을 PC 와 USB 로 연결한 후 PC에서 Chrome://inspect 로 접속하게 되면 모바일 환경의 크롬 웹브라우저 디버깅을 할 수 있습니다.

Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING

Loading chunk 7816 failed.

정말 골때리는 문제였다. 몇 시간 동안 해당문제로 씨름을 ...

그런데, PC에서 nextjs 소스코드를 build 를 하고 start를 해서 로컬 PC를 서버로 띄운 후 와이파이 모바일로 접속하여 모바일 웹 브라우저 디버깅을 해보니 해당 오류가 발생하지 않았다.

해결한 방법

웹서버의 nginx 기본 설정으로 활성화 되어있는 옵션을 끄고 Nginx 서비스를 재시작을 했다.

proxy_buffering off

서버로부터의 응답을 버퍼링할지 여부를 정의한다.

• on : 버퍼가 제공하는 메모리 공간을 이용해 응답 데이터를 메모리에 저장. 버퍼가 꽉 차면 응답 데이터는 임시 파일에 저장

• off : 응답을 직접 클라이언트에게 전달

  
  

그랬더니 발생하던 해당오류가 사라졌다. 정확한 원인은 조금 더 파악해 봐야알겠지만, 기존 page 라우팅 방식으로 만들어진 빌드 파일이 일부 Nginx 버퍼에 저장되어 있어서 요청시 그쪽에서 찾으면서 Loading chunk Fail 현상이 생겨버린 것 일 수도 있을 것 같다.