스프링부트 + 리액트 연동 연결 프로젝트 생성

1. 스프링프로젝트 생성

start.spring.io에서 프로젝트를 생성

참고.
스프링부트 3.x버전부터는 java17이 필수.
java8,11은 스프링부트 2.7.x로 프로젝트를 생성한다
gradle-kotlin은 에러가 있어서 Groovy로 생성했다
JDK 1.8을 사용해서 gradle 빌드 시 빌드할 때 오류 발생해서 gradle-wrapper.properties파일에서 7 버전으로 낮췄다

Group : 프로젝트 정의, 구분하게 해주는 식별자 정보이다 보통은 회사 도메인을 적는다(도메인의 반대 ex. com.naver)
Artifact: 빌드했을 때 나오는 결과물의 파일명이다(jar파일) 소문자로 작성하고 특수문자는 사용하지 않는다
Name : 메인클래스명으로 생성된다(ex. my-app이면 프로젝트에 MyAppApplication으로 클래스 생성) 보통은 Artifact와 동일하게 사용된다

다운로드한 압축파일을 프로젝트경로에 풀고 인텔리제이로 폴더오픈을 한다 (최초 빌드시간 오래 걸림)

2. 리액트프로젝트를 생성

빌드가 완료되면 터미널(Alt+F12)을 열어서 src/main경로에 reactfront라는 이름으로 React프로젝트를 생성해 준다
cd src/main
npx create-react-app reactfront

cd reactfront로 이동 후 npm start로 프로젝트가 정상 실행되는지 확인한다

 

3. Spring Boot + React 연결

React프로젝트 package.json파일에 "proxy" : "http://localhost:8080",

 

build.gradle 파일 아래쪽에 내용을 추가해 준다

def frontendDir = "$projectDir/src/main/reactfront"

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

 

빌드 후 스프링 프로젝트를 실행한다
localhost:8080, 3000 모두 동일 페이지가 보이게 된다