vue histroy mode tomcat 적용하기 (2번 방법)

 

해당 방법은 1번 보다 vue 공식 문서에 좀 더 가까운 방법 입니다. 

 

저의 publicPath 은 아래와 같습니다.

톰캣과 맞췄습니다. 

 

아래는 현재 router 셋팅 입니다., 

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
import TestHistoryPage from "@/views/TestHistoryPage.vue"
Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },{
    path:'/TestHistoryPage',
    name: 'TestHistoryPage',
    component: TestHistoryPage
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

 

여기서 TestHistroyPage 가 Test 할 대상 입니다. 

 

현재 상태 에서는 아래와 같이 URL 로 바로 접속시 404 에러를 보냅니다.

 

 

 

먼저 META-INF 폴더를 만듭니다.  그리고 context.xml 을 만듭니다. 

context.xml 안에 내용은 아래와 같습니다.  

 WatchResource 는 아래 내용이 변경 될때 마다 실시간으로 반경 시키는 설정 입니다. 

<?xml version="1.0" encoding="UTF-8"?>

<Context>
  <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
  <WatchedResource>WEB-INF/rewrite.config</WatchedResource>
</Context>

 

그리고 난뒤에 

WEB-INF 파일을 만들고 rewrite.config 파일을 만들어 줍니다. 

해당 rewrite.config 파일의 자세한 내용은 

tomcat.apache.org/tomcat-8.5-doc/rewrite.html 해당 링크에서 잘 알수 있지만 이해하기 어렵습니다...

 

공식 문서에서는 

 

아래와 같이 나오지만 아파치에 해당 하는 내용으로 Tomcat 만 사용시에 할수가 없습니다. 

 

그래서 저 설정에 최대한 맞춰 

rewrite.config 파일을 설정해 줍니다 .

 

rewrite.config을 설정해는 목적은 아래 빨간색 동그라미 파이을 요청 할때는 redirect 을 하지 않고 

 

그 외에 경우는 모두 index.html 로 리디렉션 하는것이 목적 입니다. 

rewrite.config 파일을 아래와 같이 작성 합니다. 

RewriteRule ^/index\.html$ - [L]

RewriteCond %{REQUEST_PATH} !-d
RewriteCond %{REQUEST_PATH} !-f
RewriteRule (.*) /index.html [L]

 

위와 같이 작성하고 저장 하면 

 

위와 같이 바로 정상 적으로 출력이 되게 됩니다. 

 

네트워크 히스토리를 보면 304 상태 코드를 보내 줍니다. 

304는 

ko.wikipedia.org/wiki/HTTP_%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C

HTTP 상태 코드 - 위키백과, 우리 모두의 백과사전

위키에 아래와 같이 설명이 나옵니다. 

• 304(수정되지 않음): 마지막 요청 이후 요청한 페이지는 수정되지 않았다. 서버가 이 응답을 표시하면 페이지의 콘텐츠를 표시하지 않는다. 요청자가 마지막으로 페이지를 요청한 후 페이지가 변경되지 않으면 이 응답(If-Modified-Since HTTP 헤더라고 함)을 표시하도록 서버를 구성해야 한다.

먼가 직관 적인 설명은 아닌듯 합니다. 

결론은 리디렉션을 한다는 것입니다. 

URL은 그대로 두면서요. 

 

1번 방법 에서 와 다른점은 위에 설명에서 보다 시피 캐쉬를 이용 하는듯 합니다. 

이전에 설명한  1번 방법 은 은 404을 그냥 리디렉션 하고 304는 캐쉬와 적절히 활용해서 리디렉션을 한다. 정도로 

이해 하고 넘어가면 될것 같습니다.