Vuejs SPA 프로젝트에 개발과 운영 Vue-Cli의 MPA 기능으로 분리하기

Vue Cli를 기반하여 개발하다 보면 난해한 상황을 이겨낼 수 있게 만드는 요소들이 많이 있다. 그중 같은 소스를 사용하지만, 개발(Local)과 운영을 분리하여 환경을 만들어야 할 경우가 있다. 예를 들어 라이센스를 사용하는 솔루션을 사용할 경우 대부분 개발과 운영을 분리하여 라이센스를 주고 있다.

 

ECMA6를 지원하고 이런 경우를 분리하여 반영 할 수 있도록 솔루션을 만들어 주면 좋겠지만, 대부분 솔루션 없체는 그리 친절하지가 않다. 요근래 사용하던 솔루션들은 URL 주소를 기반으로 라이센싱하기 때문에 개발(Local)과 운영(Domain)이 다를 경우 각각 환경에 맞춰 실행해야 한다.

 

index.html 파일에 솔루션 가져오는 부분을 넣어야 하지만 개발과 운영 솔루션 라이브러리가 달라 정적 페이지 내에서 분리하기가 애매하다. 스크립트 단에서 처리하기에는 비동기 문제도 있고...

 

이때 내가 생각했던것은 차라리 진입점 자체를 다르게 하여 개발일 경우는 개발 전용의 index.html을, 운영은 운영 전용의 index.html를 접근하면 어떨까 하는 것이였다. 사실 이 개념은 MPA 방식을 SPA 프로젝트 하이브리드 느낌적인 느낌으로 넣어보는 것이다.

 

Vue Cli에서 다행히, 이렇게 MPA 구성을 지원하고 있다. pages 옵션을 통해서 이 부분을 지정할 수 있다.

// vue.config.js
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    dev: {
      entry: 'src/main.js',
      template: 'public/dev.html',
      filename: 'dev.html'
    }
  }

pages옵션을 적용하지 않으면 당연히 index.html을 기준으로 main.js 바인딩 하여 빌드를 한다. 위와 같이 pages를 지정하게 되면, 진입점이 한개 더 생기게 된다. dev.html에는 개발 전용의 라이센스 기반 솔루션을 로드하게 올려놓고, index.html에는 운영 전용의 라이센스 기반 솔루션을 로드하게 올려놓게 한다.

 

물론 실행되는 스크립트는 같지만, 내부적으로 예전 솔루션들을 불러오는 것 자체가 분기될 수 있다. 하지만 이 경우 개발(Local) 환경에서는 접근할 때, dev.html 명시해서 들어가야 한다. http://localhost:8080/dev 이렇게 명시하게 입력하고 들어가야 한다.

 

이렇게 되면 URL이 꼬일 수 있어서 개발에 지장을 주고, 불편함을 초래한다. 다행히, Vue Cli - devServer 옵션에서 index 파일을 지정수 있다. (Web서버에서 그것 처럼...)

// vue.config.js
  devServer: {
    index: 'dev.html'
  }

개발(Local)에서는 저 파일을 기본 index 파일로 인식하게 된다. 즉, http://localhost:8080로 접근해도 dev 환경으로 진입하게 된다는 것이다.