웹 페이지를 만들 때 사용자들이 조금 더 매끄럽게 서비스를 사용할 수 있도록 SPA로 만드는 경우가 많습니다. 본 블로그 포스팅은 Spring boot와 Vue js를 이용해 간단한 SPA를 개발하기 위한 개발 환경 설정과 관련된 포스팅입니다. Spring Boot와 Vue js를 어느정도 사용할 줄 알고 있고, 두 프레임워크를 연동해 개발하는 방법을 찾고 계시는 분들께서 읽기에 적당한 글입니다.
실행 환경
- IntellJ IDEA 2019.2.3 Ultimate Edition
- Vue.js 3.5.5 Release
- Spring boot 2.2.1 Release
- jdk 1.8
아래 가이드를 따라가기 전에 npm, vue.js가 모두 설치되어 있어야 합니다!
환경 설정 가이드
1. Spring boot & vue.js 프로젝트 시작
1-1)간단한 Spring Boot 프로젝트 시작 (Spring boot로 프로젝트를 시작하는데에 익숙하시면 다음 내용으로 pass~)
이제 간단한 Spring boot 프로젝트가 잘 만들어졌습니다.
1-2) Spring boot 프로젝트 안에서 vue.js와의 연동
이제 시작한 프로젝트 안에서 Spring boot와 Vue.js를 연동하여 개발할 수 있도록 환경을 구축해 봅시다. 현재 java로 작성할 소스 코드들이 위치할 디렉터리는 이미 생성되어있는 상태이고, vue로 작성할 소스 코드들이 위치할 디렉터리는 아직 만들어지지 않았습니다. 이제 vue cli로 src 디렉터리 아래에 vue.js 프로젝트를 하나 만들어봅시다.
사실 이렇게만 해도 충분히 spring과 vue를 연동해서 개발할 수 있기는 합니다. 하지만 이대로 시작하면 vue를 이용해 client쪽 페이지 구성을 바꿀 때마다 매번 다시 build하고, 나온 결과물들을 resources/static으로 이동하는 번거로운 작업을 해야합니다. 게다가 개발 서버를 spring과 vue 각각 하나씩 띄워야 하니, port 번호도 두 개로 나뉩니다. 하지만 실제 배포 환경에서는 vue로 작성한 코드들이 빌드되어 정적인 자원으로 바뀌고, 요청을 받는 서버는 spring 서버 하나입니다. port번호를 두 개로 나누어 작업하고 배포하면 나중에 상당히 피곤한 일이 생길 수 있습니다.
위의 두 문제점을 해결하기 위해 vue.js dev서버에 proxy 설정을 해서 spring으로 오게 될 요청들을 모두 vue.js dev서버에서 proxing 하여 받고, spring쪽으로 보내주도록 설정해보겠습니다. 더불어 코드를 모두 작성하고 배포할 때 보다 편하게 build 할 수 있게 하기 위해 vue.js 코드의 build 결과물이 저장되는 타깃 디렉터리도 변경해보도록 하겠습니다.
2. Vue.js dev 서버에 proxy 설정 & 빌드 타깃 디렉터리 설정
그러니까 정리하자면, local에서 개발할 때에는 대략 아래와 같이 진행하게 됩니다.
2-1) Vue.js dev 서버에 proxy 설정
시작하기에 앞서 설치해야 하는 모듈들이 있습니다. frontend 디렉터리로 이동해 다음과 같이 두 모듈을 설치해주세요.
reqeust 모듈은 프론트쪽에서 백엔드쪽으로 ajax 요청을 할 때 사용할 모듈이고, path는 vue.config.js에서 빌드된 결과물을 떨어뜨릴 타깃 디렉토리 설정을 할 때 필요한 모듈입니다.
이렇게 만들어 놓고 vue dev서버와 spring 서버를 각각 띄워줍시다.
이렇게 vue dev서버를 띄우고 IDE에서도 spring 서버를 띄워줍니다. 그러면 vue dev서버는 localhost:8080에, spring 서버는 localhost:9000에 떠있는 상태가 됩니다.
그러면 이제 proxy 설정이 잘 되었는지 한번 확인해 봅시다. App.vue에서 아래와 같이
2-2) 빌드 타깃 디렉터리 설정
이제 vue 파일들을 빌드할 때, 빌드 결과물로 생기는 html, css, js 파일들이 떨어지는 디렉터리를 변경해봅시다. 아무런 설정 없이 빌드하면 보통 dist 디렉터리가 하나 만들어지고, 해당 디렉터리 안에 빌드 결과물들이 생깁니다. 이 결과물들을 매번 main/resources/static으로 이동시키기 귀찮으니, 타깃 디렉토리를 아얘 그쪽으로 바꿔버리는게 좋겠습니다.
2-3) gradle build할 때 npm build가 먼저 수행되도록 설정
이제 마지막으로 배포할 때 npm build가 자동으로 수행되도록 설정해봅시다. 배포할 때마다 매번 npm build를 먼저 해주고, 그 뒤에 gradle build를 해주는 게 몹시 귀찮으니, gradle build가 수행되는 과정에서 static resources들이 필요한 시점에 npm build가 자동으로 유발되도록 설정해보겠습니다.
참고한 링크
vue js devServer proxy : https://cli.vuejs.org/config/#devserver-proxy
Gradle npmTask: https://github.com/srs/gradle-node-plugin/blob/master/docs/node.md
피드백 환영합니다 :)
'Spring' 카테고리의 다른 글
토비의 스프링 예제 실행 가이드 (8) | 2019.11.10 |
---|