모노레포의 Gradle 빌드 전략
Spring과 React를 모노레포로 구성할 때 Vite와 Gradle의 설정을 통해 빌드를 쉽게 관리할 수 있다.
Monorepo 구성¶
Gradle로 빌드를 통합 관리할 예정이기 때문에 Front-End의 소스코드가 Gradle 프로젝트의 하위 폴더에 위치해야 한다. 프로젝트의 구조를 아래와 같이 구성하면 된다.
.
├─.gradle
├─build
├─frontend # (1)!
├─gradle
└─src
└─main
├─java
│ └─com
│ └─artifact
└─resources
├─static
└─templates
- React 프로젝트의 위치
Gradle + Vite 방식¶
Vite 빌드 결과 파일이 Spring 앱의 static 경로에 생성되도록 설정해준다.
vite.config.ts
export default defineConfig({
// ...
build: {
outDir: '../src/main/resources/static', // (1)!
emptyOutDir: true, // (2)!
},
// ...
})
- Spring Boot 정적 리소스 경로
- 빌드 시 기존 파일 삭제
Gradle로 빌드 수행 시 processResources 태스크12 시작 전에 frontend 경로에서 npm 빌드를 먼저 수행하도록 설정하자.
build.gradle
task buildFrontend(type: Exec) {
workingDir 'frontend'
if (System.getProperty('os.name').toLowerCase().contains('windows')) {
commandLine 'npm.cmd', 'run', 'build'
} else {
commandLine 'npm', 'run', 'build'
}
}
processResources.dependsOn buildFrontend
Gradle 단일 관리 방식¶
아래와 같이 설정하면 Vite 설정은 기본으로 유지하고 Gradle 설정만 변경해서 빌드를 통합할 수 있다.
build.gradle
task buildFrontend(type: Exec) {
workingDir 'frontend'
if (System.getProperty('os.name').toLowerCase().contains('windows')) {
commandLine 'npm.cmd', 'run', 'build'
} else {
commandLine 'npm', 'run', 'build'
}
}
task copyFrontendContents(type: Copy) {
dependsOn buildFrontend
from 'frontend/dist' // (1)!
into 'build/resources/main/static' // (2)!
}
processResources.dependsOn copyFrontendContents
- Vite의 빌드 결과물 기본 경로
- SpringBoot 정적 자원 경로