[1주차] React 배포와 배포 자동화 (Feat. Github actions, terraform, AWS S3,CloudFront, Gabia)

프론트엔드 개발자를 위한 CI/CD 실습 후기

월간 CS에서 진행하는 React, Next 배포와 배포 자동화 A부터 Z 수업에 참여 했습니다. 프론트 배포와 배포자동화를 위해 어떻게 해야하는지 직접 실습을 통해 CI/CD를 구축하는지 배웠는대요 이에 대한 간략하게 설명하고자 합니다.

CloudFront와 S3 쉽게 배포하기

• AWS CLI 설치하기 공식 문서

AWS CLI(Amazon Web Services Command Line Interface)는 AWS 리소스를 관리하기 위한 명령 줄 도구입니다. 이를 통해 개발자 및 시스템 관리자는 터미널 또는 명령 프롬프트를 통해 AWS 서비스를 제어하고 자동화할 수 있습니다.

AWS CLI의 대표적인 작업 수행
1. 인스턴스 생성, 시작, 중지, 삭제등 EC2 인스턴스 관리
2. S3 버킷 및 객체에 대한 파일 업로드, 다운로드, 삭제
3. IAM 사용자 및 그룹 관리

• terraform 설치하기 공식 문서

Terraform은 인프라스트럭처를 코드로 정의하고 관리하기 위한 오픈 소스 도구입니다. 이를 통해 클라우드 서비스를 포함한 다양한 인프라스트럭처를 프로그래밍적으로 관리할 수 있습니다.

• 인프라스트럭처를 코드로 관리: terraform은 인프라스트럭처를 코드로 정의함으로써 인프라스트럭처를 쉽게 버전 관리하고 변경 사항을 추적

• 다양한 클라우드 제공업체 지원: AWS,Azure,Google Cloud Platform등 다양한 클라우드 제공 업체를 지원.

• 선언적 구문: 인프라스트럭처를 선언적으로 정의하는 HCL을 사용함. 이는 사용자가 원하는 상태를 정의하면 Terraform이 해당 상태로 인프라스트럭처를 구성하는 것을 의미.

• 자동화 및 반복 작업 간소화: 인프라스트럭처를 자동화하고 반복 작업을 간소화할 수 있습니다. 특히 클라우드 리소스를 프로그래밍적으로 생성하고 관리할 수 있어서, 인프라스트럭처를 구성하고 관리하는데 드는 시간과 노력을 크게 절약할 수 있다.

요약하면 클라우드 인프라스트럭처를 코드로 정의하고 관리하여 자동화하고 반복 작업을 간소화하는 도구 이를 통해 인프라스트럭처 관리의 복잡성을 줄이고, 안정성과 일관성을 유지할 수 있다.

인프라 소개

Github Actions

GitHub Action은 GitHub에서 발생하는 다양한 이벤트를 감지하여, 해당 이벤트에 맞는 적절한 작업을 실행하여 줍니다. 여기서 적절한 작업은 "연속된 스크립트들의 묶음"입니다.

• Github Acitons의 다양한 특성들

1. 워크플로(Workflows)
   하나 이상의 잡을 실행하는 YAML 파일
2. 이벤트(Events)
   대상 워크플로가 어떠한 조건에서 트리거되는지에 대한 이벤트 트리거 리스트
3. 잡(Job)
   대상 워크플로에서 실행할 작업들을 잡으로 정의함.
   기본적으로 잡들들은 서로 종속성이 업승며 병렬적으로 실행됨.
   하지만 잡들들 간에 순서를 직렬적으로 실행할 수 있다. 이 경우 서로 종속성이 발생
4. 행동(Actions)
   복잡하지만 자주 반복되는 작업을 수행하는 Gihub Acitons 플랫폼용 사용자 지정 애플리케이션. 길고 복잡한 기능을 Actions 형태로 정의해두고 이를 사용할 수 있다.
   Github Marketplace에서 사용 가능한 행동을 찾을 수 있다.
5. 실행자(Runner)
   Github이 워크플로를 실행하는 운영체제를 선택함. Large Runner나 Custom Runner Hosting 등의 지원이 가능하지만, 저희는 Ubuntu를 선택할 것입니다.

Github Actions를 사용하기 위해서는 Gh CLI를 설치해야 사용할 수 있습니다.

GH CLI Install
GH CLI 공식문서

GH CLI란?
GitHub 관련 CLI입니다.
Git과 GitHub은 완전히 별개의 프로그램입니다.

GH는 GitHUb 관련 기능이 많습니다.

내 Repository에 아래와 같이 CLI를 통해 Github secret에 등록할 수 있다.

gh secret set AWS_ACCESS_KEY -R <유저네임>/<저장소명> -b <AWS ACCESS KEY>
gh secret set AWS_SECRET_ACCESS_KEY -R <유저네임>/<저장소명> -b <AWS SECRET ACCESS KEY>
gh secret set AWS_S3_BUCKET -R <유저네임>/<저장소명> -b <가비아에서 구매한 도메인 이름>
gh secret set AWS_CF_DIST_ID -R <유저네임>/<저장소명> -b <CloudFront 배포 ID>

위 내용이 정상적으로 들어갔는지 확인하기 위해서는 setting -> Secrets and variables -> actions 탭에서 확인할 수 있다.

Github Secret이란 ?

GitHub Actions 또는 GitHub에서 실행되는 워크플로우에서 사용되는 비밀 값
이 비밀 값은 보안 키, 패스워드, API 토큰 등의 중요한 정보를 저장하고 관리하는 데 사용된다.

Github Actions용 폴더 생성하기 Github 저장소 링크

.github
└ workflows
  └ *.yaml

프로젝트 루트에 .github 폴더를 만들어야 함.
그리고 .github 폴더 안에는 workflow 폴더를 만들어야 함.

후기

React 프로젝트를 AWS와 Github Actions를 통해 배포하고 자동화하는 것이 처음은 아닙니다.
처음 배포하는 과정에서는 마우스를 활용하여 S3 Bucket을 생성하고 또, Github Secret를 관리할 때도 직접 해당 repo에 들어가 일일이 추가해줌으로써 조금 더 배포를 위한 준비 과정이 오래 걸렸던 기억이 있습니다. 하지만 이번 1주차 수업에서 사용한 terraform을 활용하여 명령어로 쉽고 빠르게 준비하는 과정을 겪을 수 있었습니다. 이를 토대로 새로운 지식을 습득하고 배움으로써 매주 수업을 통해 배포와 배포 자동화에 대한 좋은 경험을 쌓을 수 있도록 노력하고 기대하고 있습니다.