[Problem]
리액트로 만든 프로젝트를 Nginx로 배포를 하고 나서 테스트 중에 발견한 오류이다.
다른 라우팅 페이지에서 새로고침을 하면 404 Not Found가 발생하였다.
[Solve]
로컬 개발 환경에선 발생하지 않는 오류이니 Nginx의 설정이 잘못되었다고 생각하여 Nginx의 conf설정 파일이 잘 못되었다 생각했다.
구글 서칭을 해보니 Nginx의 설정 파일에 다음과 같은 옵션을 추가해주어야 했다.
location / {
try_files $uri /index.html; # 이 옵션 추가
}
[Why]
Nginx는 기본적으로 요청된 URL에 해당하는 정적 파일(ex. index.html)을 찾는다. 이걸 우린 초기에 설정할 때 옵션으로 root에 url이 바라봐야 하는 html파일을 연결시킨다. 하지만 React Router는 클라이언트 측에서 라우팅 처리를 하기 때문에 서버에는 해당 URL에 대응하는 정적 파일이 존재하지 않아서 생기는 오류이다.
그렇다면 왜 router를 일반적으로 진입할땐 잘 동작하고 새로고침 할 때만 오류가 발생할까?
그 이유는 클라이언트 사이드 라우팅을 이용하여 페이지를 변경하기 때문이다. 즉, 브라우저가 Nginx에게 새로운 정적파일(html)을 요청하는 게 아니라 React가 동적으로 URL을 변경하면서 컴포넌트를 렌더링 하기 때문에 발생하지 않는 것이다.
새로고침을 하거나 주소창에 특정 URL을 입력하게 된다면 Nginx에게 해당 경로의 파일을 요청하고 거기에 맞는 정적파일을 찾지만 찾지 못하기 때문에 404 Not Found를 반환하는 것이다.
따라서 위의 옵션은 해당 정적파일을 찾지 못하면 대신 index.html을 반환하고 React가 실행되면서 현재 URL을 감지하여 해당 컴포넌트를 렌더링 하게 된다.