Vercel 완벽 가이드 | 배포·Edge Functions·Analytics·환경 변수·실전 활용

2026년 4월 7일 · 12분 읽기 · 수정 2026년 4월 7일 초급

이 글의 핵심

Vercel로 빠른 배포를 구현하는 완벽 가이드입니다. Git 연동, Edge Functions, Analytics, 환경 변수, 도메인 설정까지 실전 예제로 정리했습니다.

실무 경험 공유: AWS에서 Vercel로 전환하면서, 배포 시간이 10분에서 30초로 단축되고 인프라 관리 부담이 사라진 경험을 공유합니다.

들어가며: “배포가 복잡해요”

실무 문제 시나리오

시나리오 1: 배포 설정이 어려워요
AWS는 복잡합니다. Vercel은 Git push만 하면 됩니다.

시나리오 2: 프리뷰 환경이 필요해요
수동 설정이 필요합니다. Vercel은 자동으로 제공합니다.

시나리오 3: 글로벌 CDN이 필요해요
직접 설정이 어렵습니다. Vercel은 기본 제공합니다.

1. Vercel이란?

핵심 특징

Vercel은 프론트엔드 배포 플랫폼입니다.

주요 장점:

즉시 배포: Git push로 자동 배포
프리뷰: PR마다 프리뷰 URL
글로벌 CDN: 전 세계 빠른 속도
Edge Functions: 서버리스
Analytics: 성능 분석

2. 프로젝트 배포

Git 연동

GitHub/GitLab/Bitbucket 연결
저장소 선택
프레임워크 자동 감지
배포 시작

CLI 배포

npm install -g vercel
vercel login
vercel

3. 환경 변수

설정

# Vercel Dashboard → Settings → Environment Variables
DATABASE_URL=postgresql://...
API_KEY=secret123

로컬에서 사용

vercel env pull .env.local

코드에서 사용

// Next.js
const apiKey = process.env.API_KEY;

// 클라이언트
const publicKey = process.env.NEXT_PUBLIC_STRIPE_KEY;

4. Edge Functions

Middleware

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const country = request.geo?.country || 'US';

  return NextResponse.rewrite(new URL(`/${country}`, request.url));
}

export const config = {
  matcher: '/',
};

Edge API Route

// app/api/edge/route.ts
export const runtime = 'edge';

export async function GET(request: Request) {
  return new Response(JSON.stringify({ message: 'Hello from Edge!' }), {
    headers: { 'content-type': 'application/json' },
  });
}

5. Analytics

Web Analytics

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

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

Speed Insights

import { SpeedInsights } from '@vercel/speed-insights/next';

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

6. 도메인 설정

커스텀 도메인

Vercel Dashboard → Domains
도메인 추가
DNS 설정

Type  Name  Value
A     @     76.76.21.21
CNAME www   cname.vercel-dns.com

7. 프리뷰 배포

자동 프리뷰

PR 생성 시 자동 배포
고유 URL 생성
댓글로 URL 공유

프리뷰 보호

// middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  if (process.env.VERCEL_ENV === 'preview') {
    const basicAuth = request.headers.get('authorization');

    if (!basicAuth) {
      return new NextResponse('Authentication required', {
        status: 401,
        headers: {
          'WWW-Authenticate': 'Basic realm="Secure Area"',
        },
      });
    }

    const [username, password] = atob(basicAuth.split(' ')[1]).split(':');

    if (username !== 'admin' || password !== 'password') {
      return new NextResponse('Invalid credentials', { status: 401 });
    }
  }

  return NextResponse.next();
}

8. vercel.json

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "nextjs",
  "regions": [icn1],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "s-maxage=60, stale-while-revalidate"
        }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/old-blog/:slug",
      "destination": "/blog/:slug",
      "permanent": true
    }
  ]
}

정리 및 체크리스트

핵심 요약

Vercel: 프론트엔드 배포 플랫폼
즉시 배포: Git push로 자동
프리뷰: PR마다 프리뷰 URL
Edge Functions: 서버리스
Analytics: 성능 분석
글로벌 CDN: 빠른 속도

구현 체크리스트

같이 보면 좋은 글

Next.js App Router 가이드
AWS Lambda 완벽 가이드
Cloudflare Pages 가이드

이 글에서 다루는 키워드

Vercel, Deployment, Edge Functions, Analytics, Next.js, DevOps, Hosting

자주 묻는 질문 (FAQ)

Q. 무료로 사용할 수 있나요?

A. 네, Hobby 플랜이 무료입니다. 개인 프로젝트에 충분합니다.

Q. Next.js만 지원하나요?

A. 아니요, React, Vue, Svelte, Astro 등 대부분의 프레임워크를 지원합니다.

Q. AWS와 비교하면 어떤가요?

A. Vercel이 훨씬 간단하고 빠릅니다. AWS는 더 많은 제어권을 제공합니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 수많은 기업에서 안정적으로 사용하고 있습니다.