Vercel 배포: 환경 변수 + 도메인 + SSL

1. vercel.com → Add New → Project
2. GitHub 저장소 선택 → Import
3. Framework: Next.js (자동 감지)
4. Root Directory: ./
5. Build Command: pnpm build
6. Output Directory: .next
7. Install Command: pnpm install --frozen-lockfile
8. Deploy

[Production]
NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY  (Sensitive)
OPENAI_API_KEY  (Sensitive)
ANTHROPIC_API_KEY  (Sensitive)
STRIPE_SECRET_KEY  (Sensitive)
STRIPE_WEBHOOK_SECRET  (Sensitive)
NEXT_PUBLIC_APP_URL=https://mysaas.com

[Preview]  (PR마다 자동 배포)
- Production과 동일 (또는 staging Supabase)

[Development]  (로컬 vercel dev 시)
- 로컬 .env.local 우선

1. Vercel → Project → Settings → Domains
2. mysaas.com 입력
3. DNS 설정:
   - A record: @ → 76.76.21.21
   - CNAME: www → cname.vercel-dns.com
4. 자동 SSL (Let's Encrypt)
5. 5분~24시간 propagation

Type    Name   Value                Proxy
A       @      76.76.21.21          ❌ (Vercel SSL 위해)
CNAME   www    cname.vercel-dns.com ❌

# Cloudflare는 Proxy off (Vercel CDN 우선)
# DNS only (gray cloud)

[Production]
- main 브랜치
- mysaas.com
- 모든 최적화

[Preview]
- PR·feature 브랜치
- random-hash.vercel.app
- 실데이터로 테스트 가능

[Development]
- 로컬 vercel dev
- .env.local

// next.config.ts
import type { NextConfig } from 'next'

const config: NextConfig = {
  reactStrictMode: true,
  poweredByHeader: false,  // X-Powered-By 헤더 제거 (보안)

  images: {
    remotePatterns: [
      { protocol: 'https', hostname: '*.supabase.co' },
    ],
    formats: ['image/webp', 'image/avif'],
  },

  // CSP
  async headers() {
    return [{
      source: '/:path*',
      headers: [
        { key: 'X-Frame-Options', value: 'DENY' },
        { key: 'X-Content-Type-Options', value: 'nosniff' },
        { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
        { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
        { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
      ],
    }]
  },

  // Edge Runtime (선택)
  experimental: {
    serverActions: { bodySizeLimit: '10mb' },
  },
}

export default config

// 매우 빠른 응답 (경량 API)
// src/app/api/ping/route.ts
export const runtime = 'edge'

export async function GET() {
  return Response.json({ pong: Date.now() })
}

pnpm add -g vercel

# 로그인
vercel login

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

# 프로덕션 배포 (수동)
vercel --prod

[배포 전]
✓ pnpm build 로컬 0 에러
✓ pnpm typecheck 0 에러
✓ E2E 5개 통과
✓ .env Vercel에 모두 입력
✓ Supabase RLS 모든 테이블

[배포 후]
✓ https://mysaas.com 접속
✓ 회원가입 → 로그인 → 대시보드
✓ AI 생성 동작
✓ Stripe Checkout 테스트
✓ 모니터링 대시보드 확인