스프링과 리액트 연동, 통합 공부

현재 방법

1. 백앤드에서 서버 배포 후에 서버 주소를 알려준다. 프론트에서 그 url로 axios등 연결(지인이 사용하는 방법)
2. 프론트에서 로컬로 스프링을 띄운 후에, localhost:8080으로 proxy 설정 후 사용

 

2. 프론트에서 로컬로 스프링을 띄운 후에, localhost:8080으로 proxy 설정 후 사용

• CORS에러 방지를 위해 프록시 관련 모듈 (공식문서) 설치 후에, axios 이용
• 참고 문헌

    Gradle을 이용해서 프로젝트 빌드하기

이 부분은 연동보다는 통합 빌드와 관련

프로젝트를 하나의 패키지화 시키는 것,  build.gradle에 하단의 코드를 추가 시켜 SpringBoot 프로젝트와 React 프로젝트가 하나의 패키지가 될 수 있는 build 구성한다. 더 자세한 내용은 하단의 참고 문헌에서

def frontendDir = "$projectDir/frontend"

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 "$buildDir/resources/main/static"
}
출처: https://7942yongdae.tistory.com/136 [개발자 일지:티스토리]

• 참고문헌