아무거나

[Spring Boot] Spring Boot + Gradle + VueJS 연동 본문

Java/Spring

[Spring Boot] Spring Boot + Gradle + VueJS 연동

전봉근 2018. 9. 28. 16:57
반응형

해당 포스트는 Spring Boot와 VueJS를 연동하는 과정을 작성했다.




1. Gradle에 Thymeleaf 설정

dependencies {
compile('org.springframework.boot:spring-boot-starter-thymeleaf')
compile('org.springframework.boot:spring-boot-starter-web')


....
}



2. src/main/resources/application.yml 설정 ( thymeleaf의 경우 html5 모드가 기본으로 설정되어 있어 아래의 설정을 추가해주어야 meta tag로 인한 에러가 발생하지 않는다. )

spring:
profiles: local

....


thymeleaf:
cache: false
mode: LEGACYHTML5

....



3. Router Controller 설정

    [RouteController.java]

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class RouteController {

@RequestMapping("/")
public String index() {
return "index";
}

@RequestMapping(value = "/{path:[^\\.]*}")
public String redirect() {
return "forward:/";
}

}



4. Vue Project 설치 및 실행

$ npm install -g vue-cli
$ vue init webpack frontend
$ cd frontend
$ npm install
$ npm run dev

* 위의 과정은 설치 부터 실행까지의 과정을 명령으로 나타낸 것이다. 위의 순서대로 차례로 진행하자.


# 아래 명령을 실행시에 세팅을 대략 이렇게 주었다. ( 각자 원하는 설정으로 하자. )

$ vue init webpack frontend

bash$ vue init webpack frontend 

? Project name frontend
? Project description A Vue.js project
? Author bkjeon1614@gmail.com
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Set up unit tests Yes
? Pick a test runner karma
? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "vue-test".

To get started:

cd vue-test
npm install
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack


# 아래 명령을 실행하자.

   (1) vue project가 설치된 폴더로 경로 이동

   (2) (1)번의 경로에서 npm install 명령 실행

cd frontend
npm install


# 아래 명령을 실행하면 " Your application is runngin here:http://localhost:8080" 이 출력되는게 확인이 가능하다. 해당 url로 접속하면 vue index화면에 표시되는걸 볼 수 있다.

npm run dev



5. Webpack 빌드 시 생성되는 index.html 파일이 스프링 부트의 resources 디렉터리에 위치하도록 config파일을 수정하자

    [ frontend/config/index.js ]

....

build: {
// Template for index.html
index: path.resolve(__dirname, '../../src/main/resources/templates/index.html'),

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

....



6. 빌드를 실행하면 아래와 같이 표시된다. 그럼 정상적으로 빌드가 되었다.

cd frontend
npm run build




7. spring boot application 실행결과 ( localhost:8080 )




8. 구조 확인


대략 완료된 구조는 아래와 같다.



# Vue.js 파일들은 frontend라는 폴더에 저장되어있으며 관리의 편의성을 위하여 spring 파일들과 분리시켜 주었다. 만약 vue.js를 새로 세팅을 하고 싶다면 " vue init webpack frontend " 명령어를 입력하면 된다.


github: https://github.com/bkjeon1614/java-example-code/tree/master/spring-boot-vuejs

반응형
Comments