TIL - 20251111

juni·2025년 11월 11일

목록 보기

175/316

1111 Full-Stack 배포 아키텍처 종합 복습

오늘의 복습은 백엔드(Spring API)와 프론트엔드(React App)를 AWS 클라우드 환경에 배포하고, 이를 도메인과 HTTPS로 안정적으로 서비스하며, 배포 과정을 자동화하는 전체 흐름을 종합적으로 이해하는 것입니다.
핵심 원칙:
- 분리 (Decoupling): 백엔드와 프론트엔드를 독립적으로 배포하고 관리합니다.
- 확장성 (Scalability): 트래픽 변화에 유연하게 대응할 수 있도록 설계합니다.
- 자동화 (Automation): CI/CD 파이프라인을 통해 배포 과정을 자동화하여 실수를 줄이고 속도를 높입니다.

아키텍처 흐름: 사용자 → Route 53 (api.mydomain.com) → ALB (HTTPS 처리) → EC2 Auto Scaling Group → EC2 인스턴스 (Docker 컨테이너) ↔ RDS

데이터 계층 (RDS):
- RDS (Relational Database Service)를 사용하여 프라이빗 서브넷에 데이터베이스를 배치합니다. AWS가 관리해주므로 운영 부담이 적고, Multi-AZ 기능으로 고가용성을 확보할 수 있습니다.
애플리케이션 계층 (EC2 & Docker):
- Spring Boot 애플리케이션은 Docker 컨테이너로 패키징됩니다.
- 이 컨테이너는 EC2 인스턴스 위에서 실행되며, EC2는 프라이빗 서브넷에 배치하여 외부로부터의 직접적인 접근을 차단합니다.
- Auto Scaling Group이 EC2 인스턴스 그룹을 관리하며, 트래픽에 따라 인스턴스 수를 자동으로 조절(수평 확장)합니다.
네트워크 및 보안 계층 (VPC, ALB, Route 53):
- ALB (Application Load Balancer)는 퍼블릭 서브넷에 배치되어 외부 인터넷 요청의 단일 진입점 역할을 합니다.
- HTTPS 처리 (SSL Offloading): ALB는 ACM에서 발급받은 SSL 인증서를 통해 HTTPS 요청을 받아 복호화한 후, 내부적으로는 HTTP를 사용하여 EC2와 통신합니다.
- Route 53은 api.mydomain.com과 같은 API 도메인 요청을 ALB의 DNS 주소로 연결해주는 역할을 합니다.

아키텍처 흐름: 사용자 → Route 53 (mydomain.com) → CloudFront (CDN 캐시 & HTTPS) → S3 버킷

스토리지 계층 (S3):
- npm run build로 생성된 React의 정적 파일(HTML, CSS, JS)을 S3 (Simple Storage Service) 버킷에 저장합니다.
- S3 버킷은 정적 웹사이트 호스팅의 원본(Origin) 역할을 하며, 보안을 위해 CloudFront를 통해서만 접근하도록 제한하는 것이 좋습니다.
콘텐츠 전송 및 네트워크 계층 (CloudFront, Route 53):
- CloudFront (CDN)는 전 세계에 분산된 캐시 서버(Edge Location)에 S3의 콘텐츠를 미리 복사해두고, 사용자에게 가장 가까운 위치에서 콘텐츠를 전달하여 전송 속도를 획기적으로 개선합니다.
- HTTPS 처리: CloudFront는 ACM에서 발급받은 SSL 인증서를 통해 HTTPS 통신을 지원합니다.
- SPA 라우팅 처리: React Router를 사용하는 SPA에서 발생하는 404 에러를 방지하기 위해, 모든 에러 요청을 index.html로 리다이렉트하는 설정이 필수적입니다.
- Route 53은 mydomain.com과 같은 메인 도메인 요청을 CloudFront 배포의 도메인 주소로 연결해줍니다.

CI/CD는 위에서 설명한 복잡한 배포 과정을 자동화하여, 개발자가 코드 작성에만 집중할 수 있도록 돕습니다.
백엔드 자동 배포 파이프라인 흐름:
1. [Trigger] 개발자가 main 브랜치에 코드를 푸시(Push)합니다.
2. [CI] GitHub Actions가 코드를 빌드하고, Docker 이미지를 생성합니다.
3. [CI] 생성된 이미지를 Docker Hub나 AWS ECR과 같은 이미지 레지스트리에 푸시합니다.
4. [CD] GitHub Actions가 SSH를 통해 AWS EC2 서버에 원격 접속합니다.
5. [CD] EC2 서버에서 최신 이미지를 풀(Pull)받고, 기존 컨테이너를 내린 후 새 컨테이너를 실행하여 배포를 완료합니다.
프론트엔드 자동 배포 파이프라인 흐름:
1. [Trigger] 개발자가 main 브랜치에 코드를 푸시(Push)합니다.
2. [CI] GitHub Actions가 npm run build를 실행하여 정적 파일을 빌드합니다.
3. [CD] AWS CLI를 사용하여 빌드된 파일들을 S3 버킷에 동기화(sync)합니다.
4. [CD] (선택 사항) CloudFront 캐시를 무효화(invalidate)하여, 사용자들이 즉시 최신 버전을 볼 수 있도록 합니다.

현대적인 Full-Stack 배포는 백엔드(EC2/ALB/RDS)와 프론트엔드(S3/CloudFront)를 물리적으로 분리하여, 각자의 역할에 맞게 독립적으로 확장하고 관리하는 것을 목표로 합니다.
ALB와 CloudFront는 각각 백엔드와 프론트엔드의 관문 역할을 하며, HTTPS 처리와 트래픽 분산/캐싱을 담당합니다.
Route 53은 사용자가 사용하는 도메인을 이러한 AWS 서비스들과 연결해주는 최종적인 접점입니다.
CI/CD 파이프라인(GitHub Actions)은 이 모든 배포 과정을 자동화하여, 개발자가 코드 변경 사항을 빠르고 안정적으로 사용자에게 전달할 수 있도록 돕는 핵심적인 도구입니다.