[2주차] GitHub Action 환경에서의 AWS ELB, EC2 배포 설정 및 배포 자동화 (Next SSR) - Console

[월간-CS][24년 4월] React, Next 배포와 배포 자동화 A부터 Z

Apr 18, 2024

[2주차] GitHub Action 환경에서의 AWS ELB, EC2 배포 설정 및 배포 자동화 (Next SSR) - Console

Contents

인프라 소개하기 실습 진행 네트워크 리소스 생성하기 컴퓨트 리소스 생성하기 컴퓨트 리소스 접속하기 프록시 컴퓨팅 리소스 생성하기 VSC SSH 설정하기 컴퓨팅 리소스에 서버 배포하기 (수동)현재 배포된 리소스의 문제점 진단하기 컴퓨팅 리소스 고도화하기 : HTTPS, 확장성, 가용성 컴퓨팅 리소스 고도화하기 : 배포 자동화 실습 정리 네트워크 리소스 삭제하기

이 문서는 [월간-CS][24년 4월] React, Next 배포와 배포 자동화 A부터 Z를 위해서 작성된 문서입니다. 이 문서에는 그 어떤 저작권이 없으며, 편하게 참고 및 사용하셔도 됩니다.

!주의! !주의! !주의!
이번 실습은 시간당 과금되는 비용이 존재합니다. 따라서 몇일에 걸쳐서 실습을 진행할 경우, 아래와 같은 이유로 많은 비용이 과금될 수 있습니다.
리소스를 생성하고 삭제를 까먹은 경우
리소스를 생성하고 너무 오랜 시간 동안 실습을 진행한 경우
리소스를 생성해놓고 다른 PC에서 이어서 실습을 진행하는 경우
따라서 실습을 중단할 것이라면, 반드시 이 문서의 마지막에 있는 리소스 제거하기 파트를 진행해주세요.

인프라 소개하기

2주차 실습에서 사용되는 인프라는 [2주차] AWS EC2, ELB, CodeDeploy에 대한 이해를 기반으로 구현되었습니다.

실습 진행

네트워크 리소스 생성하기

AWS Console에서 VPC 검색해서 클릭하기
주황색 [VPC 생성] 버튼 클릭하기
아래 이미지에 맞춰서 주요 설정값을 변경하고 미리보기를 통해 생성할 네트워크 리소스 확인하고 주황색 [VPC 생성] 버튼 클릭하기
1. 주요 설정값
2. 미리보기
VPC 생성이 완료되면, 주황색 [VPC 보기] 버튼 클릭하기

컴퓨트 리소스 생성하기

AWS Console에 EC2 검색해서 클릭하기
좌측 슬라이드에서 [네트워크 및 보안] - [키 페어] 클릭하기
키 페어의 용도
생성한 서버에 직접 접속해서 특정한 작업을 할 때, 암호키가 필요합니다.
일반적으로 비대칭 알고리즘으로 공개키/비밀키를 생성합니다.
1. 공개키 | 서버 접속을 검사하는 자물쇠
2. 비밀키 | 서버 접속을 허락받는 열쇠
각 키의 저장 장소는 다음과 같습니다.
- 공개키 | AWS Cloud안에 저장 (클라우드가 보관)
- 비밀키 | 키 페어 생성 시 파일의 형태로 자동 다운로드 (개발자가 보관)
우측에 있는 [키 페어 생성하기] 클릭하기
아래 이미지에 맞춰서 주요 설정값을 변경하고 [키 페어 생성] 클릭하고 키 페어 이름은 monthly-cs-ec2-keypair으로 지정하기
알고리즘은 RSA로 프라이빗 파일 형식은 .pem으로 사용합니다.
좌측 슬라이드에서 [네트워크 및 보안] - [보안 그룹] 클릭하기
보안 그룹 용도
AWS 컴퓨트 리소스로 들어가는 트래픽과 나오는 트래픽에 대한 허용 설정
설정되어 있지 않은 트래픽은 전부 거절(Deny)됩니다.
우상단 주황색의 [보안 그룹 생성] 클릭하기
[EC2] - [보안 그룹] - [보안 그룹 생성]에서 주요 입력값을 아래 이미지를 따라서 입력하고 우하단의 주황색 [보안 그룹 생성] 클릭하기
- 이름 : monthly-cs-sg-next-server
AWS Console에 IAM 검색해서 클릭하기
좌측 슬라이드에서 [엑세스 관리] - [역할] 클릭하기
우측에 있는 [역할 생성] 클릭하기
[IAM] - [역할] - [역할 생성] - [1단계 신뢰할 수 있는 엔티티 선택]에서 AWS 서비스 선택
[IAM] - [역할] - [역할 생성] - [2단계 권한 추가]에서 권한 추가 하지 않고 바로 다음 클릭하기
[IAM] - [역할] - [역할 생성] - [3단계 이름 지정, 검토 및 생성] 에서 주요 설정값을 아래와 같이 변경하고 우하단의 주황색 정책 생성 클릭하기
좌측 슬라이드에서 [엑세스 관리] - [역할] 클릭하기
역할 검색 창에 monthly-cs라고 검색하고 monthly-cs-iam-role-next-server 클릭하기
[IAM] - [역할] - [monthly-cs-iam-role-next-server] 우하단 주황색 [권한 추가] 버튼을 토글해서 [인라인 정책 선택] 클릭하기

