1007 AWS 복습 : Full-Stack 배포 아키텍처
✅ 1. 전체 아키텍처 개요
-
오늘의 복습은 백엔드(Spring API)와 프론트엔드(React App)를 AWS에 배포하고, 구매한 도메인과 HTTPS를 적용하는 전체 흐름을 종합적으로 이해하는 것입니다.
-
핵심 원칙: 백엔드와 프론트엔드는 독립적으로 배포되고 확장될 수 있도록 아키텍처를 분리합니다.
✅ 2. DNS와 HTTPS: 서비스의 관문 설정
-
Route 53 (DNS 서비스):
- 가비아 등에서 구매한 도메인의 네임서버를 AWS Route 53의 네임서버로 변경하여 도메인 관리 권한을 위임합니다.
- Route 53은
mydomain.com이나api.mydomain.com과 같은 도메인 요청을 적절한 AWS 리소스(ALB, CloudFront)로 연결해주는 교통경찰 역할을 합니다.
-
ACM (AWS Certificate Manager):
- HTTPS 통신에 필수적인 무료 SSL/TLS 인증서를 발급받는 서비스입니다.
- 중요 규칙: ALB나 CloudFront에 적용할 인증서는 반드시 버지니아 북부(
us-east-1) 리전에서 발급받아야 합니다.
✅ 3. 백엔드 배포 아키텍처 (API 서버)
- 사용자 요청 → Route 53 → ALB → EC2
- EC2: Spring Boot 애플리케이션(JAR 파일)이 실행되는 가상 서버입니다. 프라이빗 서브넷에 배치하여 보안을 강화합니다.
- RDS: 애플리케이션의 데이터를 저장하는 관리형 데이터베이스입니다. EC2와 마찬가지로 프라이빗 서브넷에 배치됩니다.
- EC2와 RDS의 연결: RDS의 보안 그룹에서, EC2의 보안 그룹 ID를 소스로 지정하여 안전하게 통신을 허용합니다.
- ALB (Application Load Balancer):
- 퍼블릭 서브넷에 배치되어 외부 인터넷과 통신하는 관문 역할을 합니다.
- HTTPS 리스너(443): ACM에서 발급받은 SSL 인증서를 연결하여 SSL Offloading을 수행하고, 암호화된 트래픽을 EC2로 전달합니다.
- HTTP 리스너(80): 모든 HTTP 요청을 HTTPS로 자동 리다이렉트시켜 보안을 강화합니다.
- Route 53 설정:
api.mydomain.com과 같은 서브도메인에 대한 A 레코드를 생성하고, 대상을 ALB의 DNS 이름으로 지정합니다.
✅ 4. 프론트엔드 배포 아키텍처 (React 앱)
- 사용자 요청 → Route 53 → CloudFront → S3
-
S3 (Simple Storage Service):
npm run build로 생성된 React의 정적 파일(HTML, CSS, JS)을 저장하는 원본(Origin) 저장소 역할을 합니다.- 정적 웹사이트 호스팅 옵션을 활성화하고, 외부에서 직접 접근하지 못하도록 버킷 정책을 통해 CloudFront만 접근을 허용하는 것이 보안상 좋습니다.
-
CloudFront (CDN 서비스):
- 전 세계에 분산된 캐시 서버(Edge Location)를 통해 S3의 정적 파일을 사용자에게 더 빠르게 전달합니다.
- HTTPS: ACM에서 발급받은 SSL 인증서를 연결하여
https://mydomain.com접속을 지원합니다. - SPA 라우팅 처리: React Router를 사용하는 SPA에서
/about과 같은 경로로 직접 접근 시 발생하는 404 에러를 방지하기 위해, 모든 에러 요청을index.html로 리다이렉트하는 커스텀 에러 설정을 추가해야 합니다.
-
Route 53 설정:
mydomain.com과 같은 루트 도메인에 대한 A 레코드를 생성하고, 대상을 CloudFront 배포의 도메인 이름으로 지정합니다.
📌 요약
- Route 53은 도메인을 관리하는 시작점입니다.
- 백엔드(API)는 EC2에 배포하고 ALB를 통해 HTTPS와 부하 분산을 처리합니다.
- 프론트엔드(React)는 정적 파일을 S3에 저장하고 CloudFront를 통해 빠르고 안전하게 전 세계 사용자에게 전달합니다.
- 이러한 분리된 아키텍처는 각 계층이 독립적으로 확장되고 관리될 수 있도록 하여, 현대적인 웹 애플리케이션의 유연성과 안정성을 보장합니다.
