뷰(Vue) nginx 서버 설정

일단 라우터의 history 모드를 사용한다. history.pushState API를 활용하여 페이지를 다시 로드하지 않고도 URL을 탐색할 수 있다.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
});

history 모드를 사용하고 local devServer 에서 동작을 시키면, 우리가 원하는대로 동작이 된다.
하지만 vue 를 nginx 나 apache 같은 웹서버에 배포할 경우 문제가 생긴다.
예전에 처음 vue로 개발하고 nginx에 배포하였을 때 당황했던 적이 있었는데 바로 url 접근시 404에러가 뜬다는 것이다.
nginx에 아무런 설정을 하지않고 vue를 번들링해서 배포한 후 http://cornsworld.com/user 로 접근을 하게 되면 user 컴포넌트의 화면이 보이는 것이 아니라 404 오류가 발생한다.

어떻게보면 당연한 오류인데, vue관련 설정을 하지 않아서 nginx의 root 경로기준으로 컨텐츠를 찾으려고해서 나는 오류이다.
예를 들면 nginx root의 경로가 /usr/html 이라고 한다면 위의 http://cornsworld.com/user 로 요청이 왔을 때, nginx는 /user/html 하위의 user 라는 파일을 찾게될 것이다.

이 문제를 해결하려면 nginx의 설정이 필요하다.

nginx 설정

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

요청한 url이 정적 컨텐츠와 일치하지 않으면 index.html 을 제공하라는 의미이다.
여기서 nginx 설정을 잠깐 살펴보자면
try_files

• server & location context에서 사용
• request에 대해 일치하는 path를 앞에서 부터 순서대로 비교한뒤 root에 존재하는 path를 rewrite하는 명령어
  물론 여기서 root는 vue프로젝트가 배포된 폴더여야 한다.

location / {
     try_files $uri $uri/ @rewrite; 
}

location @rewrites {
	rewrite ^(.+)$ /index.html last; 
}

이런식으로 named location을 사용할 수도 있다.

nginx에 위와같은 설정을 추가하면 우리가 원했던 것처럼 동작하는 것을 볼 수 있다.

apache설정

apache에서는 설정해본적은 없으나, 참고로 적어둔다.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>