Spring Boot - Context Path 설정 & Vue.js & Bootstrap 으로 화면 구현

이전글 : 2018/09/06 - [IT/Web] - Spring Boot + Spring Security + MyBatis + Vue.js

Spring Boot 를 start project 로 기본 생성하면 context-path 가 없다. 

http://localhost:8080/ 으로 접속하면 초기 화면이 나오게 된다. 

하나의 물리적 서버에 하나의 Tomcat Instance 와 하나의 Web Application 을 띄우는 것이 가장 좋겠으나 

하나의 Tomcat Instance 에 여러개의 Web Application 을 context name 으로 구분하여 띄우는 경우도 많다. 

이번에는 Spring Boot 에 context-path 를 설정하는 방법과 

그리고 Vue.js 를 BootStrap 을 이용해서 그럴싸하게 만들어 연동(?) 하는 방법을 정리 해 본다. 

우선 context-path 를 설정하는 것은 너무나 쉽다. 

src/main/resources/application.properties 에 아래와 같이 한줄을 추가 하면 된다.

server.servlet.context-path=/yhkim 

이렇게 하면 이제부터 http://localhost:8080/yhkim 으로 접속해야 초기 화면이 나오게 된다.

server 의 port 도 바꿔보자. 

server.port=80

이렇게 한줄 추가하면 http://localhost/yhkim 으로 접속 된다. 

그 외에도 아주 많은 설정들을 할 수 있으며 spring boot 에서 제공하는 여러 option 은 https://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html 에서 확인 가능 하다. 

vue.js & bootstrap 은 찾아보면 예제가 정말 많다. 

https://bootstrap-vue.js.org/ 을 통해 하나씩 해봐도 되고 나는 잘 만들어진 template 을 써보려 한다. 

AdminLTE 이라는 괜찮은 Template 이 있어서 download 후 나의 frontend 쪽에 포팅해 보았다. 

여기서 주의해야 할 점은 context-path를 설정했기 때문에 frontend 인 vue project 에서도 context-path를 적용해야 한다는 점이다. 

vue-router 의 index.js 에 

const contextRoot = '/yhkim' 을 추가 하고 

routes 각각의 path 앞에 contextRoot 를 추가 해 준다. 

그리고 frontend/config/index.js 의 build 부분에 있는 assetsPublicPath 를 '/yhkim/' 으로 설정해 준다.  <-- 이부분을 하지 않으면 build된(webpack으로 bundling 된 css 와 js) 파일 안에 .css, .js, image 파일들의 경로가 맞지 않아 제대로 나오지 않을 수 있으니 주의 해야 한다. 

최종적인 화면은 이렇다. 

이제 각각의 화면에 맞는 Vue 를 만들고 그럴듯한 Web Application 을 작성하는 일만 남았다.