Spring Boot + Vue.js 연동하기 (vscode)

참고 블로그

https://kdevkr.github.io/spring-boot-integration-vuejs/

 

 

1. spring initializer

https://start.spring.io/ 

원하는 폴더 위치에서 zip파일 압축 해제

디렉터리 구조

src
 ├─ main
 │ ├─ java
 │ └─ resources
gradle
build.gradle

 

Vue

2. vue 설치 후 버전확인

sudo npm i -g @vue/cli
vue --version

 

3. vue 프로젝트 생성 (참고링크의 개발자가 만들어놓은 preset 가져옴)

• 제가 참고한 kdevkr/vue-preset 프리셋은 다음의 vue 라이브러리들을 포함합니다.
• Babel
• ESLint + Prettier
• SCSS (with dart-sass)
• Vuex
• Vue Router
• Bootstrap Vue
• Fontawesome

vue_demo 는 프로젝트 이름으로 대체합니다.

cd src/main
vue create --preset kdevkr/vue-preset vue_demo

 

스프링부트 + 뷰 연동 후 디렉터리 구조

src
 ├─ main
 │ ├─ java
 │ ├─ resources
 │ └─ vue
gradle
build.gradle

 

 

프로젝트 빌드 

npm run build

 

프로젝트 실행

npm run serve

8081에서 돌아감

 

 

스프링부트 실행

스프링부트는 톰캣이 내장되어 있기에 별다른 설정이 필요없습니다. 라이브러리 설치 완료만 기다렸다가 DemoApplication.java에서 Run을 눌러주거나 왼쪽 하단에 Spring-Boot DashBoard에서 실행을 시켜줘도 됩니다.

 

Spring Boot + Vue 프로세스

vue build -> 스프링부트의 resources/static/dist에 정적파일 업로드 -> spring boot에서 실행하여 정적파일 실행

 

 

vscode 에서 필요한 플러그인

 

 

 

application.yml

server:
  port: 8080

spring:
  web:
    resources:
      static-locations: META-INF:/resources, classpath:/resources, classpath:/static, classpath:/static/dist

서버 포트번호 8080으로 설정

 

vue.config.js

- 서버의 포트번호와 프록시 설정

- vue 빌드 시 올라가는 경로 설정

const path = require('path')

module.exports = {
  indexPath: '../../templates/index.ftlh', // index.ftlh 만들어지는 위치 
  outputDir: path.resolve(__dirname, '../resources/static/dist'), // vue project 빌드 경로
  devServer: {
    port: 8081,
    proxy: 'http://localhost:8080',
    disableHostCheck: true
  },
  chainWebpack: config => { 
    config.plugin('html')
        .tap(args => {
          args[0].minify = false // 스프링 부트 애플리케이션이 프리마커 템플릿 엔진으로 index.ftlh을 읽을 때 발생하는 오류를 방지
          args[0].interpolate = true
          return args
        })
  }
};

vue 서버포트번호 8081로 설정 

서버는 8080 으로 설정

 

 

스프링 부트 서버 가동시키기

서버 정상 가동 시 터미널 창

gradle build 도구 : GUI 환경으로 간편하게 빌드 가능