[컴] vue-route 을 static file server 로 서비스 하는 법

serve/ 서브/ 서비스 하는 법 / vue route / 어떻게 / redirect /

vue-route 을 static file server 로 서비스 하는 법

vue-route 에서 url 로 route 을 할 수 있다. 이것을 HTML5 Mode 한다.

그러면 https://example.com/m/url 처럼 url 형식으로 route 가 가능하다.

그런데 이렇게 route 를 한 SPA(single page app) 인 경우, nginx 나 apache 같은 static file server 를 이용해서 serve 한다고 해보자.

그러면 web browser 에서 https://example.com/m/url 를 입력하면 ‘/m/url’ folder 에 접근할 것이다. 그런데 folder 가 없으니, 404 error 가 발생한다.

그래서 vue-route 의 home 으로 redirect 를 시켜줘야 한다.

간략하게 얘기하면, static server 에서 존재하지 않는 url 에 대해서 vue-route home 으로 보내주게 하면 된다. 예를 들어, https://example.com/m/url 로 간 경우, http://example.com/index.html 으로 보내주게 한다.

자세한 내용은 다음링크를 확인하자.

• Different History modes | Vue Router

# 존재하지 않는 url 을 /index.html 로 보내는 설정
location / {
  try_files $uri $uri/ /index.html;
}

주의할 점

만약 아래와 같은 구조일 때

- <nginx_html_root>/
    + link/
        + index.html
    + css/
        + base.css

다음처럼 설정을 한다고 하자.

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

이 때, http://myurl.com/ 을 web browser 에 치면, /link/index.html 로 가지않고, / folder에 대한 access 를 시도한다. 그래서 403 forbidden 에러가 뜬다.

directory path 가 존재하지 않으면, /link/index.html 로 가게 돼서, vue-router 를 사용하게 되지만, 그렇지 않으면 directory access 를 시도 하게 된다.

이 때 방법은 403 error 가 날때 /link/index.html 로 redirection 시키는 것이다. 그러면 vue-router 에서 모두 처리하게 된다.

error_page  403              =301 /link/index.html;

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    ...
    {
      // 정의된 path 이외의 모든 path
      // @see: https://stackoverflow.com/questions/50961082/vue-js-how-to-redirect-to-a-common-route-if-route-isnt-found/64817425#64817425
      path: '/:pathMatch(.*)*',
      component: NotFoundView
    }
  ]
})