본문으로 건너뛰기

Vercel 배포

딸깍문서를 Vercel에 배포하는 방법을 안내합니다.

사전 요구사항​

  • Vercel 계정
  • GitHub 저장소 연결
  • 환경 변수 준비

배포 단계​

1. Vercel 프로젝트 생성​

  1. Vercel Dashboard에서 New Project 클릭
  2. GitHub 저장소 선택
  3. Framework: Next.js 선택

2. 환경 변수 설정​

Vercel 대시보드 → Settings → Environment Variables에서 다음 변수 추가:

ANTHROPIC_API_KEY=sk-ant-api03-xxxxx
NEXTAUTH_SECRET=your-secret-key
NEXTAUTH_URL=https://your-domain.vercel.app
GOOGLE_CLIENT_ID=xxxxx.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=xxxxx
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=xxxxx
SUPABASE_SERVICE_ROLE_KEY=xxxxx

3. 빌드 설정​

vercel.json
{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs"
}

4. 배포​

GitHub에 push하면 자동으로 배포됩니다:

git push origin main

커스텀 도메인​

도메인 추가​

  1. Settings → Domains
  2. Add Domain 클릭
  3. 도메인 입력

DNS 설정​

타입이름값
A@76.76.21.21
CNAMEwwwcname.vercel-dns.com

함수 설정​

타임아웃​

AI 기능에는 긴 타임아웃이 필요합니다:

export const maxDuration = 60;
export const runtime = "nodejs";

리전​

한국 사용자를 위한 최적의 리전:

{
  "regions": ["icn1"]
}

환경별 배포​

Preview 배포​

PR 생성 시 자동으로 Preview 배포가 생성됩니다.

Production 배포​

main 브랜치에 merge 시 Production 배포가 진행됩니다.

모니터링​

Vercel Analytics​

import { Analytics } from "@vercel/analytics/react";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

로그 확인​

Vercel Dashboard → Logs에서 실시간 로그 확인

트러블슈팅​

빌드 실패​

# 로컬에서 빌드 테스트
npm run build

환경 변수 오류​

  • 환경 변수가 올바르게 설정되었는지 확인
  • NEXTAUTH_URL이 실제 배포 URL과 일치하는지 확인

타임아웃 오류​

AI 함수에 maxDuration 설정 확인:

export const maxDuration = 60;

비용 최적화​

Edge Functions​

정적 페이지는 Edge에서 제공:

export const runtime = "edge";

이미지 최적화​

Next.js Image 컴포넌트 사용으로 자동 최적화

다음 단계​