[React] react.js 어플리캐이션 404 not found 에러 (Nginx 서버)

 

🌻 개요

개발 환경에서 react 애플리케이션의 테스트를 끝내고, Nginx 서버에 업로드를 하였다.

응용 프로그램이 잘 동작하고 있어 데이터베이스에 저장이 되는 등 모든 것이 잘 작동하였다.

하지만 다른 페이지로 넘어가면서 새로 고침이 되는 순간 404 not found 에러가 발생했다.

window.location.reload()를 쓴 부분에서 모두 404 not found 에러가 발생하는 것이었다.

 

nginx 404 not found

 

로컬과 개발 환경에서 테스트를 진행했을 때는, 아무런 문제가 없었기에 당황스러웠다.

다행히도 해당 에러에 대한 해결방안을 찾아서 아래에 한글로 번역해 둔다.

 

404 error?

404는 http 프로토콜의 코드입니다. http 프로토콜이란 웹을 구성하는 일종의 규약이라고 보면 된다. 404 not found는 말 그래도 웹 페이지를 찾지 못했다는 의미를 말합니다.

 

 

🚧 How can i solve this?

react.js 앱이 로드될 때, 경로는 react-router에 의해 프런트 엔드에서 처리된다.

예를 들어 http://a.com에서 => 다음 페이지에서 http://a.com/b로 이동한다. 이 경로 변경은 브라우저 자체에서 처리된다.

이제 새 탭에서 URL (http://a.com/b)를 새로 고치거나 열면, 요청이 특정 경로가 존재하지 않는 Nginx로 가서 404 not found가 된다.

 

이 문제를 피하기 위해, 우리는 Nginx가 파일을 보내고 그 경로가 브라우저의 react앱에 의해 처리되도록 모든 일치하지 않는 경로에 대한 루트 파일(일반적으로 index.html)을 로드해야 한다.

이렇게 하려면 nginx.conf 또는 site-enabled에서 다음과 같이 적절하게 변경해야 한다.

- nginx.conf

location / {
  try_files $uri /index.html;
}

이것은 Nginx가 지정된 $uri를 찾도록 지시하고, 찾을 수 없으면 index.html을 브라우저로 다시 보낸다.

 

- try_files...

$uri 가 일치하는 파일이 있는지 확인한다.

해당 파일이 없다면 $uri/ 파일이 있는지 확인한다.

해당 파일이 또 없으면 /index.html을 찾는다.

 

🤣 마무리

정확히는 잘 모르겠지만, react 애플리케이션 CSR 속성 때문인 것 같다.

찾아본 내용을 바탕으로 정리해 보자면, 설정되지 않은 경로에 대한 기본값이 필요하기 때문이라고 한다.

($uri 경로를 찾지 못하면 index.html로 보내는 설정입니다.)

nginx.conf 파일에 아래와 같이 설정해 주면 잘 동작한다고 한다!

해당 부분에 대해서 틀린 부분이나, 더 좋은 방법이 있다면 알려주세요~

 

 

🚩 참고

reactjs - react.js application showing 404 not found in nginx server - Stack Overflow