[React & Spring Boot] 클라이언트 배포(1) : Route 53, EC2

프론트엔드, 백엔드 각 팀의 개발이 마무리 되어가서 최종 도메인 배포를 진행했다.

최종 목표는 (EC2 인스턴스 1개) + (도메인 1개) 에 프론트, 백 프로젝트를 모두 배포하는것이다.

백엔드는 이미 Github Actions로 배포되어 있는 상태여서, 프론트 배포에 초점을 맞춰서 진행할 예정이다.

 

최종적으로는 EC2 인스턴스와 연결된 hello.com 도메인 하나를 사용하면서

www.hello.com은 리액트 프로젝트용 3000 포트를,

api.hello.com은 스프링 프로젝트용 8080 포트를 포워딩하도록 구현할 것이다.  

(여기서 hello.com은 임의의 예시 도메인이다. 본인은 babyakmate.com이라는 도메인을 사용했다.)

이번 글에서는 Route 53, EC2 관련 설정을 한다.

 

▷ 전체 Flow

 

▷ 현재 상황

도메인	구매한 후, AWS에 등록해둔 상태     [참고 1]  https://woojin.tistory.com/93         [참고 2]  https://woojin.tistory.com/94
백엔드 Spring Boot	Github Actions & Docker로 EC2에 배포해둔 상태
프론트엔드 React	이제 배포해야 됨

 

목차
1. EC2 Target groups 생성
2. Route 53 서브 도메인 레코드 생성
3. EC2 Load balancers 설정

 

---

 

1. EC2 Target groups 생성

EC2 > Target groups 에서 EC2 접근 시 포워딩될 타겟 그룹을 생성해준다. 

 

EC2 인스턴스에 연결할 타겟 그룹이므로 ' Instance ' 선택

 

이름, 프로토콜, 포트, VPC 설정 후 나머지는 그대로 두고 [ Next ]

(VPC는 default vpc 사용함)

 

인스턴스를 선택하고 [Include as pending below] 클릭하면 아래에 pending 상태로 타겟 인스턴스가 추가된다.

확인한 후 [Create target group] 클릭

 

백엔드 스프링 부트용 타겟 그룹은 사전에 동일한 과정으로 8080 port로 만들어두었다. 

내가 만든 전체 타겟 그룹은 아래 표와 같다.

	Target Group Name	Target Group Port
프론트엔드 프로젝트용 | React	domain-tg-www	3000
백엔드 프로젝트용 | Spring Boot	domain-tg	8080

 

 

2. Route 53 서브 도메인 레코드 생성

Route 53 > 호스팅 영역 에서 서브 도메인을 생성한다.

[레코드 생성] 클릭

 

subdomain 자리에 원하는 이름을 넣어준다. 

나는 프론트용 서브 도메인은 www을, API 서버용 서브 도메인은 api를 넣어줬다.

레코드 유형은 A, 별칭을 선택한 후 트래픽 라우팅 대상을 아래와 같이 선택한다.

[레코드 생성]을 클릭하면 완료!

 

레코드가 잘 생성되었다.

 

3. EC2 Load balancers 설정

3-1. ELB 생성

EC2 >  Load Balancers 에서 Load balancer를 생성한다.

(한번 도메인을 AWS에 등록하였다면, 그 과정에서 이미 생성한 load balancer가 있을 것이지만 혹시 없는 경우를 위해 한번 더 생성 방법을 짚어보고 가자. 이미 있다면 추가로 생성할 필요 없이 그 load balancer 그대로 사용하면 된다.)

 

Application Load Balancer 타입으로 생성

 

Load Balancer 이름 설정, 나머지는 default값 그대로

 

VPC는 default vpc를 이용하고, Mapping은 모든 subnet을 선택해줬다.

 

Security Group은 EC2 인스턴스와 동일한 것을 선택했다.

Listener 설정에는 HTTPS를 선택하고, Forward to에서는 1에서 만들었던 포트 3000 타겟 그룹을 선택한다.

 

Security Policy는 default값 그대로 두고, SSL 인증서는 도메인을 AWS에 등록하며 받은 ACM 인증서로 선택한다.

 

 

3-2. ELB Listener Rules 설정 (가장 핵심인 부분 ★★★★★)

이제 생성된 ELB에 Listener를 설정해줄 것이다. 만들어진 ELB를 클릭해서 들어간다.

 

하단으로 내려가보면 Listeners 목록이 나온다.

 

HTTPS : 443 Listener를 선택하고 [Manage rules]를 클릭한다.

 

이제 규칙을 추가해줄 것이다. 우리가 추가할 규칙은 크게 2가지이다.

1.  www.hello.com  으로 들어오는 요청은 3000 포트 타겟 그룹으로 포워딩 (리액트 페이지 띄우기)
2.  api.hello.com 으로 들어오는 요청은 8080 포트 타겟 그룹으로 포워딩 (API 요청 주소로 기능)

 

[+]를 누른 후, [규칙 삽입]을 눌러서 규칙을 추가한다.

IF에서 [조건 추가] 클릭 후, [호스트 헤더] 선택

프론트엔드용 도메인을 입력

 

 

THEN에서 [작업 추가] 클릭 후, [전달 대상] 선택

 

프론트엔드용 타겟 그룹 선택하기

 

저장하기

 

 

백엔드용 규칙도 마찬가지 방법으로 추가해준다. (호스트 헤더 : api.hello.com, 전달 대상 : domain-tg)

 

 

최종 Rule은 다음과 같다.

 

 

이제 AWS Route 53과 EC2 Load Balancer 관련 설정이 끝났다.

다음 글에서는 직접 EC2 인스턴스에 접속하여 리액트 프로젝트를 배포해볼 것이다.