Spring Boot + vue, react 환경 구성

개요

Spring Boot와 Front-end를(vue, react) 하나의 프로젝트로 구성하여 배포하는 방법에 대하여 알아본다.

 

Prerequisites

Node.js 설치

사용할 Node.js 버전에 맞게 설치해 준다.

Node.js : https://nodejs.org/en

 

Spring Boot 3.x 프로젝트 생성

Spring Web Starter를 사용하여 프로젝트를 생성한다.

build.gradle 파일

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.3.3'
	id 'io.spring.dependency-management' version '1.1.6'
}

group = 'org.igooo'
version = '0.0.1-SNAPSHOT'

java {
	toolchain {
		languageVersion = JavaLanguageVersion.of(21)
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-actuator'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
}

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

 

Front-end 프로젝트 구성

생성한 프로젝트의 디렉터리에서 vite를 사용하여 frontend 프로젝트를 생성한다.

$ npm create vite@latest
Need to install the following packages:
  create-vite@4.4.1
  OK to proceed? (y) y
  Project name: ... frontend
  Select a framework: >> React
  Select a variant: >> TypeScript
  
 Scaffolding project in /home/igooo/workspace/spring-front-end/frontend...
 
 Done. Now run:
 
  cd frontend
  npm install
  npm run dev

 

프로젝트 구조에 frontend 디렉터리에 UI 파일들이 생성된 것을 볼 수 있다.

 

gradle 빌드 구성

gradle 빌드 시 frontend UI 프로젝트 파일을 npm run build(https://create-react-app.dev/docs/deployment/)하여 배포 파일을 만들고 최종적으로 gradle 빌드되는 jar 파일에 UI 빌드 파일을 추가해 주도록 gradle 빌드 파일을 구성한다.

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.3.3'
	id 'io.spring.dependency-management' version '1.1.6'
	id 'com.github.node-gradle.node' version '7.0.2'
}

group = 'org.igooo'
version = '0.0.1-SNAPSHOT'

.......

node {
	version = '16.16.0'
	download = true
	nodeProejctDir = file("${project.projectDir}/frontend")
}

task npmAppInstall(type: YarnTask) {
	description = 'npm install'
	workingDir = file("${project.projectDir}/frontend")
	args = ["install"]
}

task buildNodeApp(type: YarnTask) {
	dependsOn = npmAppInstall
	description = 'npm run build'
	workingDir = file("${project.projectDir}/frontend")
	args = ["run", "build"]
}

processResources {
	dependsOn = buildNodeApp
	from("frontend/dist") {
		include 'assets/'
		include 'fonts/'
		include 'img/'
		include 'index.html'
		include 'vite.svg'
		into "public"
	}
}

 

build.gradle 파일에 추가된 내용을 살펴보면 precessResoures를 실행하기 전에 buildNodeApp Task를 실행하여 Node 파일을 다운로드하고 배포가 가능한 상태로 빌드를 한다. 빌드의 결과물은 frontend/dist에 생성이 되고 생성된 파일은 UI 처리가 가능한 public 디렉터리로 복사하여 UI 빌드 파일을 jar파일에 포함시킨다.

 

대부분의 규모가 있는 시스템에서는 Front-end 서버와 Backend 서버를 분리하여 구성하겠지만 규모가 작거나 개발자의 두 개의 프로젝트를 모두 운영하는 경우 하나의 프로젝트로 구성하는 방법도 운영에 들어가는 시간을 줄일 수 있다.