git submodule 이용해서 springboot + react 합치기

 

 

git submodule

저장소 안에 다른 저장소를 추가해서 사용하는 것이다.

다른 저장소를 받아와서 함께 사용하는 것.

 

 

준비단계1 : react 프로젝트 만들기

참고로 백엔드개발자라서는 핑계긴하지만 front 1도 모른다.

그래서 react는 아주아주 기본적인 걸로 다른 블로그보고 따라했음

 

node.js가 설치되어 있어야 한다.(설치과정은 생략)

$ npm install -g create-react-app
$ create-react-app my-app

cra를 설치한다.

그리고 my-app을 만든다. 

그냥 이렇게만 하고 

$npm install
$npm run build
$npm start

npm start를 하면 npm내장 서버가 뜬다.

이렇게 생겼다

안녕react야 

 

 

준비단계2 : backend SpringBoot서버를 만든다

얘는 그냥 Spring initializer로 만들어서 WEB만 추가해서 띄우면 된다.

별거없다.

그러면 이렇게 Error page를 볼 수 있다. 

 

 

git Submodule 사용

백엔드서버 폴더에 들어가서  submodule 추가한다. 

cd backend
git submodule add git@repository.com/frontend.git frontend
git commit -m "submodule front is added. "
git push

 

git submodule add 명령어를 이용하면 된다. 

push까지 해봤다. 

화면에 보이는 frontend폴더가 git submodule로 생긴 폴더다.

안에는 아무것도 없다. 

git submodule init
git submodule update

submodule을 추가하면 frontend 폴더가 만들어져 있지만 내부는 비어있다.

init와 update를 해주면 frontend 내용을 가져온다.

git submodule update 후에 frontend 폴더에 내용이 채워진다. 

submodule을 최신 버전으로 유지하고 싶을 경우 수동으로 update해줘야 한다.

 

근데 이렇게하고 끝하면 frontend와 backend가 함께 뜨지 않는다.

수동으로 작업해줘야할 것들이 있다.

 

npm install & build

 

 

해당 폴더로 들어가서 npm install과 build를 해준다. 

그러면 이렇게 build파일에 빌드된 파일들이 떨어진다.

그러면 얘들을 spring boot의 resources/static폴더 밑에 넣어주면된다. 

 

여기요

 

다시 SpringBootApplication을 실행시켜보자.

frontend와 함께 떴다. 굿굿

 

이상태에서 jar로 말아서 서비스를 올리면 된다.