[IAM] - [역할] - [monthly-cs-iam-role-next-server] - [정책 생성] - [1단계 권한 생성]에서 편집 모드는 JSON으로 변경한 후, 아래 권한 복사 붙여넣기 하기

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "Statement1",
			"Action": [
				"codedeploy:*",
				"s3:*",
				"ec2:*"
			],
			"Effect": "Allow",
			"Resource": "*"
		}
	]
}

[IAM] - [역할] - [monthly-cs-iam-role-next-server] - [정책 생성] - [2단계 검토 및 생성]에서 정책 이름을 monthly-cs-iam-policy-next-server으로 입력해주세요.
AWS Console에 EC2 검색해서 클릭하기
좌측 슬라이드에서 [인스턴스] - [인스턴스] 클릭하기
우측 상단의 [인스턴스 시작] 클릭하기
[EC2] - [인스턴스] -[Launch an instance]에서 주요 설정값을 아래에 맞춰서 꼼꼼히 선택하고 우측 주황색 인스턴스 시작 버튼 클릭하기

컴퓨트 리소스 접속하기

각 운영체제에 맞는 다운로드 폴더 확인하기
각 운영체제에 맞게 권한 설정하기
1. MacOS/Linux
```
chmod 400 monthly-cs-ec2-keypair.pem
```
2. Windows
  Antennagom (Blog) | 윈도우10 SSH 접속시 PEM 파일 퍼미션 에러 해결방법 참고하여 진행
SSH(Secure Shell) 프로토콜을 이용해서 monthly-cs-ec2-next-server에 접속하기
1. 실행 구문
```
ssh -i "<다운로드 폴더 경로>/monthly-cs-ec2-keypair.pem" ubuntu@<EC2 비공개(프라이빗) IPv4>
```
2. 왜 SSH 접속이 되지 않는 것일까? 🚩
  <다운로드 폴더 경로>와 <EC2 비공개(프라이빗) IPv4>을 제대로 입력하였다면, 실행구문에는 문제가 없습니다.
  그렇다면 왜 SSH 접속이 되지 않는 것일까요?
  정답은 이미 배운 내용 안에 있으니, 한번 생각해봅시다.

프록시 컴퓨팅 리소스 생성하기

컴퓨팅 리소스 생성하기에서 이미 많은 이미지를 포함하였으므로 간단한 작업은 이미지를 포함하지 않았습니다!

[컴퓨팅 리소스 생성하기] 챕터에서 생성한 EC2 인스턴스에 접근을 하기 위해서는 프록시 역할을 할 EC2 인스턴스가 필요합니다.

좌측 슬라이드에 [네트워크 및 보안] - [보안 그룹]을 선택하기
우상단 주황색의 [보안 그룹 생성]을 클릭하기
[EC2] - [보안 그룹] - [보안 그룹 생성]에서 주요 입력값을 아래 이미지를 따라서 입력하고 우하단의 주황색 [보안 그룹 생성] 클릭하기
좌측 슬라이드에 [인스턴스] - [인스턴스]을 선택하기
우상단 주황색의 [인스턴스 생성하기] 클릭하기

