Spring boot와 React + gradle 연동하여 개발하기 build(빌드) 하기

1. 스프링 부트를 백엔드, 리엑트를 프론트엔드 연동하기

보통 스프링 부트를 사용하면 thymeleaf 를 이용하여 프론트를 개발하는 경우가 많이 있었습니다. 하지만 최근 1~2년 사이에 리엑트 강의를 들으면서 어느정도 리엑트에 대해서 감이 잡혀 토이프로젝트를 진행하였습니다. 하여 Spring boot와 React를 연동하여 개발하는 방법을 공유하고자 합니다. 

2. Spring boot 프로젝트 생성하기

스프링 부트를 이용하여 간단한 컨트롤러를 만들어준뒤 아래와 같은 간단한 api를 만들어서 사용합니다. 아래의 사진은리그오브레전드 api를 이용하여 사용자의 정보를 조회하는 토이프로젝트로 1~2일 정도 걸려서 만들었습니다.

 

kingname.tistory.com/110?category=811074

스프링 부트 ( Spring boot ) 컨트롤러 생성과 활용, MVC에 대해서 알아보기

3. React 설치 및 설정변경

리엑트(React) 를 생성합니다. nodejs를 설치하면 자동으로 설치되는 npm이나 추가적으로 yarn 을 설치하여 npx create-react-app frontend 이나 yarn create-react-app 등 여러가지 방법으로 react 앱을 만들어 줍니다. 이후 Package.json 파일에서 proxy 설정에 관한 스크립트를 작성합니다.

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

위와같은 스크립트를 아무곳에 넣어줍니다.

이후 yarn build를 하여 프로젝트를 빌드해보고 yarn eject 명령어를 실행합니다. git에 연결되어 있다면 커밋을 해야 정상적으로 명령어가 실행됩니다. 이후 생성된 config 폴더에서 paths.js 를 수정합니다. appBuild 부분에 static을 추가합니다.

4. 스프링 부트 gradle 수정

여기까지 했으면 거의 끝입니다. 아래의 스크립트를 아래와 같이 붙혀넣기 합니다.

def webappDir = "$projectDir/src/main/frontend"

sourceSets {
    main {
        resources {
            srcDirs = ["$webappDir/build", "$projectDir/src/main/resources"]
        }
    }
}

processResources {
    dependsOn "buildReact"
}

task buildReact(type: Exec) {
    dependsOn "installReact"
    workingDir "$webappDir"
    inputs.dir "$webappDir"
    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 installReact(type: Exec) {
    workingDir "$webappDir"
    inputs.dir "$webappDir"
    group = BasePlugin.BUILD_GROUP
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "yarn.cmd", "audit", "fix"
        commandLine 'yarn.cmd', 'install'
    } else {
        commandLine "npm", "audit", "fix"
        commandLine 'npm', 'install'
    }
}

task installReact 에서 윈도우일 경우 yarn 이 없을경우 npm 으로 수정하시면 됩니다.

이후 스프링부트에서 gradle 빌드하시면 끝입니다.