React프로젝트 Github Action으로 배포 자동화 구축하기(AWS S3, CloudFront)

이전 포스트(https://sikk.tistory.com/276 React App을 S3와 CloudFront를 이용한 배포)를 이어 Github Action을 이용하여 배포자동화 하는것을 기록하려고 한다.

AWS - S3, CloudFront를 통한 React 배포

 

 

IAM 사용자 생성

IAM -> 사용자 -> "사용자 생성" 버튼 클릭

 

 

"직접 정책 연결" 선택 후 AmazonS3FullAccess, CloudFrontFullAccess 추가 -> "다음" 버튼 클릭

 

 

"사용자 생성" 버튼 클릭

 

 

IAM -> 사용자 -> 방금 만든 사용자 클릭 -> "엑세스 키 만들기" 클릭

 

 

"Command Line Interface(CLI)"를 선택한 뒤, 아래 권장 사항 이해 부분을 체크해줍니다. 이후 작성할 yml 파일의 코드를 보면 AWS CLI를 사용해서 S3, CloudFront에 접근하기 때문입니다.

 

 

설명 태그 작성 - 생략가능 -> "엑세스 키 만들기" 버튼 클릭

 

 

액세스 키와 비밀 액세스 키는 나중에 쓰이므로 따로 메모장 같은곳에 기록해두어야한다.

 

 

Github Secret 세팅

프로젝트 repo에 Settings - Security - Secrets and variables - Actions로 들어가서 New repository secret을 누릅니다.

 

 

아래 4개의 키를 등록해줍니다.

AWS_CLOUDFRONT_ID: cloudfront id

AWS_S3_ACCESS_KEY_ID: aws iam에서 발급받은 엑세스 키

AWS_S3_BUCKET_NAME: aws s3 버킷 이름

AWS_S3_SEcret_ACCESS_KEY_ID: aws iam에서 발급받은 비밀 엑세스 키

 

 

.yml 파일 생성 및 작성

프로젝트의 루트에 .github이라는 폴더를 생성하고, 그 안에 workflows라는 폴더를 추가로 생성합니다.

그안에 prod-ci.yml 파일을 만들어줍니다. (파일명은 자유)

 

 

prod-ci.yml 파일 내용 채우기

name: MAIN CI

on:
  # trigger가 되길 바라는 action을 입력합니다. push / pull_request가 있습니다.
  # 저는 main 브랜치에 push가 되면 actions을 실행하도록 설정했습니다.
  push:
    branches:
      - main
    tags:
      - "production-**"

jobs:
  Deploy:
    # runner가 실행될 환경을 지정합니다.
    runs-on: ubuntu-latest

    # name은 단계별로 실행되는 액션들의 설명을 담은 것으로, 나중에 github action에서 workflow에 표시됩니다.
    # uses 키워드로 Action을 불러올 수 있습니다.
    steps:
      # 1 - 소스코드 복사
      - name: Checkout source code
        uses: actions/checkout@v3

      # 2 - node_modules 캐싱
      # workflow가 실행될 때 필요한 파일 중에서 거의 바뀌지 않는 파일들을 GitHub의 캐시에 올려놓고 CI 서버로 내려받습니다.
      # 프로젝트에서 자주 바뀌지 않는 수많은 패키지를 매번 다운받아 올리면 시간도 오래걸리고 네트워크 대역폭을 많이 사용하게됩니다.
      - name: Cache node modules
        # **uses** 키워드는 GitHub Actions 마켓플레이스에서 제공하는 액션을 사용하겠다는 것을 나타냅니다.
        # 여기서는 **actions/cache@v3**라는 액션을 사용하며, 이는 파일이나 디렉토리를 캐싱하는 데 사용되고 있습니다.
        uses: actions/cache@v3
        # **with** 키워드는 사용할 액션에 전달할 **입력값**들을 지정합니다.
        with:
          # **path** 키워드는 캐싱할 파일 또는 디렉토리의 경로를 지정합니다.
          path: ~/.npm
          # **key**는 캐시의 고유 식별자를 설정합니다. 이 식별자는 캐시를 생성하고 검색하는 데 사용됩니다.
          # **{{ runner.OS }}**는 실행 중인 러너의 운영 체제를 나타냅니다.
          # **hashFiles('**/package-lock.json')**는 **package-lock.json** 파일의 해시값을 계산하여,
          # 의존성이 변경될 때마다 새로운 캐시를 생성하도록 합니다.
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          # **restore-keys**는 캐시 키가 정확히 일치하지 않을 경우 사용할 대체 키를 제공합니다.
          # 이는 가장 최근에 일치하는 캐시를 검색하는 데 사용됩니다.
          # ** {{ runner.OS }}-node- **와 일치하는 최신 캐시를 찾는 데 사용되는 대체 키입니다.
          restore-keys: |
            ${{ runner.os }}-node-

      # 3 - 의존성 패키지 설치
      - name: Install Dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm install

      # 4 - 빌드
      - name: Build
        run: npm run build

      # 5 - AWS 인증
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_S3_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_S3_SECRET_ACCESS_KEY_ID }}
          aws-region: ap-northeast-2

      # 6 - AWS S3에 빌드 결과물 배포
      ## CRA로 생성한 React App은 build 폴더에 빌드 결과물이 들어있습니다. (dist 폴더가 아님!)
      - name: Deploy to S3
        run: aws s3 sync ./dist s3://${{ secrets.AWS_S3_BUCKET_NAME }} --delete

      # 7 - CloudFront 캐시 무효화
      - name: Invalidate CloudFront Cache
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_ID }} --paths "/*"

 

 

잘 적용되었는지 확인하기

prod-ci.yml을 보면 저는 main 브랜치에 푸시를 하면 github action이 작동하도록 설정했습니다. main브랜치에 push를 하고 repo Actions 탭에서 성공 여부를 확인할 수 있습니다.