Vue.js + Spring boot 개발 환경 및 빌드 환경 설정

웹 페이지를 만들 때 사용자들이 조금 더 매끄럽게 서비스를 사용할 수 있도록 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 프로젝트를 하나 만들어봅시다.

터미널을 통해 해당 프로젝트의 src 디렉터리로 이동해주세요. 그리고 vue cli로 프로젝트 시작!

짜잔~ 그러면 이렇게 src 밑에 새로 frontend 디렉터리가 생깁니다. vue로 작성한 프론트엔드 소스코드들을 모두 이곳에서 관리됩니다.

사실 이렇게만 해도 충분히 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에서 개발할 때에는 대략 아래와 같이 진행하게 됩니다.

이렇게 하면 local에서 개발할 때에도 하나의 서버만 있는 것처럼 생각하고 개발할 수 있습니다.

2-1) Vue.js dev 서버에 proxy 설정

시작하기에 앞서 설치해야 하는 모듈들이 있습니다. frontend 디렉터리로 이동해 다음과 같이 두 모듈을 설치해주세요.

reqeust 모듈은 프론트쪽에서 백엔드쪽으로 ajax 요청을 할 때 사용할 모듈이고, path는 vue.config.js에서 빌드된 결과물을 떨어뜨릴 타깃 디렉토리 설정을 할 때 필요한 모듈입니다.

vue js dev서버는 8080 포트에, spring 서버는 9000 포트에 띄우고 개발을 진행할 예정입니다. IDE에서 spring 서버 포트를 변경해줍시다.

frontend 디렉터리 아래에 vue.config.js 파일을 하나 만들고, 위와 같이 프록시 설정을 해줍니다. 앞으로 vue dev서버에서 localhost:8080/api로 오는 요청을 받으면 localhost:9000/api를 향해 다시 해당 요청을 요청을 다시 쏴줄 겁니다. 그리고 응답을 받으면 개발자에게 받은 응답을 되돌려주는 겁니다.

Spring 서버에 /api 로 오는 요청을 처리해줄 수 있는 간단한 controller를 하나 만들어줍시다.

이렇게 만들어 놓고 vue dev서버와 spring 서버를 각각 띄워줍시다.

vue cli로 만든 frontend 디렉토리로 이동해서 vue dev서버를 실행합니다.

이렇게 vue dev서버를 띄우고 IDE에서도 spring 서버를 띄워줍니다. 그러면 vue dev서버는 localhost:8080에, spring 서버는 localhost:9000에 떠있는 상태가 됩니다.

그러면 이제 proxy 설정이 잘 되었는지 한번 확인해 봅시다. App.vue에서 아래와 같이

proxy 설정이 잘 되었는지 확인해봅시다. 지금 spring 서버는 localhost:9000에 떠있고, 요청은 localhost:8080으로 날렸습니다.

브라우저를 열어서 개발자도구를 켜고, localhost:8080으로 접속해 SPA를 띄워봅시다.

이런 문구가 뜨면 성공! localhost:8080으로 요청을 날렸는데, localhost:9000에 떠있는 spring 서버로부터 응답을 받아왔습니다!

2-2) 빌드 타깃 디렉터리 설정

이제 vue 파일들을 빌드할 때, 빌드 결과물로 생기는 html, css, js 파일들이 떨어지는 디렉터리를 변경해봅시다. 아무런 설정 없이 빌드하면 보통 dist 디렉터리가 하나 만들어지고, 해당 디렉터리 안에 빌드 결과물들이 생깁니다. 이 결과물들을 매번 main/resources/static으로 이동시키기 귀찮으니, 타깃 디렉토리를 아얘 그쪽으로 바꿔버리는게 좋겠습니다.

vue.config.js 파일을 열고, 위와 같이 outputDir를 설정합니다.

2-3) gradle build할 때 npm build가 먼저 수행되도록 설정

이제 마지막으로 배포할 때 npm build가 자동으로 수행되도록 설정해봅시다. 배포할 때마다 매번 npm build를 먼저 해주고, 그 뒤에 gradle build를 해주는 게 몹시 귀찮으니, gradle build가 수행되는 과정에서 static resources들이 필요한 시점에 npm build가 자동으로 유발되도록 설정해보겠습니다.