[AWS EC2] CloudFront로 서비스하던 React App을 EC2로 옮기기(2)

이제 새로 Private Subnet에 생성된 EC2(Nginx)와 기존 Private Subnet에 존재하던 EX2(Node)를 연결하는 작업을 시작하겠습니다.

 

1. ALB 생성

Node EC2로 트래픽을 전달할 새로운 ALB를 생성합니다. 이 ALB의 경우 인터넷 통신을 하지 않고 VPC 내에서 통신할 것이기 때문에 기본 구성 > 체계 부분을 '내부'로 설정합니다.

 

 

네트워크 매핑은 ALB를 생성할 VPC와 서브넷을 선택하는데 이때 EC2 서버들이 있는 Private Subnet을 선택합니다.

 

보안 그룹은 Nginx EC2의 보안 그룹과 동일하게 설정합니다. (HTTP 80, HTTPS 443 허용)

 

마지막으로 리스너는 HTTP 80으로 설정하고 대상 그룹은 기존 Node를 실행하는 EC2를 포함한 대상 그룹으로 선택합니다.

 

2. Nginx Proxy 설정 수정

bastion host로 ssh 접속 후 다시 Nginx가 실행되고 있는 EC2 host로 ssh 접속하여 Nginx 설정 파일을 오픈합니다.

ssh 접속 참고:  https://hanbee1005.github.io/aws/ec2/ssh/mac/2021/10/08/aws-ec2-ssh.html

 

$ ssh BASTION_EC2_HOST

$ ssh NGINX_EC2_HOST
$ sudo vi /etc/nginx/sites-available/XXXXX.conf

 

그리고 Nginx의 Proxy 설정을 아래와 같이 변경합니다.

 

server {
	listen 80;

	location / {
		root /home/ec2-user/build;
		index index.html index.htm;
		try_files $uri $uri/ /index.html;
	}

	# node api reverse proxy
	location /api/ {
		proxy_pass http://Node_EC2와_연결된_ALB_DNS_이름/api/;
	}
}

 

이후 /etc/nginx/sites-enabled/XXXXX.conf 파일을 제거하고 아래 명령어로 동기화를 진행합니다.

 

$ sudo ln -s /etc/nginx/sites-available/XXXXX.conf /etc/nginx/sites-enabled/XXXXX.conf

 

이제 브라우저에서 http://Nginx_EC2에_연결된_ALB_DNS_이름으로 접속하면 정상적인 서비스가 되는 것을 확인할 수 있습니다. 데이터를 조회, 저장, 수정, 삭제하는 것도 가능합니다.

 

이후 HTTPS가 가능하도록 추가 설정을 하겠습니다.

 

3. Nginx EC2와 연결된 ALB에 리스너 추가

ALB로 이동하여 리스너 > 리스너 추가를 합니다.

SSL 인증서 생성 참고: https://developerbee.tistory.com/220

 

 

4. Route53 레코드 수정

HTTPS 접속을 위해 인증서를 생성한 도메인으로 이동하여 레코드를 수정해야 합니다. 기존 CloudFront로 이동하던 레코드를 찾아 레코드 편집을 진행합니다. 만약 레코드가 없었다면 새로 생성하면 됩니다. 중요한 것은 값을 Nginx EC2가 연결된 ALB의 DNS 이름으로 설정해야 한다는 것입니다.

 

 

이제 브라우저에서 https://도메인명(레코드 이름)으로 접속하면 위와 같은 정상적인 서비스를 확인할 수 있습니다.

 

마지막으로 HTTP로 들어오는 요청을 자동으로 HTTPS로 리다이렉트하는 방법을 살펴보겠습니다.

 

5. Nginx EC2와 연결된 ALB에 리스너 수정

ALB의 리스너 중 HTTP 80 리스너를 선택하고 편집을 누릅니다. 기존 작업을 제거하고 아래와 같은 내용을 추가합니다.

 

 

이제 http://도메인명으로 접속하여도 자동으로 https://도메인명으로 변경되는 것을 확인할 수 있습니다.

---

최종적으로 변경된 구조는 다음과 같습니다.