vue.js webpack spring boot

2020/08/31 - [JavaScript/vue.js] - Vue.js

2020/08/31 - [JavaScript/vue.js] - vue.js spring boot

2020/08/31 - [JavaScript/vue.js] - vue.js webpack 구조

2020/08/31 - [JavaScript/vue.js] - Vue.js 배포

2020/08/31 - [JavaScript/vue.js] - vue.js webpack spring boot

 

vue.js webpack spring boot

vue js와 webpack, spring boot의 조합.  뭔가 webpack 까지 사용하니, javascript의 패키징 까지 사용하니 좀더 완성된 플랫폼 같이 보인다.  기존 vue.js에서 추가할 사항은 vue-init를 설치한다.

# npm 으로 vue-cli 설치
npm install -g @vue/cli
#global addon <vue init>
npm install -g @vue/cli-init   

# project Create 
vue init webpack frontend

• -g : grobal 옵션으로 설치후 어디서든 사용가능하다는 의미

vue-cli3 부터는 webpack 이 포함됨으로 vue init webpack-template 사용하지 않아도 된다. vue create {project-name} -no—git 을 사용 할것.

vuejs-templates/webpack

vuejs-templates/webpack

vue init webpack frontend 실행시 몇가지 설정을 물어본다.

? Project name frontend
? Project description mas-it-farm project (Vue.js)
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "frontend".

 

• project name , project description, project author
• vue-router 설치 여부 yes
• ESLint 선택 standard
• unit test 선택 Yes or No, 테스트할경우 yes , Jest 선택

최종 설치 내역

설치 완료시 아래 메시지 확인

# Project initialization finished!
# ========================

To get started:

  cd frontend
  npm run dev

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

frontend 폴더 확인

Webpack 번들링 output 위치 설정

Vue에서 작성한 코드들을 번들링하고, 빌드된 결과의 위치를 지정한다.

Spring boot 에서는 자동설정으로 /src/main/resources 위치에서 정적파일들이 인식된다.

config/index.js 파일을 열어 build 부분을 수정한다.

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: '/',

....
}

• index: path.resolve ⇒ 빌드될 index.html 경로 위치
• assetsRoot: path.resolve ⇒ 빌드될 css js 의 위치
• assetsPublicPath ⇒ 빌드될 html에서의 css js의 경로 (보통 static루트에 html이 위치함으로 기본설정

vue js 빌드

# 빌드 명령어 실행 npm run build

빌드 내역 확인

빌드가 완료되고 나면 src/main/resources/static , src/main/resources/templates, 밑으로 파일이 생성된 것을 확인 할 수 있다.

 

스프링 웹에서 resource/static 폴더 경로를 읽게 하기 위해서는 의존성 설정에 spring-boot-starter-thymeleaf 를 꼭 넣고 해야 한다.

Vue.JS 설정 및 실행

지금까지 웹팩 번들링을 이용하여 Spring Boot Application 의 정적 리소스 위치로 빌드되고 스프링 어플리 케이션을 실행하여 확인 하였다면, 이번엔 Vue.js 를 실행하여 확인해보자

# npm install # pacakge.json 의 내용을 토대로 install 'node_modules' 을 생성해준다. C:\\project\\IdeaProjects\\msa-it-farm\\mas-farm-client\\frontend>npm install # npm start (서버 실행) C:\\project\\IdeaProjects\\msa-it-farm\\mas-farm-client\\frontend>npm start

http://localhost:8080 으로 접속하여 index.html 파일 확인

Port 변경

Spring boot Application 이 8080포트를 사용함으로 포트를 변경해준다. index.js 파일을 수정하여 포트 변경(3000)

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 3000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
}

Webpack 번들링 빌드후 실행한 Spring Boot Application 과 Node.js 로 Vue.js 를 실행한것과 웹화면에서는 똑같아 보인다.

소스보기를 하면 이둘의 차이점을 확인 할 수 있는데, 이는 소스가 압축되어있는걸 확인 할수 있다.

 

Vue.js - node.js

 

Vue.js - webpack- Spring boot

 

결론 

열씸히 해서 이렇게 Vue.js 의 빌드된 파일을 웹팩으로 Spring Boot 의 static 폴더로 옮기는 작업을 해봤는데 , 이방법은 비추한다. Vue.js 자체가 SPA 상태로 돌아가는건데 굳이 어렵게 Spring Boot의 static 으로 옮겨야 하는 이유가 필요한가? 이런 의문을 들게 했는데, 답은 별도 구현하여 분리하는게 더 맞다.