React CI/CD 구축 해보기 1(EC2+Github Actions + CodeDeploy)

이번에는 create-react-app으로 만들어진 프로젝트를 EC2서버에 자동 배포하는 방법에 대해 알아보도록 하겠습니다

내용이 조금 길어서 주요 작업 별로 구분을 하였으며

오늘은 EC2에 CodeDeploy Agenet 설치 및 권한 설정에 대해 알아보겠습니다

 

CI/CD 란?

CI/CD라는 단어는 개발을 하다 보면 많이 들어본 단어입니다

CI/CD란 애플리케이션 개발 단계부터 배포 단계까지 모든 단계를 자동화를 통해 효율적이고 빠르게 사용자에게 배포할 수 있는 환경을 의미하며 DevOps 엔지니어들의 핵심 업무입니다

여기서 CI 란 새로운 코드 변경사항이 정기적으로 빌드 및 테스트되어 공유 저장소에 통합하는 것을 의미합니다(지속적인 통합)

CD 란 개발자의 변경사항이 저장소를 넘어 고객의 실제 환경까지 릴리즈 되는 것을 의미합니다(지속적인 배포)

 

CI/CD Flow

저희가 이번에 구축할 CI/CD 플로우는 다음과 같습니다

1. 로컬에서 원격저장소로 push를 진행한다

2. 원격저장소에 push 가 일어나면 GithubActions에서 프로젝트에 대한 Build를 진행한다

3. Build 완료 후 Build 된 파일을 AWS S3에 업로드한다

4. S3에 업로드된 Build파일을 AWS CodeDeploy를 사용해서 EC2 서버에 업로드한다

 

CI/CD 구축을 하는 방법은 여러 가지가 있습니다

이번에는 진행하는 방법과 같이 GithubActions와 CodeDeploy를 사용하는 방법,

GitHubActions에서 직접 EC2서버에 접속 후 빌드하는 방법도 있습니다(다만 이 방법은 보안이슈가 발생할 수 있습니다)

또한 React 같은 경우 CloudFront를 사용하는 경우가 있는데 이때는 CodeDeploy 없이 GithubActions + S3 + CloudFront 구성으로 CI/CD를 구축할 수 있습니다)

 

저희는 EC2서버를 사용하고 있기에 EC2서버에 CodeDeploy Agent부터 설치해보도록 하겠습니다

 

EC2 Code Deploy Agent 설치

저는 Aws Linux2 서버를 사용하였으며 아래 명령어를 순차적으로 실행시켜 주시면 됩니다

sudo yum update
sudo yum install ruby
sudo yum install wget
cd /home/ec2-user/
wget https://aws-codedeploy-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/latest/install
chmod +x ./install
sudo ./install auto

 

EC2 IAM 설정

CodeDeploy Agent를 설치한 EC2 가 s3와 CodeDeploy를 사용할 수 있도록 권한을 설정해 줍니다

 - IAM -> 역할 -> 역할 만들기

 

 

- AWS 서비스 선택, EC2 선택 후 다음버튼 클릭

 

 

- 권한 정책 연결

   아래 두 개의 권한을 선택해 주시고 다음 버튼 클 클릭 해주시면 됩니다

      AmazonS3 FullAccess

      AWSCodeDeployFullAccess

 

- 역할 이름 설정 및 역할 생성

   적절한 역할 이름 입력 후에 역할생성 버튼을 눌러주시면 됩니다

 

 

- EC2 IAM 설정

  우리가 사용할 EC2 서버에 방금 만든 IAM 설정을 연결해주어야 합니다

 - EC2 -> 보안 -> IAM 역할 수정

 - 

 

- IAM 역할 지정 후 IAM 역할 업데이트

 방금 만든 IAM 파일을 지정해 주시면 됩니다

 

여기까지 하면 EC2에 대한 권한 설정은 완료가 됩니다

다음에는 CodeDeploy IAM 설정 및 CodeDeploy 애플리케이션 생성과

GitHubActions를 사용해서 AWS S3 버킷에 프로젝트 압축 파일을 업로드해보도록 하겠습니다