팀프로젝트를 진행하면서 배포 전반을 맡게 되었고 2주 간의 삽질 끝에 원하던 개발/배포 환경을 구성하였습니다.
해당 스택으로 개발/배포 환경을 처음부터 끝까지 진행한 포스팅이 없더군요..
때문에 삽질을 많이했고 정보를 공유하고자 시리즈를 시작하게 되었습니다.
제가 생각하는 현실적인 개발 공부 방법은 동작하는 걸 일단 확인하고 소스나 원리에 대해 이해하는 것이라고 생각하는데요.
때문에 해당 시리즈에는 전반적으로 필요한 배경 지식이 많습니다만 따라만쳐도 동작하도록 구성하였습니다.
개념에 대한 부분은 이미 많은 포스팅이 있기 때문에 중간중간 검색하면서 따라오시길 바랍니다.
저와 같이 React + Springboot 기반으로 팀 프로젝트를 진행하고 배포까지 하시려는 분들에게 도움이 되시길 바랍니다.
아래의 스택과 동작 방식을 확인해 보시고 시리즈 정주행을 추천드립니다.
스택
-
nginx
-
React
-
SpringBoot(Java 17)
-
Docker / docker-compose
-
Github Action
-
AWS EC2(Ubuntu Linux) / AWS RDS(MySQL)
-
H2
-
Tools
- IntelliJ, Visual Studio Code
- PuTTY, FileZilla
- Docker Desktop
-
개발환경 분리 -> local / dev / prod
소스코드
전체 소스코드를 공유드립니다.
단계별로 커밋을 확인하실 수 있습니다.
https://github.com/g6y116/full-stack-fe
https://github.com/g6y116/full-stack-be
개발 및 배포 방식
Backend
로컬 환경에서의 개발
H2(데이터베이스)와 연동하여 API 개발
배포
레포지토리에 소스를 푸시하면 Github Action WorkFlow 동작
- develop branch push -> dev 서버에 WAS(Tomcat) 배포
- main branch push -> prod 서버에 WAS(Tomcat) 배포
Frontend 개발
로컬 환경에서의 개발
개발서버 API를 이용해 UI와 뷰로직 개발
배포
레포지토리에 소스를 푸시하면 Github Action WorkFlow 동작
- develop branch push -> dev 서버에 WebServer(Nginx) 배포
- main branch push -> prod 서버에 WebServer(Nginx) 배포
배포된 WebServer(Nginx)는 브라우저의 요청에 따라 정적인 파일을 제공하거나 API 요청을 WAS(Tomcat)에 넘겨줍니다.
React App을 빌드하면 하나의 정적인 문서로 변환 됩니다.
이것을 Nginx의 index.html역활로 제공합니다.
따라서 브라우저는 해당 도메인에 접근하게 될때 리액트로 빌드된 문서를 가져오게 됩니다.
dev(개발)서버와 prod(운영)서버를 나누는 이유
현 시리즈는 개발 서버와 운영 서버를 나누는 방법도 포함합니다.
보통 실제 현업에서는 서비스되고 있는 운영 서버가 있고 FE/BE 개발자들끼리 다음 기능을 출시하기 위해 테스트용으로 사용하는 서버가 있습니다.
여기에 QA(제품을 테스트해주는 직군)용으로 스테이징 서버가 있습니다만 팀프로젝트에서는 과하다고 판단되어 개발서버와 운영서버로 한정하게 되었습니다.
요청 및 응답 방식
-
브라우저에서 도메인에 접근을 하면 WebServer(Nginx)가 하나의 파일로 빌드해놓은 React 문서를 되돌려줍니다.
-
브라우저에서 API 요청을 보내면 WebServer에서
/api로 시작하는 것을 캐치해 WAS로 요청을 넘깁니다.헷갈리시는 분들이 많습니다.
API 요청이 WebServer에서 출발하는 것이 아니라 이미 그 전에 브라우저가 문서를 받아서 가지고 있고 여기에서 부터 요청하기 때문에 Browser -> WebServer -> WAS 순으로 가게됩니다. -
WAS는 요청받은 API를 처리합니다. (비즈니스 로직을 처리합니다.)
필요하다면 DB에서 필요한 데이터를 가져와 처리합니다.
json 형식으로 데이터를 담아 응답해줍니다.
마무리
팀프로젝트를 진행하기 위해 삽질하며 짜 놓은 구성인지라 보안적인 부분을 실무 수준으로 신경쓰지는 못했습니다.
그래도 노출되면 안되는 정보는 깃허브 시크릿을 활용해 숨겨 주었습니다.
특히 RDS 접근 정보를 숨기겠다고 시간을 많이 잡아먹었죠..
따라서 실 서비스에 그대로 사용하기에는 문제가 생길 수 있다는 점을 미리 말씀드립니다.
이어서 리액트 앱과 스프링부트 앱을 생성하고 로컬 환경에서 API 통신하는 과정을 포스팅하도록 하겠습니다.
감사합니다.