[EC2] - [인스턴스] - [Launch an instance] 에서 주요 입력값을 아래 이미지를 따라서 입력하고 우측 주황색 [인스턴스 시작] 클릭하기

SSH(Secure Shell) 프로토콜을 이용해서 monthly-cs-ec2-bastion-server에 접속하기
1. 실행 구문
```
ssh -i "<다운로드 폴더 경로>/monthly-cs-ec2-keypair.pem" ubuntu@<EC2 공개(퍼블릭) IPv4>
```
1. 왜 SSH 접속이 되었던 것일까? 🚩
  스스로 생각해보면 좋을 것 같습니다. 😊
접속에 성공한 monthly-cs-ec2-bastion-host에서 SSH 프로토콜을 이용해서 monthly-cs-ec2-next-server에 접속하기
1. 다운로드 폴더에 있는 Keypair를 Bastion Host에 옮기기
  1. 메모장 같은 에디터로 키 파일을 여신 다음에 파일의 전체를 복사해주세요.
  2. 새로운 메모장을 열어서, 아래의 스크립트를 적은 후 복사해주세요.
```
echo "<복사한 Keypair 값 붙여넣기>" > monthly-cs-ec2-keypair.pem
```
  3. 접속에 성공한 monthly-cs-ec2-bastion-host의 터미널(shell)에서 복사한 echo "~” 스크립트를 붙여넣기해서 실행해주세요.
  4. 아래 명령어를 통해서 Keypair의 권한을 변경해주세요.
```
chmod 400 monthly-cs-ec2-keypair.pem
```
2. 실행 구문
```
ssh -i "monthly-cs-ec2-keypair.pem" ubuntu@<EC2 공개(프라이빗 ) IPv4>
```
3. 불편한 부분을 고민해보기 🚩
  SSH를 통해서 접근하는 방식은 일반적으로 많이 쓰이는 방법입니다만, 터미널에서 작업을 진행하는 데에는 많은 불편함이 존재합니다.
  
  어떤 불편함이 존재하고 이를 어떻게 극복할 수 있을지 생각해봅시다. 이번 실습에서는 Bastion Host와 VSC를 사용하지만, 다른 구성도 존재할 것이라고 생각합니다.

VSC SSH 설정하기

이 방법은 퍼블릭 서브넷의 Bastion Host(EC2)와 프라이빗 서브넷의 Next SSR Server(EC2)가 구성되어 있는 경우, VSC SSH를 통해서 환경을 구성하는 내용입니다.

VSC 실행하기
VSC 좌측 하단의 파란색 [>< 로고] 버튼 클릭하기
VSC 상단에 [Connect Current Window to Host…] 선택하기
VCS 상단에 [Configure SSH Hosts] 선택하기

monthly-cs-ec2-bastion-host에 대한 SSH Config 설정하기

Windows / MacOS / Linux

Host Monthly-Bastion-Host
  HostName <공개(퍼블릭) IPv4>
  IdentityFile "<다운로드 폴더 경로>\monthly-cs-ec2-keypair.pem"
  User ubuntu

monthly-cs-ec2-next-server에 대한 SSH Config 설정하기

Windows

Host Monthly-Next-Server
  HostName <비공개(프라이빗) IPv4>
  IdentityFile "<다운로드 폴더 경로>\monthly-cs-ec2-keypair.pem"
  User ubuntu
  ProxyCommand C:/Windows/System32/OpenSSH/ssh.exe -q -W %h:%p Monthly-Bastion-Host

MacOS/Linux

Host Monthly-Next-Server
  HostName <비공개(프라이빗) IPv4>
  IdentityFile "<다운로드 폴더 경로>\monthly-cs-ec2-keypair.pem"
  User ubuntu
  ProxyCommand ssh.exe -q -W %h:%p Monthly-Bastion-Host

컴퓨팅 리소스에 서버 배포하기 (수동)

