React Academy · 강의

React용 GitHub Actions CI/CD

모든 푸시마다 GitHub Actions 워크플로에서 린트, 테스트, 빌드, 배포 단계를 자동화합니다.

React용 GitHub Actions CI/CD은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

GitHub Actions란 무엇인가요

GitHub Actions는 GitHub에 내장된 CI/CD 플랫폼입니다. .github/workflows/ 아래의 YAML 파일에 워크플로를 정의하면 푸시, 풀 리퀘스트 또는 예약 이벤트가 발생할 때 실행됩니다.

기본 CI 워크플로

모든 푸시와 풀 리퀘스트마다 의존성을 설치하고 린트 검사를 실행한 뒤 테스트를 실행하는 최소한의 워크플로입니다.

# .github/workflows/ci.yml
name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci
      - run: npm run lint
      - run: npm test -- --coverage

node_modules 캐싱

의존성 설치 속도를 높이려면 node_modules가 아닌 npm 캐시인 ~/.npm을 캐시하세요. actions/setup-node에서 cache 옵션으로 이를 처리합니다.

- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: 'npm' # caches ~/.npm based on package-lock.json hash

빌드 단계

테스트 후에 빌드 단계를 추가하여 프로젝트가 오류 없이 컴파일되는지 확인합니다.

- name: Build
  run: npm run build

# For Next.js — catch TypeScript errors:
- name: Type Check
  run: npx tsc --noEmit

병합 시 Vercel에 배포

워크플로에서 Vercel CLI를 사용하여 main에 푸시될 때 Vercel에 배포합니다.

- name: Deploy to Vercel
  env:
    VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
  run: |
    npm install -g vercel
    vercel pull --yes --environment=production --token=$VERCEL_TOKEN
    vercel build --prod --token=$VERCEL_TOKEN
    vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN

병합 시 S3에 배포

main에서 빌드가 성공적으로 완료되면 빌드 출력물을 S3에 동기화하고 CloudFront 캐시를 무효화합니다.

- name: Deploy to S3
  if: github.ref == 'refs/heads/main'
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  run: |
    aws s3 sync dist/ s3://my-bucket/ --delete
    aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"

CI에서 Playwright E2E 실행

빌드 후 CI에서 Playwright E2E 테스트를 실행합니다. 전용 단계에서 브라우저 바이너리를 설치하세요.

- name: Install Playwright Browsers
  run: npx playwright install --with-deps chromium

- name: Run E2E Tests
  run: npx playwright test

- uses: actions/upload-artifact@v4
  if: failure()
  with:
    name: playwright-report
    path: playwright-report/

병렬 매트릭스 작업

매트릭스 전략을 사용하여 여러 Node.js 버전이나 환경에서 테스트를 병렬로 실행합니다.

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18, 20, 22]
    steps:
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

비밀 정보 관리

민감한 값(API 키, 배포 토큰)을 GitHub Secrets로 저장합니다(저장소 → Settings → Secrets). 워크플로에서는 ${{ secrets.MY_SECRET }}으로 액세스합니다.

조건부 단계

if: 조건을 사용하여 특정 브랜치나 PR 이벤트에서 또는 이전 단계가 성공한 후에만 단계를 실행합니다.

- name: Deploy
  if: github.ref == 'refs/heads/main' && github.event_name == 'push'
  run: npm run deploy

상태 배지

README에 빌드 상태 배지를 추가하여 CI 상태를 한눈에 보여 주세요.

<!-- README.md -->
![CI](https://github.com/myorg/myrepo/actions/workflows/ci.yml/badge.svg)

빠른 확인

동일한 작업을 여러 구성(예: 서로 다른 Node.js 버전)에서 동시에 실행하는 GitHub Actions 기능은 무엇인가요?

복습

.github/workflows/의 YAML 파일에 CI 워크플로를 정의하세요. 빠른 설치를 위해 actions/setup-node와 cache: 'npm'을 사용하세요. 린트, 타입 검사, 테스트, 빌드 단계를 추가하세요. main 브랜치에 푸시될 때 조건부로 배포하세요. 비밀 정보는 GitHub Secrets에 저장하고, 여러 버전에서 테스트하기 위해 매트릭스 빌드를 사용하세요.

자주 묻는 질문

“React용 GitHub Actions CI/CD” 강의는 무료인가요?

네 — “React용 GitHub Actions CI/CD” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“React용 GitHub Actions CI/CD”에서 뭘 배우나요?

모든 푸시마다 GitHub Actions 워크플로에서 린트, 테스트, 빌드, 배포 단계를 자동화합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“React용 GitHub Actions CI/CD” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기