Spring Boot + VueJS 환경 설정

1. Spring Boot 프로젝트 생성

• https://start.spring.io/
• 빌드툴 Gradle 사용

2. Vue 프로젝트 생성

vue create frontend

└─bookshelf
    ├─build
    ├─gradle
    └─src
        ├─frontend
        ├─main
        └─test

• 저는 scr 밑에 생성

3. vue 개발자 서버 설정

src/frontend/vue.config.js

module.exports = {
    devServer: {
        port: 3000,
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                ws: true,
                changeOrigin: true
            }
        }
    },
}

• https://cli.vuejs.org/config/#devserver-proxy
• 포트 번호 3000 설정으로 Spring Boot과 충돌 X
• /api로 시작하는 요청이 http://localhost:8080로 가도록 설정

여기까지 할 시

• 여전희 프론트엔드, 백엔드 서버를 둘다 띄워야 한다
• 이를 해결하기위해 Vuejs의 빌드 파일을 Spring Boot가 관리하는 /main/resources/static으로 옮기고
• 빌드시 이 과정을 자동화 하자

4. Vue 빌드 타겟 디렉토리 설정

src/frontend/vue.config.js

module.exports = {
    //추가
    outputDir: '../main/resources/static',

    devServer: {
        port: 3000,
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                ws: true,
                changeOrigin: true
            }
        }
    }
}

5. gradle build 수정

build.gradle

plugins {
    id 'org.springframework.boot' version '2.5.2'
    id 'io.spring.dependency-management' version '1.0.11.RELEASE'
    id "com.github.node-gradle.node" version "3.1.0" // <--- 추가
    id 'java' //11
}

node {
    version = '14.16.1'
    npmVersion = '7.18.1'
    download = true
    workDir = file("${project.buildDir}/nodejs")
    npmWorkDir = file("${project.buildDir}/npm")
}

• gradle이 빌드 과정에서 node 명령어 실행 가능하게 해주는 플러그인 필요
• 관련 플러그인 중 gradle-node-plugin 사용
• plugins 에서 실행 환경 참고..

//이미 빌드된 파일 삭제
task deleteVueArtifact(type: Delete) {
    delete "src/main/resources/static"
}

//npm install
task frontNpmInstall(type: NpmTask) {
    workingDir = file("${project.projectDir}/src/frontend")
    args = ['install']
}

//npm run build
task npmBuild(type: NpmTask, dependsOn: ['deleteVueArtifact', 'frontNpmInstall']) {
    workingDir = file("${project.projectDir}/src/frontend")
    args = ['run', 'build']
}

processResources.dependsOn 'npmBuild'

• task 추가와 gradle build 명령어 수행시 해당 task 수행하게 설정