Spring Boot와 Vue.js 연동하기

Spring Boot와 Vue.js 연동하기

---

지금까지 Vue.js를 배웠으니 Spring Boot 프레임워크 프로젝트와 연동하여 사용해보자.

Vue.js Webpack 템플릿 만들기

---

Spring boot 프로젝트 루트 폴더에 뷰 템플릿을 구성할 폴더 하나를 생성한다.

터미널에서 해당 폴더로 접근한 뒤 vue init webpack 으로 webpack 템플릿을 구성한다.

작업이 완료되면 아래와 같이 웹팩 템플릿 구조가 만들어진다.

웹팩 번들링 output 설정하기

---

뷰로 작성한 코드들을 번들링하고 번들링된 결과를 어느 위치에 뽑아낼 것인지를 정해야한다.

Spring Boot는 자동 설정에 의해 src/main/resources에서 static에 index.html과 정적 파일들(js, css, image)을 인식하도록 설정되어 있기 때문에 해당 위치에 번들링한 결과를 저장하도록 설정해야한다.

웹팩 템플릿을 생성한 폴더에 config/index.js를 열어주자.

index.js를 열어보면 build 속성을 정의한 내용을 찾을 수 있다.

index : 속성으로 index.html 파일을 어디에 저장할 것인지 경로를 정할 수 있다.

위에서 얘기했듯 Spring Boot는 기본적으로 src/main/resources/static에서 정적파일을 관리한다. 

따라서 이곳의 경로로 index.html과 각종 js, css를 저장하도록 설정하면 된다.

(절대 경로로 저장할 위치를 지정한 모습이다.)

설정이 되었다면 터미널에서 npm run build 커맨드를 입력하여 빌드를 실행한다.

빌드가 완료되면 src/main/resources/static 하위에 번들링 된 정적 파일들이 생성되는 것을 확인할 수 있다.

Spring Boot 애플리케이션 실행하기

---

이제 Spring Boot 메인 애플리케이션을 실행하고 웹을 접속해서 뷰가 연동되었는지 확인해보자.

애플리케이션을 실행하고 URL을 통해 localhost:8080/으로 접속하면 뷰 화면이 나오는 것을 확인할 수 있다.

이로써 Spring Boot + Vue.js 연동이 완료되었다.