Spring 프로젝트 내부에 React 설정 및 Build (Gradle)

해당 게시글을 Spring 프로젝트와 React에 대한 자세한 설명을 제공하지는 않습니다.

 

React 프로젝트 생성하기

React 프로젝트를 생성하고 싶은 위치에 아래 명령어를 입력하여 생성합니다.

npx create-react-app {프로젝트 이름}

그러면 아래와 같이 프로젝트가 원하는 위치에 생성됩니다.

CORS 이슈가 발생하지 않도록 Package.json에 proxy 설정을 추가해 줍니다.

{
	// ...
	"proxy": "http://localhost:8080"
}

 

통합 Build 설정하기

Spring에서 React를 Build 할 수 있도록 아래 설정을 Gradle에 추가합니다.

이때, frontendDir은 React 프로젝트 Path입니다.

// React 설정 시작
def frontendDir = "$projectDir/daangn-react"

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"
}
// React 설정 끝

해당 설정은 다음과 같은 순서로 동작합니다.

1. React 프로젝트 내부에서 npm install을 수행한다.
2. React 프로젝트 내부에서 npm build를 수행하여 build 디렉터리 내부에 파일을 생성한다.
3. React 프로젝트 build 디렉터리에 생성된 정적 파일을 spring 프로젝트의 resources/static으로 복사한다.

 

참고

• https://magicmk.tistory.com/22
• https://mopil.tistory.com/m/59