Spring boot - Vue.js 연동하기

Spring boot와 Vue.js를 연동해봅니다.

이 문서에서는 Controller를 어디에 만드는지, cd 명령어는 어디에 입력하는지 등의 모든 과정을 설명하지는 않습니다.

결과물은 이쪽에 --> https://github.com/febdy/Spring-boot-vuejs

Version

Spring boot 2.0.3

Vue.js 2.5.16

Webpack 3.12.0

Gradle 4.x

최종 폴더 구조 예시

project

│

├ src (Spring boot)

│├ main

││　├ java

││　└ resources

│└ test

│

├ frontend (Vue.js)

│├ build

│├ config

│├ node_modules

│├  src

││　├ assets

││　│├ css

││　│├ images

││　│└ js

││　│

││　├ router

││　├ shared-components

││　├ spa

││　│　├ Member

││　│　│　├ components

││　│　│　└ Login.vue

││　│　│

││　│　└ Qna

││　│　　　├ components

││　│　　　└ Qna.vue

││　│

││　├ App.vue

││　└ main.js

││

│├ static

│├ test

│├ .bablerc

│├ .editorconfig

│├ .eslintingore

│├ .eslintrc.js

│├ index.html

│├ package.json

│└ package-lock.json

│

├ build.gradle

├ gradlew

├ gradlew.bat

└ settings.gradle

frontend 구조 참고 : https://github.com/vuejs-kr/vuejs-kr.github.io/issues/28

STEP

1. Spring boot

https://start.spring.io/

Spring boot는 매우 쉽고 편한 프로젝트 생성 방법을 제공합니다.

Gradle Project를 선택하고 Dependencies엔 Web과 Thymeleaf 정도 추가해주고 Generate Project로 프로젝트를 받습니다.

옆에 패키지 이름은 원하는 대로 설정.

2. Controller

간단히 Controller를 만들어봅니다.

주소/hi를 입력하면 thymeleaf에 의해 resources/templates 안에 있는 index.html에 연결됩니다.

Vue.js

1. node.js 설치

https://nodejs.org/ko/

현재(180718) 기준 8.11.3 LTS 설치했습니다.

2. vue-cli install / init webpack project

cd [만들어놓은 Spring boot 폴더] 로 이동해 실행합니다.

$ npm install --g vue-cli

$ vue init webpack frontend

3.

$ cd frontend

$ npm install

frontend 폴더 안에 가서 package들을 install합니다.

node_modules라는 폴더가 생깁니다.

4. config/index.js

  build: {

    // Template for index.html

    index: path.resolve(__dirname, '../../src/main/resources/static/index.html'),

    // Paths

    assetsRoot: path.resolve(__dirname, '../../src/main/resources/static'),

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

config/index.js 파일의 경로를 이렇게 수정합니다.

※

이 문서에서 다루는 Spring boot와 Vue.js 연동의 핵심은 Vue.js build 파일을 src/main/resource 폴더에 위치시켜 Spring boot가 인식할 수 있게 하는 것입니다.

이를 위해 build 기본 설정 파일인 build/webpack.base.conf.js에서

output:을 보면 경로 config.build.assetsRoot에 .js파일이 만들어질 것이란 걸 알 수 있네요.

저 config.build.assetsRoot가 어디있나 찾아보면

config/index.js 안에 설정되어 있습니다.

index.html 경로는 위, css,js가 들어갈 경로는 밑의 assetsRoot입니다.

고로 config/index.js의 index와 assetsRoot를 수정하면 build path를 수정할 수 있습니다.

+) 

application.properties 파일에서

spring.thymeleaf.prefix=classpath:/static/

추가해줍니다.

static/ index.html 를 읽으려면 thymeleaf의 prefix를 templates가 아닌 static으로 바꿔주어야 합니다.

Vue.js config/index.js의 index 경로를 templates으로 잡으면 spring 설정 없이 그대로 index를 사용 가능 하지만 배포할 때 js 파일을 못 읽을 수도 있습니다.

해결 방법은
1. Spring boot에서 thymeleaf의 경로를 바꾸거나
2. Vue.js에서 빌드 설정을 바꿔 static/static/을 인식하게 하는 건데
위가 쉽고 간단하므로 이렇게 해봅니다.

5. npm run build

$npm run build

밑에 파란 글씨의 Build Complete.을 확인합니다.

6. Spring boot server run

각자에게 맞는 방법으로 실행해봅니다.

이클립스로는 프로젝트 우클릭 -> Run as -> Spring Boot App.

5. localhost:포트번호/hi

브라우저에서 localhost:포트번호/hi를 입력하고 확인해봅니다. Vue 페이지가 뜨면 성공입니다.

＊ Vue.js 파일 수정 후 바로바로 확인하기

Vue.js 파일을 바꾸고 확인할 때마다 build를 해볼 수는 없겠지요.

$ npm run dev

명령어를 입력하면 개발 모드로 들어가며 파일을 수정하고 저장하는 즉시 바로바로 확인할 수 있습니다.

나오는 방법은

Ctrl + C

이 서버는 스프링 부트 서버와 별도입니다.

따라서 Vue.js 프로젝트를 확인하기 위해 꼭 Spring boot 서버를 실행할 필요는 없으며

Spring boot 서버에서 확인하고 싶으면 npm run build를 해주어 build된 파일이 다시 src/main/resources에 들어가도록 해야 합니다.

다른 툴은 모르겠고 이클립스를 사용중이라면 npm run build를 했을 때 프로젝트 폴더에서 F5를 눌러 새로고침을 한 번 해주세요.

src/main/resources 반영이 제때제때 자동으로 안 됩니다. 스프링 부트 서버도 종료했다가 다시 실행해야 합니다.

끝~