React 프로젝트 Github Actions로 AWS EC2 배포하기 (1)

 

이제까지는 Vercel, Netlify, Github Pages를 사용해 프론트엔드 프로젝트를 배포해보았다. 이번에 포트폴리오 사이트를 개발하면서, 도메인도 직접 구매하고 AWS EC2를 사용해 배포해보려고 한다.

 

배포되는 과정은 다음과 같다.

1. 깃허브 레포지토리 특정 브랜치에 push가 발생하면, Github Actions에 의해 프로젝트를 빌드하고 프로젝트를 AWS S3에 업로드한다.

2. AWS CodeDeploy가 S3에 업로드된 프로젝트를 AWS EC2 인스턴스로 옮긴다.

3. EC2 인스턴스에서 빌드된 결과물을 가지고 서버를 구동한다.

4. EC2 인스턴스와 연결된 도메인에서 개발한 프로젝트가 실행, 즉 배포된다!

 

기본적으로 나는 다음 글을 참고해 진행했다.

https://velog.io/@zinukk/AWS-EC2와-Github-Actions로-프론트엔드-CICD-구축하기-1

AWS EC2와 Github Actions로 프론트엔드 CI/CD 구축하기 ( 1 )

작성자님께

1. EC2 인스턴스 생성

우선 상단바에 있는 지역을 아시아 태평양(서울)로 선택한다.

참고로 지역은 지연 시간과 법률 준수(Compliance)를 기준으로 선택해야 한다고 한다.

• 지연 시간
  • 서버의 위치와 사용자의 물리적 거리가 크면 지연 시간 역시 커진다.
• 법률 준수(Compliance)
  
  • 서버 위치를 제한하는 법률이 있을 수 있다. 서비스의 특징, 서비스 제공 국가에 따라 법적으로 고려해야 한다.

 

이제 EC2 인스턴스를 생성해보자. AWS에서 EC2를 검색해 인스턴스 시작 버튼을 누른다.

원하는 이름을 입력하고, 애플리케이션 및 OS 이미지, 인스턴스 유형 모두 프리티어 사용 가능한 것으로 선택했다. 

 

키페어를 생성한다. .pem 파일은 유출되면 큰일나니 잘 보관해야한다.

 

네크워크 설정 - 편집 버튼을 눌러 인바운드 그룹 규칙을 추가한다. 

http, https에 대해 0.0.0.0/0과 ::/0를 추가해준다.

ssh에 대한 규칙은 이미 추가되어 있는데, 이전에 생성한 키 페어를 사용해 접근할 수 있도록 한다.

 

스토리지는 최대 30GB까지 프리 티어로 사용 가능하다.

 

이제 인스턴스를 시작하자!

 

2. 도메인 연결

나는 호스팅케이알에서 도메인을 구매했다. 구매한 도메인을 EC2 인스턴스와 연결해보자. 

AWS의 Route53에 들어가서 호스팅 영역 - 호스팅 영역 생성 버튼을 누른다.

 

도메인 이름에 구매한 도메인 주소를 입력한다.

 

생성한 도메인에 레코드를 생성한다. 값에 생성했던 EC2 인스턴스의 퍼블릭 IPv4 주소를 입력하면 된다.

EC2 인스턴스 요약 - 퍼블릭 IPv4 주소

 

이제 3개의 레코드가 생성되어있다.

 

이 중 유형 NS에 있는 4개의 값을 가지고 도메인을 구입한 곳에서 해당 값으로 네임서버를 설정해줘야 한다.

이제 EC2 인스턴스와 도메인이 연결되었다. (하루 이상 걸릴 수 있다..!)

 

3. AWS IAM 설정

IAM(Identity and Access Management)는 AWS 자원에 대해 안전하게 접근할 수 있도록, 사용자에게 권한을 부여하는 서비스이다. 

사용자 생성

 

액세스 관리 - 사용자 탭에 들어가 사용자 생성을 버튼을 누른다. 사용자 이름을 마음대로 입력한 후, 권한 설정에서 직접 정책 연결을 선택한다.

 

필요한 서비스는 EC2, S3, CodeDeploy이다.

AmazonEC2FullAccess, AmazonS3FullAccess, AWSCodeDeployFullAccess 각각 검색해서 체크해준다. 

액세스 키 발급

생성한 IAM을 클릭하고 보안 자격 증명 탭을 누르고, 액세스 키 - 액세스 키 만들기 버튼을 누른다.

액세스 키 모범 사례 및 대안은 CLI를 선택한다.

그럼 액세스 키와 비밀 액세스 키가 나타난다. csv 파일로 다운받거나 값을 복사해서 잘 보관해두어야 한다. ( 잊어버리면 새 키를 발급받아야 하고, 기존 키는 비활성화된다.)

 

역할 생성 - EC2

액세스 관리 - 역할 탭에 들어가 역할 생성 버튼을 누른다.

사용 사례는 EC2로 선택한다.

 

IAM 사용자 생성할 때 부여했던 권한(AmazonEC2FullAccess, AmazonS3FullAccess, AWSCodeDeployFullAccess)을 그대로 부여한다.

 

역할 생성 - CodeDeploy

이번엔 사용사례를 CodeDeploy를 검색해 선택한다.

 

자동적으로 권한 정책에 AWSCodeDeployRole이 선택되어 있다. 넘어가면 된다.

 

EC2와 IAM 역할 연결

EC2 인스턴스에 오른쪽 마우스 클릭 - 보안 - IAM 역할 수정을 클릭한다.

 

만들었던 역할을 선택하여 IAM 역할 업데이트 버튼을 누른다. 

4. AWS S3 생성

S3(Simple Storage Service)는 객체 스토리지 서비스로, 프로젝트 파일들을 저장하는 역할로 사용한다.

S3 서비스로 들어가서 버킷 만들기 버튼을 눌러 버킷을 생성한다.

버킷 이름은 '글로벌 네임스페이스 내에서 고유해야 합니다'에서 알 수 있듯이 전 세계에서 유일해야한다. 나머지 사항들은 다 기본값으로 유지하고 버킷 만들기를 완료한다.

 

참고로 퍼블릭 액세스 차단을 해제하면, 모든 사람이 버킷에 접근할 수 있다. 찾아보니 사용자가 파일을 다운로드해야할 일이 있으면 퍼블릭으로 열어놓아 사용자의 접근을 허용하는 경우가 있다고 한다. 나는 그럴 일이 없으므로 차단했다.

 

 

5. CodeDeploy 생성

CodeDeploy는 S3에 저장된 프로젝트 파일들을 EC2로 옮겨 실행하는 역할을 하게 된다.

CodeDeploy - 배포 - 시작하기에 들어가 애플리케이션 생성 버튼을 누른다.

 

EC2를 사용하는 경우 무료다.

이름을 입력하고 생성한다.

 

애플리케이션의 배포 그룹을 생성한다.

 

임의로 배포 그룹 이름을 설정한다.

서비스 역할은 이전에(3번)에서 생성한 CodeDeploy용 역할을 선택한다. 

 

EC2 인스턴스를 연결하기 위해, Amazon EC2 인스턴스를 선택한다. 

키를 Name으로 선택하고 값을 누르면, 생성한 EC2가 나타나고 선택한다.

 

나머지는 다 기본값으로 설정하고 넘어갔다. 

 

이제 필요한 서비스를 다 생성하고 설정했다. 다음에는 React 프로젝트와 연결하는 과정을 진행해보겠다.

 

2025.03.22 - [웹] - React 프로젝트 Github Actions로 AWS EC2 배포하기 (2)