클라우드 Dev FE CD 스크립트 작성 - 100-hours-a-week/16-Hot6-wiki GitHub Wiki

05/09 프런트 엔드 서버에서 -> S3으로 마이그레이션

#bear/document

좋아요! 아래는 당신이 만든 이 GitHub Actions 워크플로우 Frontend CI & dev CD를 단계별로 전체 흐름과 함께 설명한 것입니다.이 워크플로우는 React 앱을 빌드해서 GCP의 Secret Manager와 AWS S3를 연동해 배포하는 구조입니다.

name: Frontend CI & dev CD

on:
  push:
    branches:
      - prod-temp

jobs:
  build-and-deploy:
    name: Build and Deploy to S3
    runs-on: ubuntu-latest
    environment: ${{ github.ref_name == 'main' && 'main' || 'prod' }}

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
        with:
          path: .

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm install --legacy-peer-deps
        working-directory: ott

      - name: Build React app
        run: npm run build
        working-directory: ott

      - name: Authenticate to GCP
        uses: google-github-actions/auth@v2
        with:
          credentials_json: '${{ secrets.GCP_SA_KEY }}'
      
      - name: Generate secrets.properties from GCP Secrets
        run: |
          mkdir -p ./secrets
          touch ./secrets/secrets.properties

          for LABEL in $SECRET_LABELS; do
            gcloud secrets list --filter="labels.env=$LABEL" --format="value(name)" | while read SECRET_NAME; do
              SECRET_VALUE=$(gcloud secrets versions access latest --secret="$SECRET_NAME")
              IFS='-' read -r SERVICE KEY ENV <<< "$SECRET_NAME"
              echo "${KEY}=${SECRET_VALUE}" >> ./secrets/secrets.properties
            done
          done
        env:
          SECRET_LABELS: "backend_shared"
      

      - name: Configure AWS credentials from secrets.properties
        run: |
          source ./secrets/secrets.properties
          aws configure set aws_access_key_id "$S3_ACCESS_KEY"
          aws configure set aws_secret_access_key "$S3_SECRET_KEY"
          aws configure set region ap-northeast-2

      - name: Deploy to S3
        run: |
          aws s3 sync ott/dist/ s3://onthe-top/frontend/prod/blue \
            --delete

전체 요약

목표:GitHub에서 prod-temp 브랜치에 push되면→ React 앱을 빌드하고→ GCP Secret Manager에서 시크릿 가져오고→ AWS S3의 onthe-top/frontend/prod/blue 경로에 프런트 빌드 결과물 업로드합니다.

단계별 설명

Trigger

on: push: branches: - prod-temp

  • prod-temp 브랜치에 push될 때 자동으로 실행됩니다.

⠀

Job 정의

jobs: build-and-deploy: name: Build and Deploy to S3 runs-on: ubuntu-latest

  • GitHub Actions에서 ubuntu-latest 환경에서 실행되는 단일 Job

⠀

1. Checkout 소스 코드

  • name: Checkout repository uses: actions/checkout@v3 with: path: .
  • 현재 저장소의 소스 코드를 가져옵니다.

⠀

2. Node.js 세팅

  • name: Set up Node.js uses: actions/setup-node@v3 with: node-version: '20'
  • Node.js 20버전을 설치해서 React 앱을 빌드할 준비를 합니다.

⠀

3. 의존성 설치

  • name: Install dependencies run: npm install --legacy-peer-deps working-directory: ott
  • ott/ 폴더로 이동해서 npm install 실행(--legacy-peer-deps는 peer dependency 충돌 방지 옵션)

⠀

4. React 앱 빌드

  • name: Build React app run: npm run build working-directory: ott
  • ott 디렉토리에서 React 앱을 빌드하고 결과물을 ott/dist/에 생성

⠀

5. GCP 인증

  • name: Authenticate to GCP uses: google-github-actions/auth@v2 with: credentials_json: '${{ secrets.GCP_SA_KEY }}'
  • GCP 서비스 계정 키를 사용해 GCP에 인증

⠀

6. GCP Secrets에서 secrets.properties 생성

  • name: Generate secrets.properties from GCP Secrets run: | ... env: SECRET_LABELS: "backend_shared"
  • GCP Secret Manager에서 labels.env=backend_shared인 secret들을 읽어와
  • KEY=VALUE 형태로 ./secrets/secrets.properties 파일을 생성
  • secret 이름은 서비스-키-환경 구조이고, 여기서 키만 추출해 KEY=value 형식으로 만듦

⠀

7. AWS 자격 증명 구성

  • name: Configure AWS credentials from secrets.properties run: | source ./secrets/secrets.properties aws configure set aws_access_key_id "$S3_ACCESS_KEY" aws configure set aws_secret_access_key "$S3_SECRET_KEY" aws configure set region ap-northeast-2
  • 앞서 만든 secrets.properties 파일에서 AWS S3 관련 키들을 추출하고 환경 구성
  • aws configure 명령어로 액세스 키를 설정

⠀

8. AWS S3에 업로드

  • name: Deploy to S3 run: | aws s3 sync ott/dist/ s3://onthe-top/frontend/prod/blue
    --delete
  • 빌드된 ott/dist/ 폴더의 파일들을 S3에 업로드
  • --delete 옵션이 있어서, S3에 있는 예전 파일은 삭제됨

결과

alt text

  • s3 버킷 확인 alt text

  • 정적 호스팅 확인. alt text