GitHub CI/CD 파이프라인으로 Vercel 자동 배포하기

vercel        # Preview 배포
vercel --prod # Production 배포bash

# pnpm 설치
npm install -g pnpm

# 기존 프로젝트에서 pnpm으로 전환
pnpm import  # package-lock.json 또는 yarn.lock에서 변환
pnpm install # 의존성 설치 및 pnpm-lock.yaml 생성bash

# Vercel CLI 설치 (없다면)
pnpm add -g vercel@latest

# Vercel 로그인
vercel login

# 작업하고 있는 프로젝트 디렉토리로 이동
cd /path/to/your/project

# 작업 중인 프로젝트 디렉토리 이동 후
# Vercel 프로젝트 연결 (처음 한 번만)
# 이전 글에서 이미 배포했다면 이미 연결되어 있을 수 있어요
vercel link                                        ✔  6s   20:20:03 
Vercel CLI 50.9.0
? Set up “~/Desktop/ci-cd-vercel”? yes
? Which scope should contain your project? dydals3440's projects
? Found project “dydals3440s-projects/ci-cd-vercel”. Link to it? yes
✅  Linked to dydals3440s-projects/ci-cd-vercel (created .vercel and added it to .gitignore)
? Would you like to pull environment variables now? no

# .vercel/project.json 파일 생성 확인
cat .vercel/project.jsonbash

{
  "projectId": "prj_xxxxxxxxxxxxxxxxxxxx",
  "orgId": "team_xxxxxxxxxxxxxxxxxxxx"
}json

# .gitignore
.vercel/

name: Vercel Preview Deployment

env:
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

on:
    push:
        branches-ignore:
            - main # main 브랜치 외 모든 브랜치에서 실행

jobs:
    Deploy-Preview:
        runs-on: ubuntu-latest
        steps:
            # 1. 코드 체크아웃
            - name: Checkout code
              uses: actions/checkout@v4

            # 2. pnpm 설정
            - name: Setup pnpm
              uses: pnpm/action-setup@v4
              with:
                  version: 10

            # 3. Node.js 설정 (pnpm 캐싱 포함)
            - name: Setup Node.js
              uses: actions/setup-node@v4
              with:
                  node-version: 22
                  cache: "pnpm"

            # 4. 의존성 설치
            - name: Install dependencies
              run: pnpm install --frozen-lockfile

            # 5. 린트 검사 (선택사항)
            - name: Run lint
              run: pnpm run lint

            # 6. 테스트 실행 (선택사항)
            - name: Run tests
              run: pnpm test
              continue-on-error: true

            # 7. Vercel CLI 설치
            - name: Install Vercel CLI
              run: pnpm add -g vercel@latest

            # 8. Vercel 환경변수 다운로드
            - name: Pull Vercel Environment Information
              run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}

            # 9. 프로젝트 빌드
            - name: Build Project Artifacts
              run: vercel build --token=${{ secrets.VERCEL_TOKEN }}

            # 10. Vercel에 배포 (prebuilt 사용)
            - name: Deploy Project Artifacts to Vercel
              run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
yaml

# 8단계: 환경변수 다운로드
vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}

# 9단계: GitHub Actions에서 빌드 (.vercel/output 생성)
vercel build --token=${{ secrets.VERCEL_TOKEN }}

# 10단계: 빌드된 결과물만 Vercel에 업로드
vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}bash

      # 테스트 실행 (실패해도 계속 진행)
      - name: Run tests
        run: pnpm test
        # 테스트가 없는 프로젝트는 이 옵션을 추가하세요
        continue-on-error: trueyaml

git checkout -b feature/test-previewbash

# 간단한 파일 수정
echo "# Test Preview Deployment" >> README.md

git add .
git commit -m "test: preview deployment"bash

git push origin feature/test-previewbash

pnpm add -D vitestbash

{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest"
  }
}json

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    // jsdom 환경으로 설정.
    environment: 'jsdom',
  },
});typescript

export function add(a: number, b: number): number {
  return a + b;
}typescript

import { describe, it, expect } from 'vitest';
import { add } from './add';

describe('add', () => {
  it('두 숫자를 더할 수 있다', () => {
    expect(add(1, 2)).toBe(3);
  });

  it('음수도 처리할 수 있다', () => {
    expect(add(-1, 1)).toBe(0);
  });
});typescript

# 테스트 실행
pnpm test
# 위에서 우리가 테스트 실행 환경을 environment: "jsdom"으로 설정했어요.
# 따라서, jsdom을 설치해야 테스트를 성공적으로 실행할 수 있어요.
✔ Do you want to install jsdom? … yes
bash

 ✓ src/utils/add.test.ts (2)
   ✓ add (2)
     ✓ 두 숫자를 더할 수 있다
     ✓ 음수도 처리할 수 있다

 Test Files  1 passed (1)
      Tests  2 passed (2)

      # 6. 테스트 실행
      - name: Run tests
        run: pnpm testyaml

pnpm add -D eslint prettier eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parserbash

import eslint from '@eslint/js';
import tseslint from '@typescript-eslint/eslint-plugin';
import tsparser from '@typescript-eslint/parser';
import prettier from 'eslint-config-prettier';
import globals from 'globals';

export default [
  eslint.configs.recommended,
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tsparser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
      globals: {
        ...globals.browser,
      },
    },
    plugins: {
      '@typescript-eslint': tseslint,
    },
    rules: {
      ...tseslint.configs.recommended.rules,
      'no-unused-vars': 'off',
      '@typescript-eslint/no-unused-vars': 'error',
    },
  },
  prettier, // Prettier와 충돌하는 규칙 비활성화
];
javascript

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}json

