CI-CD — SvelteKit 앱의 자동화 파이프라인 구축

코드를 push하면 자동으로 테스트, 빌드, 배포까지 — CI/CD는 개발자의 반복 노동을 없애줍니다.

개념 정의

CI/CD(Continuous Integration/Continuous Deployment) 는 코드 변경을 자동으로 검증(CI)하고 배포(CD)하는 파이프라인입니다.

GitHub Actions 기본 워크플로

YAML

# .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

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

      - name: 린트
        run: npm run lint

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

      - name: 빌드
        run: npm run build

      - name: E2E 테스트
        run: npx playwright install --with-deps && npm run test:e2e

배포 워크플로

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

      # Cloudflare Pages 배포
      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: my-sveltekit-app
          directory: .svelte-kit/cloudflare

PR 미리보기 배포

YAML

# PR마다 미리보기 URL 생성
- name: Deploy Preview
  if: github.event_name == 'pull_request'
  uses: cloudflare/pages-action@v1
  with:
    apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
    accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
    projectName: my-app
    directory: .svelte-kit/cloudflare
    branch: ${{ github.head_ref }}

- name: Comment PR
  if: github.event_name == 'pull_request'
  uses: actions/github-script@v7
  with:
    script: |
      github.rest.issues.createComment({
        owner: context.repo.owner,
        repo: context.repo.repo,
        issue_number: context.issue.number,
        body: `배포 미리보기: ${process.env.DEPLOY_URL}`,
      });

Lighthouse CI

YAML

- name: Lighthouse CI
  uses: treosh/lighthouse-ci-action@v11
  with:
    urls: |
      http://localhost:4173/
      http://localhost:4173/blog
    uploadArtifacts: true
    temporaryPublicStorage: true

환경별 배포

YAML

jobs:
  deploy-staging:
    if: github.ref == 'refs/heads/develop'
    environment: staging
    steps:
      - run: npm run build
        env:
          PUBLIC_API_URL: ${{ vars.STAGING_API_URL }}

  deploy-production:
    if: github.ref == 'refs/heads/main'
    environment: production
    steps:
      - run: npm run build
        env:
          PUBLIC_API_URL: ${{ vars.PROD_API_URL }}

면접 포인트

"CI와 CD의 차이는?": CI는 코드 변경을 자동 검증(테스트, 린트, 빌드)하는 과정이고, CD는 검증된 코드를 자동 배포하는 과정입니다.
"미리보기 배포의 가치는?": PR마다 독립 환경을 제공하여 코드 리뷰어가 직접 동작을 확인할 수 있습니다. 배포 관련 문제를 프로덕션 전에 발견할 수 있습니다.

정리

SvelteKit + GitHub Actions로 "push → 검증 → 배포" 자동화를 구축하면, 개발자는 코드에만 집중하고 나머지는 파이프라인이 처리합니다. PR 미리보기와 Lighthouse CI까지 추가하면 품질 관리도 자동화됩니다.