VSC SSH를 통해서 접속한 monthly-cs-ec2-next-server에서 [Open Folder] 선택하기
/home/ubuntu로 경로가 설정되어있다면 [OK] 클릭하고 Yes I trust author 선택하기
/home/ubuntu 경로에서 project 폴더 생성하기
/home/ubuntu/project 경로에 로컬에 받아 놓은 샘플용 next 서버 코드를 옮기기
서버 가동을 위한 필요 프로그램 설치하기
1. Ubuntu 시스템 패키지 매니저(apt, apt-get) 업데이트
```
sudo apt update -y
sudo apt-get update -y
```
2. Node.js 20버전 설치하기
```
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
```
3. 아래 스크립트로 Node.js, npm 설치 확인하기
```
node --version
npm --version
```
서버 가동하기
1. 실행 구문
```
npm i
npm run build
npm run start
```
2. 브라우저의 주소창에 http://localhost:3000을 입력해서 접속하기
3. 현재까지의 방식에는 2가지 치명적인 문제가 있습니다.
  무슨 문제가 있을까요?
  정답은 이미 알고 있습니다.
  “이렇게 킨 서버가 사용자들에게 지속적으로 제공이 가능할지”에 대해서 생각해보면 좋을 것 같습니다.
PM2를 활용하여 서버를 데몬 프로그램으로 실행시키기
6-a의 실행 구문 중 npm run start 구문은 Ctrl+C를 통해서 종료해주세요.
1. PM2를 전역으로 설치하기
```
sudo npm i pm2 -g
```
2. PM2로 서버를 가동하기
```
sudo pm2 start npm --name "next-server" -- start
```
PM2 로그를 통해서 SSR 방식의 Next 실행 방식 확인하기
1. monthly-cs-ec2-next-server의 터미널에서 아래 명령어 입력하기
```
pm2 log
```
2. [포켓몬 잡기] 버튼을 클릭해보자
3. 아래와 같이 로그가 출력되는지 확인하기

현재 배포된 리소스의 문제점 진단하기

외부에 노출할 수 있는 앤드포인트(HTTP/S)가 없음
→ 외부에 노출하면서 HTTPS설정이 가능해야함
서버가 1개이므로 가용성, 확장성이 좋지않음
→ 서버를 N개로 늘리고 부하분산을 해야함
→ N개의 서버에서 N + X, N + Y, N + Z 처럼 확장할 수 있는 구조가 필요함. 확장된 서버는 자동으로 부하분산 대상에 포함되어야 함

위 모든 문제점을 해결할 수 있는 시작점인 ELB, TG, ASG를 활용한 인프라 추가 배포 필요

컴퓨팅 리소스 고도화하기 : HTTPS, 확장성, 가용성

