GitHub Actions CI/CD 설정법

GitHub Actions 기본 개념

GitHub Actions는 리포지토리 이벤트(push, PR 등)에 반응하여 워크플로우를 실행하는 CI/CD 플랫폼입니다.

무료 한도

기본 CI 워크플로우

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

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

jobs:
  build:
    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 run build

실전 워크플로우 (Next.js + TypeScript)

name: CI/CD

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

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

jobs:
  lint-and-typecheck:
    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: npx tsc --noEmit

  build:
    runs-on: ubuntu-latest
    needs: lint-and-typecheck
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "npm"
      - run: npm ci

      - uses: actions/cache@v4
        with:
          path: .next/cache
          key: next-cache-${{ hashFiles('package-lock.json') }}
          restore-keys: next-cache-

      - run: npm run build

유용한 패턴

PR 제목 검증

name: PR Title

on:
  pull_request:
    types: [opened, edited, synchronize]

jobs:
  check-title:
    runs-on: ubuntu-latest
    steps:
      - uses: amannn/action-semantic-pull-request@v5
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

의존성 캐싱

- uses: actions/cache@v4
  with:
    path: ~/.npm
    key: npm-${{ hashFiles('package-lock.json') }}
    restore-keys: npm-

병렬 실행

lint, typecheck, test를 병렬로:

jobs:
  lint:
    runs-on: ubuntu-latest
    steps: [...]

  typecheck:
    runs-on: ubuntu-latest
    steps: [...]

  test:
    runs-on: ubuntu-latest
    steps: [...]

  build:
    needs: [lint, typecheck, test]
    runs-on: ubuntu-latest
    steps: [...]

시크릿 관리

Settings → Secrets and variables → Actions

- run: npm run deploy
  env:
    VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

절대 하지 말 것:

• 시크릿을 코드에 하드코딩
• echo로 시크릿 출력
• 시크릿을 PR 로그에 노출

최적화 팁

1. concurrency로 중복 실행 방지: 같은 브랜치의 이전 실행을 취소
2. needs로 의존성 관리: 빌드는 lint 성공 후에만 실행
3. 캐시 활용: npm과 Next.js 빌드 캐시 모두 설정
4. paths 필터: 특정 파일 변경 시에만 실행

on:
  push:
    paths:
      - "src/**"
      - "package.json"

결론

GitHub Actions + Vercel의 조합이면 사이드 프로젝트의 CI/CD는 완성입니다. PR 올리면 자동 검증, merge하면 자동 배포 — 인프라에 시간 쓸 필요가 없습니다.