이전글 : 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 을 작성하는 일만 남았다.
'IT > Spring' 카테고리의 다른 글
Spring Integration - ThreadPoolExecutor with udp-inbound-channel-adapter (0) | 2018.10.16 |
---|---|
@ModelAttribute, @RequestParam, @RequestBody, request.getParameter(), request.getAttribute() (0) | 2018.09.20 |
Spring Boot - Vue.js 연동 (2) | 2018.08.30 |
Spring Boot - MyBatis 연동 (0) | 2018.08.29 |
Spring Security - 시작하기 (0) | 2018.08.23 |