{
  "scripts": {
    "lint": "eslint . --fix",
    "format": "prettier --write ."
  }
}json

# 린트 검사 및 자동 수정
pnpm run lint

# 코드 포맷팅
pnpm run formatbash

pnpm add -D @biomejs/biomebash

pnpm biome initbash

{
  "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  }
}json

{
  "scripts": {
    "lint": "biome check --write .",
    "format": "biome format --write ."
  }
}json

# 린트 + 포맷팅 한 번에
pnpm run lintbash

      # 5. 린트 검사
      - name: Run lint
        run: pnpm run lintyaml

name: Vercel Production Deployment

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

on:
  push:
    branches:
      - main  # main 브랜치에만 실행

jobs:
  Deploy-Production:
    runs-on: ubuntu-latest
    steps:
      # 1. 코드 체크아웃
      - name: Checkout code
        uses: actions/checkout@v4

      # 2. pnpm 설정
      - name: Setup pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 10

      # 3. Node.js 설정 (pnpm 캐싱 포함)
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'pnpm'

      # 4. 의존성 설치
      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      # 5. 린트 검사
      - name: Run lint
        run: pnpm run lint

      # 6. 타입 체크
      - name: Type check
        run: pnpm run type-check

      # 7. 테스트 실행
      - name: Run tests
        run: pnpm test

      # 8. Vercel CLI 설치
      - name: Install Vercel CLI
        run: pnpm add -g vercel@latest

      # 9. Vercel 환경변수 다운로드 (Production)
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      # 10. 프로젝트 빌드 (Production)
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      # 11. Vercel에 배포 (Production)
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}yaml

# 로컬에서 개발 (lock 파일 생성됨)
pnpm install
git add pnpm-lock.yaml
git commit -m "feat: add new feature"

# GitHub Actions CI에서 실행
# frozen-lockfile 옵션으로 정확히 같은 버전 설치 보장
pnpm install --frozen-lockfilebash

ERR_PNPM_NO_LOCKFILE Cannot install with frozen-lockfile because pnpm-lock.yaml is absent

09:00 - feature 브랜치에서 개발 시작
10:00 - GitHub에 푸시 → Preview 배포 시작
10:02 - Preview URL 생성 → https://project-abc123.vercel.app
10:05 - PR 생성 → 팀원에게 리뷰 요청
11:00 - 리뷰 완료 후 main에 머지
11:01 - Production 배포 시작
11:03 - Production 배포 완료 → https://myproject.com 업데이트

permissions:
  contents: read        # 코드 읽기 권한
  pull-requests: write  # PR 댓글 작성 권한
  issues: write         # 이슈 댓글 작성 권한

name: Vercel Preview Deployment

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

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

jobs:
  Deploy-Preview:
    runs-on: ubuntu-latest
    steps:
      # 1. 코드 체크아웃
      - name: Checkout code
        uses: actions/checkout@v4

      # 2. pnpm 설정
      - name: Setup pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 10

      # 3. Node.js 설정
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'pnpm'

      # 4. 의존성 설치
      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      # 5. 린트 검사
      - name: Run lint
        run: pnpm run lint

      # 6. 타입 체크
      - name: Type check
        run: pnpm run type-check

      # 7. 테스트 실행
      - name: Run tests
        run: pnpm test

      # 8. Vercel CLI 설치
      - name: Install Vercel CLI
        run: pnpm add -g vercel@latest

      # 9. Vercel 환경변수 다운로드
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}

      # 10. 프로젝트 빌드
      - name: Build Project Artifacts
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}

      # 11. 배포 URL을 출력 변수로 저장
      - name: Deploy and capture URL
        id: deploy
        run: |
          DEPLOY_URL=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})
          echo "url=$DEPLOY_URL" >> $GITHUB_OUTPUT

      # 12. PR에 배포 URL 코멘트
      - name: Comment PR with deployment URL
        uses: actions/github-script@v7
        if: github.event_name == 'pull_request'
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `✅ Preview 배포가 완료되었습니다!\n\n🔗 Preview URL: ${{ steps.deploy.outputs.url }}`
            })yaml

Error: The specified token is not valid

# 로컬에서 토큰 테스트
VERCEL_TOKEN=your-token-here vercel whoamibash

ERR_PNPM_NO_LOCKFILE Cannot install with frozen-lockfile because pnpm-lock.yaml is absent

pnpm install
git add pnpm-lock.yaml
git commit -m "chore: add pnpm-lock.yaml"
git pushbash

Error: VITE_API_URL is not defined

      - name: Debug environment variables
        run: |
          echo "Environment variables:"
          env | grep VITE_ || echo "No VITE_ variables found"yaml

      # 린트 실행 (실패해도 계속 진행)
      - name: Run lint
        run: pnpm run lint
        continue-on-error: trueyaml

git commit -m "docs: update README [skip ci]"bash

      - name: Setup pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'pnpm'  # pnpm 캐싱 활성화yaml

      - name: Cache build output
        uses: actions/cache@v4
        with:
          path: |
            .next/cache
            node_modules/.cache
          key: ${{ runner.os }}-build-${{ hashFiles('pnpm-lock.yaml') }}yaml

      - name: Run lint
        run: pnpm run lint  # 실패하면 배포 중단

      - name: Run tests
        run: pnpm test  # 실패하면 배포 중단yaml