1. 시험환경
˙ Springboot
˙ React.js
˙ build.gradle
2. 목적
˙ Springboot 프로젝트에서 React.js 프로젝트를 함께 배포한다.
3. 적용
① Springboot 프로젝트 안에서 React.js 프로젝트를 생성 및 연동하는 방법은 아래 내용을 참고한다.
- 참고 : https://languagestory.tistory.com/234
Springboot 프로젝트에서 React.js 연동 설정
1. 시험환경 ˙ Springboot ˙ Gradle ˙ React.js ˙ axios 2. 목적 ˙ Spring Initializr를 이용하여 Springboot 프로젝트를 생성한다. ˙ React.js 프로젝트를 생성한다. ˙ Springboot와 React.js 연동을 위한 설정한다. ˙ Sprin
languagestory.tistory.com
② build.gradle에서 React.js 배포를 위한 설정 부분을 추가한다.
- webDir 변수 : react.js 프로젝트를 생성한 경로
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
def webDir = "$projectDir/src/main/web"
sourceSets {
main {
resources {
srcDirs = ["$projectDir/src/main/resources"]
}
}
}
processResources { dependsOn "copyReactBuildFiles" }
task installReact(type: Exec) {
workingDir "$webDir"
inputs.dir "$webDir"
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 "$webDir"
inputs.dir "$webDir"
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 "$webDir/build"
into "$projectDir/src/main/resources/static"
}
|
cs |
③ 프로젝트 경로에서 빌드(build) 한다.
- 빌드 명령어 : gradlew build
- 빌드 결과 : [프로젝트홈]/build/libs
 |
|
④ 빌드 파일(.jar)를 실행한다.
- JAR 실행 명령어 : java -jar [빌드파일]
4. 결과
˙ Web에 접속하여 실행여부를 확인한다. (frontend 확인)
˙ 빌드파일을 실행한 콘솔로그를 확인한다. (backend 확인)
'스프링 프레임워크' 카테고리의 다른 글
| Spring Data Rest를 이용하여 Rest API 구축하기 (0) | 2023.05.01 |
|---|---|
| Spring Data JPA 설정 및 초기 데이터 생성 (0) | 2023.05.01 |
| Springboot 프로젝트와 React.js 프로젝트 연동 설정 (0) | 2023.03.13 |
| springboot, mybatis, MySQL 연동 프로젝트 생성, 설정 및 예제 코드 (0) | 2023.03.09 |
| Springboot 최초 시작 시 IntelliJ 에러 (finished with non-zero exit value 1) (0) | 2023.03.09 |