[lostark] 9. 리액트+스프링 부트 AWS 통합 배포하기 [최종_진짜]

일단 끝이 났습니다. 하지만 끝이 아니에요 쓸때마다 인텔리제이 켜고.. 리액트 실행시키고.. 서버 실행시키고.. 할 수는 없잖아요? 배포를 해서 언제나 사용하도록 하고싶단 말이에요.

 

일단 우리는 가지고 있는 AWS 서버가 있으니 거기에 배포를 해보도록 하겠습니다. 배포하는 과정은 제 예전 글을 보시면 있지만. 저는 한가지 의문이 생겼습니다. 내가 만든 프로젝트는 리액트 + 스프링 부트 인데 얘네 어떻게 같이 패키징 하지?

였어요 개발을 하며 리액트, 서버 따로다로 실행시키고 포트도 달랐기에, 흠.. 인텔리제이가 이것도 똑똑하게 같이 패키징 해주려나? 했지만 그건 아니구요! 이제 패키징 시작해보겠습니다.

 

CORS 설정

예전 글에서 설정했던 MvcConfiguration 파일을 찾아가서 설정값을 변경해줄거에요 아래 '서버ip' 부분을 발급받은 AWS 탄력 IP로 변경해주도록 하겠습니다.

 

jsx 파일 API 경로 수정

리액트 이벤트에서 서버에 API를 요청하는 경로도 이제 localhost에서 변경될 AWS 서버의 ip로 바꿔줍니다.

 

Build.gradle 수정

마지막으로 우리가만든 리액트 소스파일 들이 스프링 부트가 패키징 되며 합쳐져야 합니다. 빌드를 하면서 합쳐질 수 있도록 아래 설정을 추가해주도록 하겠습니다. 맨 처음 frontendDir 변수를 선언할 때 마지막 경로 부분은 본인이 생성하신 작업 폴더를 지정해주셔야해요!

def frontendDir = "$projectDir/src/main/lostark_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"
}

 

gradle을 새로고침하여 적용시켜 주고 jar를 만들어 주세요!

 

생성된 jar를 서버로 옮겨주시고 실행시켜 주시면!

 

이렇게 최종적으로 배포된 프로젝트를 확인할 수 있습니다. 이제 언제 어디서든 군장검색기를 사용할 수 있게됐습니다.

 

그럼 이렇게 로스트아크 프로젝트는 음.. 최종 마무리는 아니구요 상세페이지 라던지 로아를 하면서 불편한 기능이 있다면 다시 만들러 돌아오겠습니다. 감사합니다~

 

엽바!