Spring Boot 에서 React 사용하기

오늘은 스프링 부트에서 View 영역을 React 로 구현해서 Jar 파일에 같이 배포 하는 방식을 알아보려고 합니다.

먼저 스프링 부트 프로젝트를 생성합니다.

그 후 root 디텍토리에 react 프로젝트를 생성합니다.

저는 Yarn 과 TypeScript 를 사용하고 있습니다.

yarn create react-app app --template typescript

이후 /app 폴더에 들어가 정상적으로 동작하는지 확인합니다.

cd app/
yarn start

그러면 3000 포트로 열리는 것을 확인 할 수 있습니다.

이제 jar 파일 빌드 시 react 파일이 같이 빌드되어 포함 되도록 /build.gradle 을 수정합니다.

plugins {
    ...
    id "com.github.node-gradle.node" version "3.1.1"
}

...


// 가장 마지막에 추가해주세요
task yarnInstall(type: YarnTask) {
    workingDir = file("${project.projectDir}/app")
    args = ["install"]
}

task yarnBuild(type: YarnTask) {
    workingDir = file("${project.projectDir}/app")
    args = ['build']
}

task copyWebApp(type: Copy) {
    from 'app/build'
    into "build/resources/main/static"
}

yarnBuild.dependsOn yarnInstall
copyWebApp.dependsOn yarnBuild
compileJava.dependsOn copyWebApp

이후 gradle 빌드 중 bootJar 을 실행하면 빌드가 됩니다.

이후 실행을 해보도록 하겠습니다.

java -jar build/libs/AmountPlanner-0.0.1-SNAPSHOT.jar

JoungSik/Spring Boot 에서 React 사용하기

Spring Boot 에서 React 사용하기