Spring Boot - React 협업

아키텍처

전체적인 구조

1. 사용자가 url로 접속

2. 이 때, 클라이언트 -> 서버에 파일들을 요청

3. NginX는 https hosting을 통해 리액트에서 빌드된 html, css, js파일을 클라이언트에게 전송

4. 받은 파일들 -> static UI

5. 다시 클라이언트가 JS 실행 -> 서버에 API 통해 데이터 요청

6. NginX는 Reverse proxy를 통해 8080 포트에서 실행 중인 Spring JAR application으로 통신 후 클라이언트에 전송

7. 웹 사이트 = static UI + API로 받은 데이터

8. 이 웹 사이트를 사용자가 보게 됨

프론트엔드에서 해야 할 것

첫 번째 방법

1. 백엔드 쪽에서 주는 스웨거 문서를 받음
2. 스웨거를 보면서 목업 데이터, 인터페이스를 만들면서 프론트 개발
3. 통합 테스트를 할때는 api 통신을 위해 인텔리제이에서 스프링 부트를 켜서 확인
4. 실제 프로덕션 단계에선 로컬 주소로 http 요청 보내는 것 -> 실제 url 주소로 요청으로 변경
5. 빌드된 리액트 파일을 클라우드에 올림

두 번째 방법

1. 백엔드 측에서 클라우드에 스프링 부트를 켜놓은 상태로 둠
2. 프론트 엔드에서는 클라우드에 켜진 스프링 부트를 통해 스프링 로컬주소로 http 요청을 하게 됨
3. 프로덕션 단계에선 변경된 url로 http 요청 보내는 것으로 변경
4. 빌드 된 리액트 파일을 클라우드에 올림

깃허브 구조

1) Upstream Repo

• main, front-end, back-end 3개의 브런치를 생성

1. main

• 최종 빌드되는 브런치
• front-end, back-end의 있는 커밋들을 모두 합치게 됨

2. front-end

• 프론트엔드에서 올린 커밋들을 관리

3. front-end

• 백엔드에서 올린 커밋들을 관리

2) Remote Repo

1. front-end

• 프론트엔드에서 올린 커밋들을 관리

2. front-end

• 백엔드에서 올린 커밋들을 관리

3) local

1. feature

• 각자 개발하는 것들을 커밋, 푸쉬