CI-CD | sim.junghun

CI/CD는 코드 변경을 자동으로 빌드, 테스트, 배포하는 파이프라인입니다. Vue 프로젝트에서는 린팅, 타입 체크, 테스트, 빌드, 배포를 자동화합니다.

면접에서 "프론트엔드 CI/CD 경험이 있나요?"라고 물으면, 어떤 단계를 자동화하고 어떤 도구를 사용했는지 구체적으로 설명할 수 있어야 합니다.

GitHub Actions 워크플로

YAML

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

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

jobs:
  lint-and-test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: 의존성 설치
        run: npm ci

      - name: 린트
        run: npm run lint

      - name: 타입 체크
        run: npm run type-check

      - name: 단위 테스트
        run: npm run test:unit

      - name: 빌드
        run: npm run build

  e2e:
    needs: lint-and-test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci
      - name: E2E 테스트
        run: npx playwright test

배포 워크플로

YAML

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

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

      # Vercel 배포
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

파이프라인 구성

PLAINTEXT

PR 생성/업데이트 시:
  1. 린트 (ESLint)
  2. 타입 체크 (vue-tsc)
  3. 단위/컴포넌트 테스트 (Vitest)
  4. 빌드 확인
  5. E2E 테스트 (Playwright)
  6. 프리뷰 배포 (선택)

main 브랜치 병합 시:
  1. 위의 모든 단계
  2. 프로덕션 배포

package.json 스크립트

JSON

{
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "lint": "eslint . --ext .vue,.ts,.tsx",
    "type-check": "vue-tsc --noEmit",
    "test:unit": "vitest run",
    "test:e2e": "playwright test",
    "test": "vitest run && playwright test"
  }
}

면접 팁

CI 파이프라인에서 병렬 실행 으로 시간을 줄이는 전략을 설명할 수 있으면 좋습니다
프리뷰 배포(PR마다 임시 환경 생성)는 코드 리뷰 생산성을 높이는 좋은 방법입니다
**캐싱 **(node_modules, 빌드 산출물)을 활용한 파이프라인 최적화도 중요합니다

요약

Vue 프로젝트의 CI/CD는 GitHub Actions로 린트, 타입 체크, 테스트, 빌드, 배포를 자동화합니다. PR 시에는 검증 파이프라인을, main 병합 시에는 배포 파이프라인을 실행하며, 캐싱과 병렬 실행으로 파이프라인 시간을 최적화합니다.