1002 AWS 실전 배포: 도메인, HTTPS 적용 및 Full-Stack 배포
✅ 1. DNS와 도메인 설정: Route 53
- DNS (Domain Name System)는
google.com과 같이 사람이 읽기 쉬운 도메인 이름을, 컴퓨터가 이해하는 IP 주소(172.217.175.110)로 변환해주는 시스템입니다. AWS에서는 Route 53이라는 관리형 DNS 서비스를 통해 이 작업을 수행합니다.
- 도메인 구매: 가비아와 같은 도메인 등록업체에서 원하는 도메인(e.g.,
mydomain.com)을 구매합니다. - Route 53 호스팅 영역(Hosted Zone) 생성: AWS에서 구매한 도메인을 관리하기 위한 컨테이너를 생성합니다.
- 네임서버(Name Server) 변경: 호스팅 영역이 생성되면 AWS는 4개의 네임서버 주소를 제공합니다. 이 주소들을 복사하여, 도메인을 구매한 가비아의 도메인 설정에 네임서버 정보로 등록합니다.
- 핵심: 이 작업을 통해, 전 세계의 DNS 시스템에 "
mydomain.com에 대한 모든 질문은 이제 AWS Route 53에게 물어보세요"라고 알려주는 효과가 발생합니다.
- 핵심: 이 작업을 통해, 전 세계의 DNS 시스템에 "
✅ 2. 백엔드 배포 (Spring Boot API on EC2 with HTTPS)
- Spring Boot 애플리케이션을 EC2에 배포하고, 로드 밸런서를 통해 안정적으로 서비스하며, HTTPS를 적용하여 통신을 암호화하는 과정입니다.
➕ 배포 흐름
-
SSL/TLS 인증서 발급 (ACM - AWS Certificate Manager):
- HTTPS 통신을 위해 무료 SSL/TLS 인증서를 ACM을 통해 발급받습니다.
- 주의: 로드 밸런서(ALB)에 적용할 인증서는 반드시 버지니아 북부(
us-east-1) 리전에서 발급받아야 합니다.
-
EC2에 애플리케이션 배포:
- EC2 인스턴스에 접속하여 Git으로 프로젝트를 클론하고, 빌드한 후 JAR 파일을 실행합니다.
- 이때, 데이터베이스 연결 정보 등은 환경 변수를 통해 주입하여 보안을 유지합니다.
-
로드 밸런서(ALB - Application Load Balancer) 생성:
- 역할: 들어오는 트래픽을 여러 EC2 인스턴스에 분산하고, HTTPS 통신을 처리하는 관문 역할을 합니다.
- 리스너(Listener) 설정:
- HTTP (포트 80) 리스너: 들어오는 모든 HTTP 요청을 HTTPS로 리다이렉트하도록 설정합니다.
- HTTPS (포트 443) 리스너: ACM에서 발급받은 SSL 인증서를 연결하고, 실제 트래픽을 EC2 인스턴스가 있는 대상 그룹(Target Group)으로 전달합니다.
- 장점: SSL 암호화/복호화의 부담을 EC2 인스턴스가 아닌 로드 밸런서가 대신 처리(SSL Offloading)하므로, EC2는 비즈니스 로직에만 집중할 수 있습니다.
-
Route 53에서 도메인과 ALB 연결:
- Route 53에서
api.mydomain.com과 같은 서브도메인에 대한 A 레코드를 생성합니다. - 이 레코드의 값으로 EC2의 IP 주소가 아닌, 생성된 ALB의 DNS 이름을 별칭(Alias)으로 지정합니다.
- 핵심: 이를 통해 사용자가
api.mydomain.com으로 접속하면, Route 53은 요청을 ALB로 보내고, ALB는 다시 EC2로 트래픽을 전달하는 흐름이 완성됩니다.
- Route 53에서
-
OAuth 리다이렉트 URI 수정: 카카오, 구글 등 소셜 로그인 설정에서, 개발 중에 사용했던
localhost주소를 실제 배포된 백엔드 API 도메인(https://api.mydomain.com/login/oauth2/code/kakao)으로 반드시 변경해야 정상적으로 동작합니다.
✅ 3. 프론트엔드 배포 (React App on S3/CloudFront with HTTPS)
- React와 같은 정적 파일 기반의 SPA를 배포하는 가장 효율적이고 확장성 높은 방법은 S3와 CloudFront를 조합하는 것입니다.
➕ 배포 흐름
-
React 앱 빌드: 로컬 PC에서
npm run build명령어를 실행하여, 배포용 정적 파일(HTML, CSS, JS)들을build폴더에 생성합니다. -
S3 버킷 생성 및 파일 업로드:
- 웹사이트 호스팅용 S3 버킷을 생성합니다.
build폴더 안의 모든 파일과 폴더를 S3 버킷에 업로드합니다.- 주의: 기본적으로 버킷은 비공개이므로, CloudFront가 접근할 수 있도록 버킷 정책을 설정해야 합니다. (OAI/OAC 설정)
-
CloudFront 배포 생성:
- CloudFront: 전 세계에 분산된 캐시 서버(Edge Location)를 통해 사용자에게 콘텐츠를 더 빠르게 전달하는 CDN(Content Delivery Network) 서비스입니다.
- 원본(Origin)으로 위에서 생성한 S3 버킷을 지정합니다.
- SSL 인증서: 백엔드와 마찬가지로, ACM(버지니아 북부 리전)에서 발급받은 SSL 인증서를 CloudFront 배포에 연결합니다.
- SPA 설정: React Router를 사용하는 SPA는
index.html외의 경로로 직접 접근 시 404 에러가 발생할 수 있습니다. 이를 해결하기 위해, 에러 발생 시 모든 요청을index.html로 돌려주는 커스텀 에러 응답 설정을 추가해야 합니다.
-
Route 53에서 도메인과 CloudFront 연결:
mydomain.com또는www.mydomain.com에 대한 A 레코드를 생성합니다.- 이 레코드의 값으로 S3 버킷 주소가 아닌, 생성된 CloudFront 배포의 도메인 이름을 별칭(Alias)으로 지정합니다.
📌 요약
- Route 53은 구매한 도메인의 네임서버를 AWS로 지정하여 DNS를 관리하는 서비스입니다.
- 백엔드(API 서버)는 EC2에 배포하고, ALB(Application Load Balancer)를 앞에 두어 HTTPS(SSL Offloading) 처리와 부하 분산을 담당하게 합니다. 최종적으로 Route 53에서
api.mydomain.com을 ALB에 연결합니다. - 프론트엔드(React 앱)는 빌드된 정적 파일을 S3에 저장하고, 전 세계 사용자에게 빠른 속도로 콘텐츠를 제공하기 위해 CloudFront(CDN)를 통해 배포합니다. 최종적으로 Route 53에서
mydomain.com을 CloudFront에 연결합니다. - 이러한 구조를 통해, 백엔드와 프론트엔드가 독립적으로 배포되고 확장될 수 있는 현대적인 웹 애플리케이션 아키텍처를 완성할 수 있습니다.
