Nginx SPA에서 새로고침 시 404 Not Found 에러 발생

• SPA(Single Page Application)

  • 새로운 페이지를 불러오지 않고, 현재 페이지를 동적으로 다시 작성하는 어플리케이션이나 웹 사이트

  • 내 경우엔 리액트로 빌드한 웹사이트였다. 원인이 리액트 소스코드에 있는 줄 알았는데 Nginx 문제였다.

원인

• 하위주소에 대한 html 파일을 요청하는데, SPA의 경우 index.html 내부에서 처리하므로 이외의 파일을 찾을 수 없다.

해결

• 파일을 찾아도 없으면 index.html 파일로 연결하도록 설정해야 한다.

• nginx 설정 파일(/etc/nginx/conf.d/default.conf 혹은 /etc/nginx/sites-available/default)에서 try_files를 다음과 같이 설정한다.

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

참고

• HotHandCoding