Spring boot + Vue 프로젝트 생성하기

프론트엔드 프로젝트와 백엔드 프로젝트를 분리하여 개발하는 방법도 있지만, 개발 편의성 혹은 구조상의 문제로 합쳐야 하는 경우가 있다.

이 글에서는 Spring boot 프로젝트와 Vue 프로젝트의 소스가 합쳐진 프로젝트를 생성한다.

추가로 크롤링을 위해 Prerendering 플러그인도 적용한다.

1. 스프링 부트 프로젝트를 생성한다.

Spring Boot 프로젝트를 생성한다

 

2. 뷰 CLI를 이용하여 뷰 프로젝트를 생성한다.

이 예제는 webpack-simple 템플릿으로 생성했다

 

3. 뷰 프로젝트 폴더에 만들어진 파일을 스프링 프로젝트로 이동한다.

From (Vue project)	To (Spring project)	비고
src	./src/main/vue
Index.html	./src/main/resources/templates	템플릿 엔진을 사용한다면 확장자도 변경
그 외	./	.babel.rc, webpack.config.js 등 설정 파일

 

4. package.json 파일의 상세 정보 및 의존성을 설정하고 npm install 명령을 수행한다.

5. webpack.config.js 파일을 설정한다.

A.     Entry
엔트리(main.js) 파일의 위치로 설정한다.

B.      Output
빌드 결과물의 위치를 /src/main/resources/static/dist 폴더로 지정한다.

const __resourceDir = 'src/main/resources/';
const __index = 'index.html';

인덱스 파일 및 리소스 파일 path 변수 선언

module.exports = {
  entry: './src/main/vue/main.js',
  output: {
    path: path.resolve(__dirname, __resourceDir, 'static/dist'),
    publicPath: '/dist/',
    filename: 'build.js'
},

C.     webpack-dev-server를 설정한다.
기본 포트는 8080으로 스프링 부트의 기본 포트와 겹치므로 변경하는 것이 좋다.

devServer: {
  before: function (app) {
    app.get('/', (req, res) => {
      res.sendFile(
        path.resolve(__dirname, __resourceDir, 'templates', __index)
      );
    });
  },
  port: 4200,
  historyApiFallback: true,
  noInfo: true,
  overlay: true
}

6. Gradle을 설정한다.

A.     Gradle-node-plugin 디펜전시를 추가한다.

buildscript {

  ext {
    springBootVersion = '2.0.4.RELEASE'
  }

  repositories {
    mavenCentral()
    maven {
      url "https://plugins.gradle.org/m2/"
    }
  }

  dependencies {
    classpath "com.moowork.gradle:gradle-node-plugin:1.2.0"
    classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
  }

}


apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'
apply plugin: "com.moowork.node"

 

B.      Gradle에서 사용할 npm build 및 full-build task를 추가한다.

/*****  TASK DEFINE *****/


task npmBuild(type: NpmTask) {
  workingDir = file("./")
  args = ['run', 'build']
}


task fullBuild(type: Zip) {
  def tasks = [npmBuild, clean, build]
  for (int i = 0; i < tasks.size() - 1; i++) {
    tasks[i + 1].mustRunAfter(tasks[i])
  }
  dependsOn(tasks)
}

 

7. 인덱스 컨트롤러를 만들고 빌드하고 테스트한다.

@Controller

public class IndexController {
  public String index() {
    return "index.html";
  }
}

 

추가된 fullBuild task를 실행하면 npm build 이후 스프링 부트 프로젝트를 빌드한다.

 

 

 

 

@ 추가 설정: prerender-spa-plugin을 이용해 프리렌더링하여 크롤러에 노출시키는 방법

https://github.com/chrisvfritz/prerender-spa-plugin

A.    package.json 파일에 의존성 추가 및 npm install

"devDependencies": {
  "prerender-spa-plugin": "~3.2.1"
}

 

B.     webpack.config.js 파일에 플러그인 설정 추가

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

const __resourceDir = 'src/main/resources/';
const __index = 'index.html';

최상단 플러그인 import 및 디렉토리 위치 선언

 

module.exports.plugins = (module.exports.plugins || []).concat([

    ...,

  new PrerenderSPAPlugin({

    staticDir: path.join(__dirname, __resourceDir, 'static'),
    indexPath: path.join(__dirname, __resourceDir, 'templates', __index),
    routes: [ '/' ],

    renderer: new Renderer({
      renderAfterElementExists: '#app'
    })

  })

])

최하단 production 빌드 구문에 prerender 플러그인 추가

 

C.    결과 확인

Postman으로 확인한 모습