배포 자동화 — Vercel + GitHub 원클릭 배포

1. vercel.com 접속
2. "Sign Up" 클릭
3. "Continue with GitHub" 선택
4. GitHub 권한 허용
5. Hobby (무료) 플랜 선택

GitHub Settings → Applications → Vercel
→ "Repository access" 에서 배포할 저장소 선택
→ 전체 저장소를 허용하거나, 특정 저장소만 선택 가능

1. Vercel 대시보드 → "Add New Project"
2. "Import Git Repository" 에서 저장소 선택
3. Framework Preset: Next.js (자동 감지됨)
4. Root Directory: ./ (기본값)
5. "Deploy" 클릭

// vercel.json (프로젝트 루트에 생성)
{
  "buildCommand": "next build",
  "outputDirectory": ".next",
  "installCommand": "npm install",
  "framework": "nextjs"
}

1. Vercel 대시보드 → 프로젝트 선택
2. Settings → Environment Variables
3. 환경변수 추가

# Supabase 연동
NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...

# OpenAI API (서버 사이드 전용)
OPENAI_API_KEY=sk-...

# 기타 설정
NEXT_PUBLIC_APP_URL=https://yourdomain.com

Environment Variables 설정 화면에서:
→ 각 변수마다 Production / Preview / Development 체크박스로 스코프 지정
→ OPENAI_API_KEY 같은 민감한 키는 "Sensitive" 옵션 활성화

# Vercel CLI 설치
npm i -g vercel

# 로그인
vercel login

# 환경변수 추가
vercel env add OPENAI_API_KEY production
# 프롬프트에서 값 입력

# 환경변수 목록 확인
vercel env ls

# 환경변수를 로컬 .env.local로 가져오기
vercel env pull .env.local

1. Vercel 대시보드 → 프로젝트 → Settings → Domains
2. 도메인 입력 (예: myapp.com)
3. "Add" 클릭
4. Vercel이 안내하는 DNS 레코드를 도메인 관리 사이트에 추가

# A 레코드 (루트 도메인)
Type: A
Name: @
Value: 76.76.21.21

# CNAME 레코드 (www 서브도메인)
Type: CNAME
Name: www
Value: cname.vercel-dns.com

도메인 연결 후 약 1~5분 내에:
→ SSL 인증서 자동 발급
→ HTTP → HTTPS 자동 리다이렉트 설정
→ www → non-www (또는 반대) 자동 리다이렉트

1. 새 브랜치 생성: git checkout -b feature/new-ui
2. 코드 수정 후 push: git push origin feature/new-ui
3. GitHub에서 PR 생성
4. Vercel이 자동으로 프리뷰 빌드 시작
5. PR 코멘트에 프리뷰 URL 자동 게시
   → https://프로젝트-git-feature-new-ui-username.vercel.app

# 기능 브랜치 생성
git checkout -b feature/dark-mode

# 코드 수정
# ...

# 커밋 및 푸시
git add .
git commit -m "feat: 다크모드 추가"
git push origin feature/dark-mode

# GitHub에서 PR 생성 후 Vercel 프리뷰 URL로 확인
# → 모바일에서도 접속해서 테스트 가능
# → 팀원이나 지인에게 URL 공유해서 피드백 받기

Vercel 대시보드 → Settings → Environment Variables
→ NEXT_PUBLIC_SUPABASE_URL 변수를 Preview 환경에만 따로 설정
→ 테스트용 Supabase 프로젝트 URL 입력

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 이미지 최적화
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.supabase.co',
      },
    ],
  },

  // 헤더 설정 (캐시 최적화)
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Cache-Control', value: 's-maxage=60, stale-while-revalidate=300' },
        ],
      },
      {
        source: '/:path*.(jpg|jpeg|png|gif|ico|svg)',
        headers: [
          { key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

// app/api/hello/route.ts
export const runtime = 'edge'; // Edge Runtime 사용

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const name = searchParams.get('name') || 'World';

  return new Response(
    JSON.stringify({ message: `Hello, ${name}!` }),
    {
      headers: { 'Content-Type': 'application/json' },
    }
  );
}

// app/api/og/route.tsx
// OG 이미지 동적 생성 (Edge에서 실행)
import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || '기본 제목';

  return new ImageResponse(
    (
      <div style={{
        display: 'flex',
        fontSize: 48,
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        color: 'white',
        width: '100%',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 48,
      }}>
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

// package.json
{
  "scripts": {
    "build": "next build",
    "vercel-build": "next build"
  }
}

// next.config.js에 추가
const nextConfig = {
  // 빌드 시 불필요한 페이지 제외 (개발용 페이지 등)
  experimental: {
    // 병렬 빌드 최적화
    workerThreads: true,
    cpus: 4,
  },
};

1. Vercel 대시보드 → 프로젝트 → Deployments 탭
2. 정상 작동하던 이전 배포를 찾기
3. 해당 배포의 "..." 메뉴 클릭
4. "Promote to Production" 선택
5. 즉시 이전 버전으로 복원 완료

# 배포 목록 확인
vercel ls

# 특정 배포를 프로덕션으로 승격
vercel promote [deployment-url]

# 예시
vercel promote myapp-abc123.vercel.app

1. 배포 전: 현재 프로덕션 URL 메모
2. 배포 후: 핵심 기능 5분 내 수동 테스트
3. 문제 발견: 즉시 이전 버전으로 롤백
4. 원인 분석: 로컬에서 디버깅 후 수정 배포

[코드 수정] → [git push] → [Vercel 자동 빌드]
                                    ↓
                            [빌드 성공?]
                           /            \
                        Yes              No
                         ↓                ↓
                  [자동 배포]      [빌드 로그 확인]
                       ↓                  ↓
              [헬스 체크 통과?]    [코드 수정 후 재push]
                     ↓
            [프로덕션 반영 완료]

# 빈 커밋으로 재배포 트리거
git commit --allow-empty -m "chore: trigger redeploy"
git push origin main