SpringBoot,React]스프링 실행시 리액트 서버 자동 실행 , 빌드시 같이 빌드하기

나는 지금 SpringBoot와 React를 통해 백엔드, 프런트엔드를 구성해서 샘플 프로젝트를 만들고 있다.

 

이 두 환경에서 프로젝트를 진행하다보니 spring boot 실행시키고 react에서 npm run start를 두 번에 거쳐서 실행시켜야 하는 게 

 

정말 정말 매우 너무너무 귀찮았다.

 

난 스프링이 실행이 되면서 리액트 서버도 자동으로 켜지는 방법이 없을까 하다가 gradle의 build script를 작성하기로 마음먹었다.

 

 

---

일단 사전 준비는 다음과 같다.

 

Spring boot

gradle

react

딱 이 3개면 된다.

 

그리고 package.json에

"proxy": "http://localhost:8080",를 추가하여 

프록시 설정을 해줬다.

 

일단 내 프로젝트 구조는 이와 같다.

 

frontend 안에는 프론트 엔드 관련 리액트 파일, package.json 등이 들어있고,

 

src아래로는 java 파일들이 있다.

 

이 점을 참고하고 build.gradle을 보자.

 

//build.gradle

buildscript {
    ext {
        springBootVersion = '2.2.4.RELEASE'
        dependencyManagementVersion = '1.0.10.RELEASE'
        mooworkNodeVersion = "1.3.1"
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
    }
}
plugins {
    id 'org.springframework.boot' version '2.5.3'
    id 'io.spring.dependency-management' version '1.0.11.RELEASE'
    id 'java'
    id "com.moowork.node" version "${mooworkNodeVersion}"
}

plugins에서 com.moowork.node를 위와 같이 추가해준다.

해당 플러그인을 추가해줘야 gradle이 빌드되면서 npm 명령어를 사용하기 위해 node를 다운로드한다.

 

그리고 나는 spring boot의 실행 profile을 gradle의 bootRun으로 했다.

 

---

profile 설정 방법



 

화면 상단 Edit Config를 클릭한다.

 

화면 좌상단 +버튼 누르고 Gradle 선택

 

Run 항목에서 bootRun선택

---

스크립트 작성하기

1. 스프링 실행 시 리액트 서버 자동 실행

task runReactServer(type: NpmTask) {
    workingDir = file("frontend");
    args = ["run", "start"]
}

위 코드를 build.gradle에 추가해주자

task {task이름}(type:NpmTask){

workingDir=file("{내 리액트 경로}")

args = ["run", "start"]

}

 

와 같이 적어준다.

나는 최상단에 frontend에 파일이 있고, 실행 스크립트는 npm run start다.

package.json에서 실행 스크립트를 바꿨다면 맞게 바꿔주면 된다.

 

해당 task를 정의해주고 

 

bootRun.doFirst {
    runReactServer
}

이 코드를 build.gradle에 마찬가지로 추가!

 

이렇게 하고 spring을 실행하면 

spring은 bootRun Task로 실행하고 해당 task 실행 전에 npm run start를 하게 되어 

스프링만 실행하면 리액트 서버를 자동으로 실행하게 되는 셈이다.

 

스프링을 실행하고 바인딩되어있는 포트에 들어가게 되면,

 

리액트가 잘 실행된 걸 볼 수 있다.

300x250

 

---

java build시 리액트 함께 빌드하기

 

task appNpmInstall(type: NpmTask) {
    workingDir = file("${webappDir}")
    args = ["run", "build"]
}
task copyWebApp(type: Copy) {
    from 'frontend/build'
    into "build/resources/main/static"
}
copyWebApp.dependsOn(appNpmInstall)
compileJava.dependsOn(copyWebApp)

// copyWebApp은 appNpmInstall이 실행되고 나서 실행된다.
// 즉,frontend에서 npm run build가 실행이 되고,
// build된 파일들을 spring이 읽을 수 있게 static폴더로 복사한다.

 

gradle wrapper로 빌드를 하면 compileJava task가 실행되면서 리액트 파일들도 빌드하고 복사한 후, jar파일을 생성하게 되는 것이다.

 

프로젝트 경로에서 gradle wrapper로 빌드

 

로그를 보면 먼저 정의한 npm install task가 실행되고 build가 실행됨을 볼 수 있다.

 

spring도 jar로 빌드 완료.

 

wrapper로 빌드하면 build/libs 안에 jar파일이 생성된다.

 

터미널에서 해당 경로로 이동 후, jar파일을 실행한 다음 8080 포트로 이동해보자.

 

cd build/libs/



java -jar TodoList-0.0.1.jar

아까 bootRun처럼 프로젝트가 잘 실행이 됐고,

똑같이 잘 뜬 모습을 볼 수 있다.