Springboot + react 조합의 프로젝트 생성하기

개발환경

- IDLE :  IntelliJ

- Java :  OracleJDK 17

- node.js : 16.17 version

- gradle 프로젝트

- mariaDB

 

1. 생성한 Springboot 프로젝트 의 src/main 디렉토리에 React Project생성

   (Spring boot 프로젝트 생성방법은 구글링하면 Spring.io에서 제공하는 initializr 사용법이 있다.)

 

npx create-react-app 프로젝트명

이때 프로젝트명에는 대문자를 사용할 수 없다.

react project 가 잘생성되었다면 아래와 같이 생성한 디렉토리가 보일 것이다.

 

 

2. 생성한 React Project의  Proxy 설정

 로컬 개발 환경에서 본인이 별도의 설정을 따로하지 않았다면

React 프로젝트는 3000번 포트로 SpringBoot 프로젝트는 8080번 포트로 실행될텐데

이때 CORS 문제가 발생해 proxy 설정을 해주어야 한다.

 

우선, 생성된 react project를 들여다보면  package.json 파일이 존재하는데

여기에 script 라고 적혀진 코드 위에다가 아래와 같이 추가한다.

"proxy" : "http://localhost:8080",

package.json 파일

3. build.gradle 설정

 build.gradle 맨 밑에  아래의 코드를 추가하는데

SpringBoot 프로젝트가 build 될 때 React 프로젝트가 먼저 build되고, 결과물을 SpringBoot 프로젝트 build 결과물에 포함시킨다는 스크립트이다.

 

frontendDri = 에 src/main/뒤에는 생성한 react project의 경로를 작성해주도록 하자.

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

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

 

 위와 같이 설정한 build.gradle의 내용은 SpringBoot 프로젝트가 build 될 때 React 프로젝트를 먼저 build 하고 결과물을 SpringBoot 프로젝트 build 결과물에 포함시킨다는 스크립트이다. 

 

 따라서 gradle을 이용해 프로젝트를 build 하는 경우 task가 서로 의존 관계를 가지기 때문에 

installReact > buildReact > copyReactBuildFiles 순으로 실행이된다.

 

 

그 다음 오른쪽에 보면 gradle 탭이 있는데 눌러주면 아래와 같은 화면을 볼 수 있다.

저기서 붉은색으로 표시된 build를 실행시켜주도록 한다.

제대로 적용이 되었다면 localhost:8080 으로 접속하면 다음과 같이 리액트 기본 페이지를 볼 수 있다.