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

해당 포스트는 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