AWS S3와 GitHub Actions로 자동 배포하기

Woody·2024년 12월 17일

CI/CD React S3 aws github actions

GitHub Actions를 활용하여 React 프로젝트를 AWS S3에 자동으로 배포하는 방법을 알아보겠습니다.

1. S3 버킷 생성

이 포스팅을 참고하였습니다.

버킷을 생성 해줍니다.

AWS 콘솔에서 S3 서비스로 이동
"버킷 만들기" 클릭
버킷 이름 설정
"퍼블릭 액세스 차단" 설정 해제

이 때 json으로 버킷 정책을 설정하는 과정에서

알 수 없는 오류
예상치 못한 오류가 발생했습니다. 나중에 다시 시도하세요. 오류가 계속되면 AWS Support에 문의하여 지원 을 받으세요.
API 응답
Action does not apply to any resource(s) in statement

이런 오류가 뜬다면,

Resource 값 끝에 /*를 반드시 포함해야 합니다!
버킷 내 모든 객체에 대한 접근을 허용하는 설정입니다.

2. GitHub Actions 워크플로우 설정

프로젝트 루트에 .github/workflows/deploy.yml 파일을 생성하고 다음 내용을 추가합니다.

name: Deploy React to S3

# 트리거 상황 설정
on:
  push:
    branches: ['Woody-refactor']
  pull_request:
    branches: ['main']

  workflow_dispatch:

# job의 이름을 'CI-CD'라고 해보겠습니다.
jobs:
  CI-CD: 
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@v4

	  #사용하는 node 버전
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20' 

      # Corepack 활성화 및 Yarn 버전 설정 추가
      - name: Enable Corepack
        run: |
          corepack enable
          corepack prepare yarn@4.1.1 --activate

      - name: Install dependencies
        run: yarn install

	  # env 파일에서 사용하는 환경 변수 설정
      - name: Build
        run: yarn build
        env:
          VITE_SERVER: ${{ secrets.VITE_SERVER }}
          VITE_JSON_SERVER: ${{ secrets.VITE_JSON_SERVER }}

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.S3_REGION }} # 설정한 리전

	  # '--delete' 설정으로 소스 코드와 S3 버킷의 상태를 완벽하게 동기화
	  #  S3 버킷에는 있지만 소스 디렉토리(./dist)에는 없는 파일들을 삭제하는 옵션
      - name: Deploy to S3
        run: aws s3 sync ./dist s3://설정한버킷이름 --delete

3. AWS IAM에서 액세스 키 생성

아래의 두 블로그를 참고하였습니다.
참고 포스팅1
참고 포스팅2

AWS IAM 콘솔 접속
사용자 생성
"보안 자격 증명" 탭 선택
"액세스 키 만들기" 클릭
필요한 권한 설정
생성된 액세스 키 ID와 시크릿 키 저장

4. GitHub 레포지토리에 시크릿 설정

yaml파일에서 사용했던 시크릿키들을 추가해줍니다.

GitHub 레포지토리의 Settings 탭으로 이동
Secrets and variables > Actions 선택
"New repository secret" 클릭
yaml파일에서 설정해둔 secrets.~ 값 들을 추가해줍니다.
- VITE_SERVER
- VITE_JSON_SERVER
- AWS_ACCESS_KEY_ID
- AWS_SECRET_ACCESS_KEY
- S3_REGION