SpringBoot와 React 같이 빌드 하는 방법

안녕하세요. 이번 글에서는 스프링부트(SpringBoot)와 React(node.js) 같이 빌드(Build) 하는 방법에 대해 알아보도록 하겠습니다. 평소 백엔드(Back-End)와 프론트엔드(Front-End)를 따로 Build를 했었는데 아래와 같이 하시면 한 번에 빌드가 가능하여 편리합니다.

build.gradle 수정

build.gradle 파일에 아래와 같은 코드를 넣어주시면 SpringBoot 빌드시 자동으로 npm 명령어도 작동하게 됩니다.
* front-end라고 쓰여있는 위치를 원하는 front-end 폴더 위치로 변경

node {
    nodeModulesDir = file("$projectDir/front-end")
    version = '18.3.0'
    download = true
}

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

task copyFrontEnd(type: Copy) {
    from "$projectDir/front-end/static"
    into 'build/resources/main/static/.'
}

task cleanFrontEnd(type: Delete) {
    delete "$projectDir/front-end/static", "$projectDir/front-end/node_modules"
}

npmBuild.dependsOn npmInstall
copyFrontEnd.dependsOn npmBuild
compileJava.dependsOn copyFrontEnd

clean.dependsOn cleanFrontEnd

여기까지 백엔드와 프론트엔드를 빌드하는 방법에 대해 알아보았습니다. 개발하시는데 도움이 되었으면 합니다. 감사합니다.