[Spring] 하나의 Repo에 Spring Boot + React 프로젝트 같이 올리기

참고: https://lemontia.tistory.com/912

[react, springboot] react 와 spring boot 로 구성하기, 묶어 build 하기

현재 개발 중인 프로젝트가 있는데 웹 프로젝트입니다. 그리고 웹 프로젝트를 React.js 를 사용하여 개발하려고 하다보니 궁금해진 것이 Spring Boot에서 같이 올릴 수는 없을까? 생각을 하다가 찾아보게 되었습니다.

사실 이 글을 작성하는 카테고리가 Spring 이 될 지 React 가 될 지 고민하다가 올리는 베이스는 Spring Boot가 되지 않을까 싶어 Spring 카테고리에 적었습니다. 

저도 위에 개발자님이 작성해주신 설정과 같이 Java 11, Spring Boot 2 를 사용하였습니다. Node.js 는 현재 로컬에 8버전이 설치되어 있습니다. 가장 먼저 create-react-app 을 수행할 디렉토리를 찾아줍니다. 저같은 경우 Spring 프로젝트를 만든 후 루트 디렉토리에 만들지 않고 아래의 경로에 만들었습니다.

${root}/src/main/webapp

$ cd src/main
$ npx create-react-app webapp

이렇게 프로젝트를 생성하게 되면 기존에 형상관리를 하는 리포지토리가 연결이 되어 있다면 리액트 프로젝트 내의 소스들이 add 되어 있지 않습니다. 그래서 커밋을 할 때 webapp 내의 파일들도 add 시켜주어야 하는 주의가 필요합니다. (단 .gitignore 파일 내의 모듈들, 대표적으로 node_modules 디렉터리는 빼야합니다!)

리액트 프로젝트 생성이 되었다면 npm start 명령어로 제대로 설치되었는지 확인합니다. 추가적으로 설치할 모듈들이 있다면 더 설치합니다. 저같은 경우 router-dom, axios, moment 등등을 더 설치했습니다. 

$ npm install react-router-dom --save
$ npm install axios --save
$ npm install moment --save
$ npm install moment-timezone --save 

그 다음 리액트 프로젝트가 어느 정도 작성이 되었다면 빌드를 진행하려고 합니다. webapp 패키지로 들어간 후 build를 진행합니다. build의 산출물들은 해당 경로의 build 디렉토리 내에 생성됩니다. 빌드를 진행하기 위해 gradle 설정을 추가적으로 해줍니다.

build.gradle

plugins {
   id "com.moowork.node" version "1.3.1"
}

apply plugin: "com.moowork.node"


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

task appNpmInstall(type: NpmTask) {
   workingDir = file("${webappDir}")
   args = ["run", "build"]
}

task copyWebApp(type: Copy) {
   from 'src/main/webapp/build'
   into "build/resources/main/static"
}

copyWebApp.dependsOn(appNpmInstall)
compileJava.dependsOn(copyWebApp)

Command Line

$ pwd 
project/src/main/webapp

$ npm run build