프로젝트 아키텍처에 대한 자세한 설명
이 아키텍처는 사용자 요청이 백엔드와 프론트엔드 시스템을 거쳐 응답을 제공하는 흐름을 나타내고, 전체적인 프로우는 다음과 같이 설명할 수 있다.
- 사용자는 브라우저나 클라이언트를 통해 HTTPS로 특정 기능(예: 로그인, 데이터 조회, 페이지 로드 등)을 요청한다. 사용자 요청은 IP 주소를 기반으로 Nginx로 전달된다.
- Nginx는 리버스 프록시로 동작하며, 사용자 요청을 적절한 서버로 라우팅한다. 예를들면 다음과 같다.
- JSON 데이터 요청 (API 호출)
- API 요청(예: 로그인, 데이터 CRUD 등)은 포트 8080의 백엔드 서버로 전달
- 정적 자원 요청 (페이지 로드)
- 페이지 요청은 포트 3000의 프론트엔드 서버로 전달
- 사용자 페이지 로드는 React 기반의 프론트엔드가 담당한다. 이 프론트엔드는 다음과 같은 도구와 작업을 통해 사용자에게 결과를 제공한다.
- TypeScript: 안정적인 코드로 React 애플리케이션을 구현.
- Axios: API 요청을 통해 백엔드와 데이터를 주고받음.
- Webpack: 빌드와 번들링.
- Cloudflare Pages: 정적 파일(HTML, CSS, JS)을 배포하여 빠르게 사용자에게 제공.
- 사용자 관점
- 페이지 로드 시 필요한 데이터(예: 사용자 정보, 프로젝트 목록)는 백엔드에서 가져온다.
- API 응답 데이터를 바탕으로 화면을 구성하여 사용자와 상호작용할 수 있는 UI를 제공한다.
- API 요청은 Spring Boot 기반의 백엔드 서버에서 처리된다. 백엔드는 다음과 같은 작업을 수행한다.
- OAuth2 인증: 사용자 로그인/인증 요청을 Google OAuth2로 처리.
- 데이터베이스 상호작용:
- H2(로컬 데이터베이스) 또는 MySQL(실제 운영 환경)과 연동하여 데이터 CRUD 수행.
- 비즈니스 로직: 요청에 따른 데이터 검증, 처리, 로직 수행.
- 사용자 관점:
- 로그인, 데이터 저장/조회 요청 시, 사용자에게 적절한 응답(JSON 형식)을 반환한다.
- 예를 들어, 로그인 성공 시 사용자 세션 정보와 토큰을 반환하거나 프로젝트 데이터를 제공한다.
- 백엔드와 프론트엔드는 각각 독립적으로 GitHub Actions를 통해 빌드 및 배포된다:
- 백엔드: develop브랜치의 코드 변경 시 자동 배포.
- 프론트엔드: React 앱의 빌드 후 정적 파일을 Cloudflare Pages에 배포.
- 사용자 관점:
- 최신 기능이 배포될 때, 사용자는 자동으로 업데이트된 시스템을 경험할 수 있음.