빌드한 Vue.js앱을 ubuntu Nginx에 배포 했을 때 라우팅 404나는 경우

/about 이 경로로 이동을 하려고 할 때 로컬에서는 잘 되는데 nginx서버에서는 에러가 납니다.

왜냐하면 host/about 로 요청을 보내면 nginx가 이 요청을 받아서 루트 디렉토리 아래에 /about을 찾기 때문입니다.

그런데 vue나 react는 싱글페이지라서 파일이 있지 않기 때문에 404에러가 나는 것입니다.

 

nginx설정을 바꾸어야 할 곳은

/etc/nginx/sites-available

에 있는 default가 설정 파일 입니다.

 

설정파일에 try_files를 바꿔 주어야 합니다.

제 nginx버전은 nginx version: nginx/1.14.0 (Ubuntu) 입니다.

 

location / { 
          # First attempt to serve request as file, then
          #try_files $uri $uri/ =404; 기존
          try_files $uri $uri/ /index.html;
}