[React] 리액트 SpringBoot 연동

리액트 SpringBoot 연동

 

1. 스프링, 리액트 프로젝트 생성

spring.io에서 스프링 프로젝트를 만들어서 열어줍니다.

 

터미널에서 main에 리액트 프로젝트를 생성하는 명령어 입력

cd src/main

src/main에서 npx create-react-app 프로젝트명

 

2. bulid.gradle에 아래 코드 추가

def frontendDir = "$projectDir/src/main/프로젝트명"

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"
}

 

 

3. package.json에 추가

"proxy": "http://localhost:8081"

 

 

* 리액트 소스 파일의 수정 내용을 반영하려면 프로젝트 빌드 후 실행할 것.