SpringBoot + Svelte 프로젝트 생성하기 - (2) 빌드 설정

Spring Boot + Svelte를 하나의 프로젝트로 관리하고자 할때 One Build가 가능하도록 프로젝트를 구성할 수 있다.

결론적으로 gradle build 명령어를 통해 Spring Boot + Svelte 프로젝트의 빌드를 한번에 할 수 있도록 프로젝트를 구성할 것이다.

 

Svelte 빌드 결과물을 SpringBoot의 static 디렉토리로 위치

rollup.config.js

output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js' // 변경 전
	}
    
output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: '../src/main/resources/static/dist/build/bundle.js' // 변경 후
	}

/src/main/resource/static 디렉토리 밑으로 index.html 이동시킴

 

SpringBoot 서버 실행 시 자동 빌드 설정

build.gradle

plugins {
    id 'java'
    id 'org.springframework.boot' version '2.7.7'
    id 'io.spring.dependency-management' version '1.1.0'
    /**
     * vue-project를 build하기 위한 설정
     * - node gradle plugin 추가
     */
    id 'com.github.node-gradle.node' version '3.2.1'
}

group = 'com.dogcoder'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

repositories {
    mavenCentral()
    /**
     * vue-project를 build하기 위한 설정
     * - node gradle 추가
     */
    gradlePluginPortal()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}


/* Svelte 빌드 설정 */

/**
 * vue-project를 build하기 위한 설정
 * - node gradle plugin의 node 설정 추가
 */
node {
	/**
     * 특정 Node.js 버전을 다운로드 및 설치 할 지 여부
     * true: 다운로드 및 설치
     * false: 전역으로 설치된 Node.js 사용함.
     */
    download = true
    
    /**
     * download가 true일 경우에만 사용
     * version에 명시한 버전으로 Node.js 다운로드 및 설치
     * workDir에 설치됨
     */
    version = '18.12.1'
    
    /**
     * 사용할 npm 버전을 지정하면 npmWorkDir에 설치됨
     * npm 버전을 지정하지 않으면 Node.js에 번들로 제공되는 npm 버전으로 사용됨
     */
    npmVersion = '9.2.0'

    /**
     * npmInstall 작업에 의해 실행되는 npm 명령
     * 기본적으로 설치되지만 ci로 변경할 수 있음
     */
    npmInstallCommand = 'install'
    
    /**
     * svelte 프로젝트 디렉토리 위치
     * package.json 파일과 node_modules 디렉토리가 있는 곳
     * "저는 프로젝트 Root 아래 svelte 프로젝트를 생성하였으므로 아래와 같이 주소를 작성해주었습니다."
     */
    nodeProjectDir = file("${project.projectDir}/frontend")
}

/**
 * vue-project를 build하기 위한 설정
 * - vue-project의 기존 빌드 결과물을 제거하기 위한 task
 */
task deleteSvelteBuildFiles(type: Delete) {
    delete "src/main/resources/static/dist", "${project.projectDir}/svelte/node_modules"
}

/**
 * vue-project를 build하기 위한 설정
 * - vue-project를 빌드하기 위한 npm build task
 *
 * dependsOn에 'deleteVueBuildFiles', 'npmInstall' task 정보를 지정하였으므로
 * npmBuild task는 위 두 task에 의존한다는 것이고,
 * npmBuild가 실행되기 전 위 두 task가 차례대로 먼저 실행됩니다.
 * deleteVueBuildFiles task는 빌드 결과물을 제거하기 위하여 별도 만든 task이고,
 * npmInstall task는 node plugin에서 제공하는 task입니다.
 */
task npmBuild(type: NpmTask, dependsOn: ['deleteSvelteBuildFiles', 'npmInstall']) {
    args = ["run", "build"]
}

/**
 * vue-project를 build하기 위한 설정
 * node gradle에서 제공하는 npmInstall task를 어느 시점에 실행시켜 줄지 지정해주는 것입니다.
 * "gradle build 시 수행되는 processResources task가 실행되기 전에 npmBuild task를 실행하라"
 *
 * 그리고 npmBuild task의 의존으로 deleteVueBuildFiles, npmInstall task가 있으므로,
 * "npmBuild task가 실행하기 전에 deleteVueBuildFiles, npmInstall task를 순서대로 실행하라."
 *
 * 정리한 task 실행 순서는
 * 1) deleteVueBuildFiles
 * 2) npmInstall
 * 3) npmBuild
 * 4) processResources
 * 입니다.
 */
processResources.dependsOn 'npmBuild'

tasks.named('test') {
    useJUnitPlatform()
}

빌드가 성공적으로 잘되면 rollup.config.js에서 설정한 file(빌드 시 생성되는 위치) 위치에 폴더가 생성된다.

 

 

 

참고)

Spring Boot 프로젝트에서 Vuejs 한번에 빌드하기