협업 프로젝트를 하며 프론트와 협업하며 경험한 HTTPS하는법 정리본!
딱 한번 해보면 어렵지 않음.
Full-Stack HTTPS 인프라 구축 완벽 정리
1. 인프라 구조 설계
- Front-end: Vercel (자동 HTTPS 적용됨) →
www.example.com - Back-end: AWS EC2 + ALB (수동 설정 필요) →
api.example.com - 핵심: 하나의 도메인을 사서 서브도메인으로 앞뒤를 나눠서 관리함.
2. 도메인 구매 및 Route 53 연결
- 도메인 구매: 가비아 등에서 맘에 드는 거 삼.
- 호스팅 영역 생성: AWS Route 53 가서 구매한 도메인으로 '퍼블릭 호스팅 영역' 만듦.
- 네임서버(NS) 교체:
- Route 53에서 생성된 NS 레코드 값 4개 복사함.
- 가비아 관리 페이지 가서 기존 네임서버 지우고 복사한 값 넣음. (맨 끝 마침표
.빼고)
전파되는데 시간 좀 걸림
3. SSL 인증서 발급 (ACM)
- 인증서 요청: AWS ACM 가서
*.example.com,example.com형태로 2개 포함해 신청 - DNS 검증: 검증 방식은 'DNS 검증' 선택
- 레코드 생성: "Route 53에서 레코드 생성" 버튼 누르면 알아서 CNAME 생성
- 상태 확인: '발급됨' 뜰 때까지 대기 ( 시간소요)
4. 로드밸런서(ALB) 및 타겟 그룹 세팅
- 대상 그룹(Target Group) 생성:
- 유형은 '인스턴스', 포트는 스프링 부트 포트(8080)로 설정
- 내 EC2 인스턴스 체크해서 타겟에 포함시키기
- ALB 생성:
- Application Load Balancer 선택
- 가용 영역(AZ)은 최소 2개 이상의 퍼블릭 서브넷 선택해야함 (나는 a,c선택함)
- 보안 그룹: 80(HTTP), 443(HTTPS) 둘 다 열려 있어야 함.
- 리스너 설정:
- HTTPS:443: 아까 ACM에서 만든 인증서 걸어주고, 대상 그룹으로 넘기기
- HTTP:80: 호스트 헤드 = 도메인 , URL로 리디랙션
-> 모든 요청을 HTTPS로 리디렉션 (상태 코드 301) -> 1순위
5. Route 53 - A 레코드 연결
- Route 53 호스팅 영역 다시 들어감.
1-1. 서브도메인(백엔드용)
1-2. 레코드 생성:www혹은api등 서브도메인 입력
1-3. 별칭(Alias): 스위치 켜고, 'ALB에 대한 별칭' 선택해서 만든 로드밸런서 주소랑 연결
1-1. 도메인(프론트용)
1-2. 레코드 생성: 아무런 이름 입력 X
1-3. 별칭(Alias) 끄기: ALB에 대한 별칭 해제하고 프론트의 vercel 배포 주소를 넣기
6. CORS 및 헬스 체크 이슈 해결 (중요함!)
- CORS 에러: 프론트(
www)랑 백(api) 도메인이 다르기 때문에 스프링 부트에서 허용해줘야 함.allowedOrigins에 프론트 주소 정확히 작성하기 - Health Check: ALB는 주기적으로 서버가 살아있는지 체크해줌 (
/경로가 404 뜨면 서버 죽은 줄 알고 트래픽 끊음)
* 스프링 부트에 간단하게200 OK뱉는/health컨트롤러 만들고, 대상 그룹 설정에서 헬스 체크 경로를/health로 바꿔서 테스트하기
