[SpringBoot] Gradle + React 같이 빌드하기

React 와 vue 를 실행하려면 npm start 또는 run 으로 따로 실행을 해야 하는데

매번 이렇게 할 수 없기 때문에 front와 back 을 같이 build 하여 back 주소로 실행하려고 한다

 

 

build.gradle

def frontendDir = "$projectDir/src/main/frontend/my-app"

sourceSets {
    main {
        resources { srcDirs = ["$projectDir/src/main/resources"]
        }
    }
}

processResources { dependsOn "copyReactBuildFiles" }

task installReact(type: Exec) {
    workingDir "$frontendDir"
    inputs.dir "$frontendDir"
    group = BasePlugin.BUILD_GROUP
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "audit", "fix"
        commandLine 'npm.cmd', 'install' }
    else {
        commandLine "npm", "audit", "fix" commandLine 'npm', 'install'
    }
}

task buildReact(type: Exec) {
    dependsOn "installReact"
    workingDir "$frontendDir"
    inputs.dir "$frontendDir"
    group = BasePlugin.BUILD_GROUP
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "run-script", "build"
    } else {
        commandLine "npm", "run-script", "build"
    }
}

task copyReactBuildFiles(type: Copy) {
    dependsOn "buildReact"
    from "$frontendDir/build"
    into "$projectDir/src/main/resources/static"
}

 

frontendDir 에 React 를 사용하기 위해 npm 으로 만든 폴더 경로를 지정해 준다

$projectDir 는 루트경로로 따로 적어주지 않아도 된다고 한다

build.gradle 파일 아래에 위의 소스를 넣고 실행하면 React 와 같이 build 되어 실행된다.

vue는 테스트하지 못했는데 될 거라 생각된다.

Gradle 보다는 Maven을 선호하는 편인데 공부할 겸 만들다 보니 Gradle이 되었다

Maven은 나중에 추가하는 걸로..