[AWS] Github Actions로 CI/CD 구축하기

Github Actions로 CI/CD를 구축하여, github에 push 했을 때 S3와 CloudFront에 자동으로 업데이트가 되도록 해보겠습니다.

S3, CloudFront에서 수동으로 업데이트 하는 방법은 밑의 글을 참고해 주세요!
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

[AWS] S3, CloudFront를 활용해서 React 프로젝트 배포하기

 

Github Actions

소스 코드 저장소와 밀접하게 통합된 CI/CD 도구
코드 변경 사항을 자동으로 빌드, 테스트, 배포가 가능하다.

 

Github Actions 기본 개념

Workflow

- CI/CD 프로세스를 정의하는 파일
- .github/workflows/ 폴더에 YAML 파일로 작성.
- 이벤트에 따라 실행되며, 여러 Jobs로 구성됨.

Job

- 실행되는 작업 단위
- 여러 Steps로 이루어짐.

Step

- Job 내에서 실행되는 각 명령어.

 

CI/CD 구축 흐름

코드 변경 → Push → Github Actions 트리거 → 빌드 → 테스트 → 배포

Continuos Integration (CI)

- 개발자들이 자주 코드를 병합하고, 병합된 코드를 자동으로 빌드하고 테스트하는 프로세스
- 코드가 저장소에 푸시되면, 자동으로 빌드 및 테스트 수행

Continuos Deployment (CD)

- 코드가 통합 후 테스트를 거친 후 자동으로 프로덕션 환경에 배포되는 프로세스
- CI를 통과한 코드가 프로덕션 환경에 자동으로 배포

 

---

우선 프로젝트 루트 디렉토리에  .github/workflows/  폴더를 생성합니다.
그리고 파일을 작성해주면 됩니다. (파일명 자유)

 

# actions의 이름은 자유
name: Deploy To S3 And Invalidate CloudFront

# main 브랜치에 push 되었을 때 jobs 실행
on:
  push:
    branches:
      - main

# Workflow는 여러 개의 Job으로 이루어질 수 있고
jobs:
  deploy:
    runs-on: ubuntu-latest

    # 하나의 Job은 여러개의 Step으로 이루어져 있다.
    steps:
      - name: Github Repository 파일 불러오기
        uses: actions/checkout@v4  #라이브러리
      
      - name: Repository 파일 출력하기
        run: ls  # 레포지토리의 파일 모두 잘 받아와짐!

      # 무조건 먼저 해야 하는 것 - 의존성 설치
      - name: 의존성 설치
        run: npm i

      - name: 빌드하기
        run: npm run build

우선, Github 리포지토리에 저장된 파일을 actions/checkout@v4 라이브러리를 이용하여 불러옵니다.
그리고 출력해보면, 잘 받아오는 것을 볼 수 있답니다.

그리고 저희는 배포할 때  npm run build 로 빌드 파일을 만든 후에 그것들을 이용해서 배포를 했으니,
똑같이 빌드해주는 과정도 거칩니다.

그 전에  npm i 로 의존성 설치하는 것 잊지 마세요!

 

---

그러면 이 빌드된 파일을 S3에 업데이트 해줘야 하겠죠?

그런데 S3를 조작하려면, AWS 인증 과정이 필요합니다.
그래서 IAM을 통해 사용자를 생성하고, 엑세스 키도 생성하여 받아올 겁니다.

AWS에 접속해서, [IAM]을 검색하고 [사용자] - [사용자 생성]을 누릅니다.

이름은 자유롭게 지정하면 됩니다.

그리고 [권한 설정]에서 [직접 정책 연결]을 선택한 후에,
[AmazonS3FullAccess]과 [CloudFrontFullAccess]를 선택하고 [다음]을 누릅니다.
(S3와 CloudFront에 접근해야 하기 때문입니당.)

그리고 [사용자 생성]을 누릅니다.

생성된 사용자에 들어가서, [보안 자격 증명]을 누르면

이렇게 액세스 키를 생성할 수 있는 블럭이 나와요.

AWS 외부에서 실행하기 때문에 이걸 클릭하고,
설명 태그 값은 생략 후에 액세스 키를 생성하면 끝입니다.

---

다음엔 이 액세스 키를 Github의 Repository의 Secret 변수로 만들어줘야 해요.
하드코딩 하면 노출 위험이 있기 때문에 Secret 변수로 만들어서 사용합니다.

레포지토리의 [Settings] - [Actions secrets and variables] - [Actions]로 들어가면,

이렇게 Repository secrets이 나오는데, 여기에 등록해주면 됩니다.

- name: AWS Resource에 접근할 수 있게 AWS 인증 설정
  uses: aws-actions/configure-aws-credentials@v4  # 인증을 쉽게 처리해주는 라이브러리
  with:
    aws-region: ap-northeast-2
    aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
    aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      
- name: S3 기존 파일들 전체 삭제 후 빌드된 파일 업로드
  run: |
    aws s3 rm --recursive s3://facebook-web-page-xu
    aws s3 cp ./dist s3://facebook-web-page-xu/ --recursive
      
- name: CloudFront 캐시 무효화
   run: aws cloudfront create-invalidation --distribution-id E3THKF1MYW5L9A --paths "/*"

aws-actions/configure-aws-credentials@v4 라이브러리를 통해서 인증을 쉽게 처리할 수 있습니다.
secrets에 저장된 변수들은  ${{ secrets.변수명 }}  이렇게 접근이 가능합니다.

인증을 마쳤으면, S3에 접근해서 기존 파일들을 삭제한 후에 빌드된 파일을 업로드 하는 과정을 거칩니다.
(|을 활용하면 여러 줄 작성이 가능합니다.)
facebook-web-page-xu는 제 S3 버킷명입니다.

그리고 마지막으로 CloudFront에 접속해서 캐시 무효화를 해주면 끝입니다.

 

실제로 수정 후 push만 하면 일정 시간 뒤에 자동으로 업데이트 되는 것을 볼 수 있습니다 ㅎㅎ.