AWS Console에 ACM 검색해서 클릭하기
좌측 슬라이드에서 [인증서 요청] 버튼 클릭하기
[AWS Certificate Manager] - [인증서] - [인증서 요청]에서 퍼블릭 인증서 요청 유형 선택하고 우하단 주황색 [다음] 버튼 클릭하기
[AWS Certificate Manager] - [인증서] - [인증서 요청] - [퍼블릭 인증서 요청]에서 주요 입력값을 아래와 같이 맞추고 [요청] 버튼을 클릭하기
생성된 week2.unchaptered.shop 도메인에 대한 인증서를 클릭하기
우측에 Route53에서 레코드 생성 클릭하기
AWS Console에 EC2 검색해서 클릭하기
좌측 슬라이드에서 [네트워크 및 보안] - [보안 그룹] 클릭하기
우상단 주황색 [보안 그룹 생성] 클릭하기
[EC2] - [보안 그룹] - [보안 그룹 생성]에서 주요 입력값을 아래 이미지를 따라서 입력하고 우하단의 주황색 [보안 그룹 생성] 클릭하기
1. 이름 : monthly-cs-sg-elb-next-server
좌측 슬라이드에서 [로드 밸런싱] - [대상 그룹] 클릭하기
우상단 주황색의 [대상 그룹 생성] 클릭하기
[EC2] - [대상 그룹] - [1단계 대상 그룹 생성]에서 주요 입력값을 아래 이미지를 따라서 입력하고 우하단 주황색의 [다음] 버튼 클릭하기
[EC2] - [대상 그룹] - [2단계 대상 등록]에서 우하단 주황색의 [다음] 버튼 클릭하기
좌측 슬라이드에서 [로드 밸런싱] - [로드 밸런서] 클릭하기
우상단 주황색 [로드 밸런서 생성] 클릭하기
[EC2] - [로드 밸런서] - [로드 밸런서 유형 비교 및 선택]에서 Application Load Balancer 아래에 있는 [생성] 버튼 클릭하기
[EC2] - [로드 밸런서] - [Application Load Balancer 생성]에서 주요 입력값을 아래 이미지를 따라서 입력하고 우하단의 [다음] 버튼 클릭하기
AWS Console에 Route53 검색해서 클릭하기
실습에서 사용 중인 unchaptere.shop 호스팅 존을 선택 후 우측 주황색의 [레코드 생성] 클릭
기능 테스트를 통해 외부에 노출 가능한 앤드포인트(HTTPS)을 포함한 Next 서버 배포 완료
좌측 슬라이드에서 [인스턴스] - [인스턴스] 클릭하기
생성된 monthly-cs-ec2-next-server를 일시 [중단]하고 AMI 생성하기 클릭하기
[EC2] - [인스턴스] - <EC2-id> - [이미지 생성] 중 주요 입력값을 아래 이미지를 따라서 입력하고 우하단 주황색의 [이미지 생성]을 클릭하기
좌측 슬라이드에서 [인스턴스] - [시작 탬플릿] 클릭하기
[EC2] - [시작 탬플릿] - [시작 탬플리 생성]에서 주요 입력값을 아래 이미지를 따라서 입력하고 우하단 주황색의 [시작 탬플릿 생성] 버튼 클릭하기
1. 메타 데이터란에는 아래 코드를 넣어야 합니다.
```
cd /home/ubuntu/project

sudo pm2 start npm --name "next-server" -- start
```
2. 미리보기
좌측 슬라이드에서 [Auto Scaling] - [AutoScaling 그룹] 클릭하기
화면 중앙 주황색의 [Auto Scaling 그룹 생성] 버튼 클릭하기
[EC2] - [Auto Scaling 그룹] - [Auto Scaling 그룹 생성] - [1단계 시작 탬플릿 또는 구성 선택]에서 주요 입력값을 아래 이미지를 따라서 입력하고 우하단 주황색의 [다음] 버튼 클릭하기
기본값은 시작 탬플릿(Launch Template)으로 되어있으나, 과거 버전인 시작 구성(Launch ConfiguratioN)도 존재합니다. 하지만 해당 시작 구성은 deprecated 방향으로 가고 있기 때문에 시작 탬플릿을 사용해주세요.
[EC2] - [Auto Scaling 그룹] - [Auto Scaling 그룹 생성] - [2단계 인스턴스 시작 옵션 선택]에서 주요 입력값을 아래 이미지를 따라서 입력하고 우하단 주황색의 [다음] 버튼 클릭하기
[EC2] - [Auto Scaling 그룹] - [Auto Scaling 그룹 생성] - [3단계 고급 옵션 구성]에서 주요 입력값을 아래 이미지를 따라서 입력하고 우하단 주황색의 [다음] 버튼 클릭하기
[EC2] - [Auto Scaling 그룹] - [Auto Scaling 그룹 생성] - [4단계 그룹 크기 및 크기 조정 구성] 패스
[EC2] - [Auto Scaling 그룹] - [Auto Scaling 그룹 생성] - [5단계 알림 추가] 패스
[EC2] - [Auto Scaling 그룹] - [Auto Scaling 그룹 생성] - [6단계 태그 추가] 패스
[EC2] - [Auto Scaling 그룹] - [Auto Scaling 그룹 생성] - [7단계 검토]에서 필수 내용 다시 확인한 이후 우하단 주황색의 [Auto Scaling 그룹 생성] 클릭하기
생성된 Auto Scaling 그룹의 수치를 조정하여 서버의 증/감을 확인하기