技能 编程开发 Vercel平台迁移深度指南

Vercel平台迁移深度指南

v20260423
vercel-migration-deep-dive
本指南提供了一份详细的应用程序迁移手册,指导用户如何将部署在Netlify、AWS、Cloudflare等主流平台上的应用,平稳、可靠地迁移到Vercel。内容涵盖了从配置映射、函数代码转换、环境变量配置,到分阶段上线(如绞杀象干模式)和DNS切换等所有关键步骤,确保迁移过程中的功能对齐和业务连续性。
获取技能
319 次下载
概览

Vercel Migration Deep Dive

Overview

Migrate applications to Vercel from Netlify, AWS (Lambda/CloudFront/S3), Cloudflare Workers, or traditional hosting. Covers configuration mapping, DNS cutover, feature parity validation, and incremental migration with the strangler fig pattern.

Current State

!vercel --version 2>/dev/null || echo 'Vercel CLI not installed'
!cat package.json 2>/dev/null | jq -r '.name // "no package.json"' 2>/dev/null || echo 'N/A'

Prerequisites

  • Access to current hosting platform
  • Git repository with application source
  • DNS management access for domain cutover
  • Vercel account (Pro recommended for production)

Instructions

Step 1: Configuration Mapping

From Netlify:

NetlifyVercel Equivalent
netlify.tomlvercel.json
_redirects / _headersvercel.json redirects/headers
Netlify Functions (netlify/functions/)API routes (api/)
Netlify Edge FunctionsEdge Middleware or Edge Functions
NETLIFY_ENVVERCEL_ENV
Deploy previewsPreview deployments (automatic)
Branch deploysBranch preview URLs
// Netlify _redirects → vercel.json
// FROM: /old-page /new-page 301
// TO:
{
  "redirects": [
    { "source": "/old-page", "destination": "/new-page", "permanent": true }
  ]
}

// Netlify _headers → vercel.json
// FROM: /* X-Frame-Options: DENY
// TO:
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "DENY" }
      ]
    }
  ]
}

From AWS (Lambda + CloudFront + S3):

AWSVercel Equivalent
Lambda functionsServerless Functions (api/)
Lambda@EdgeEdge Functions / Middleware
CloudFront distributionsAutomatic CDN
S3 static hostingpublic/ directory
API GatewayAutomatic routing
CloudFront behaviorsvercel.json rewrites
AWS SAM/CDKvercel.json
Secrets ManagerEnvironment Variables
// AWS Lambda handler → Vercel Function
// FROM:
export const handler = async (event) => {
  return { statusCode: 200, body: JSON.stringify({ hello: 'world' }) };
};

// TO:
import type { VercelRequest, VercelResponse } from '@vercel/node';
export default function handler(req: VercelRequest, res: VercelResponse) {
  res.status(200).json({ hello: 'world' });
}

From Cloudflare Workers/Pages:

CloudflareVercel Equivalent
WorkersEdge Functions
Pages FunctionsAPI routes
KVVercel KV or Edge Config
R2Vercel Blob
D1Vercel Postgres
wrangler.tomlvercel.json

Step 2: Migrate Functions

# Create Vercel project
vercel link

# Move function files to api/ directory
mkdir -p api
# Convert each function to Vercel format

# Install Vercel types
npm install --save-dev @vercel/node

Step 3: Migrate Environment Variables

# Export from current platform, add to Vercel
# Netlify:
netlify env:list --json | jq -r '.[] | "\(.key)=\(.values[0].value)"' > .env.migration

# Add each to Vercel with proper scoping
while IFS='=' read -r key value; do
  echo "$value" | vercel env add "$key" production preview development
done < .env.migration

# Verify
vercel env ls

Step 4: Incremental Migration (Strangler Fig)

Route traffic incrementally from old platform to Vercel:

// Phase 1: Route /api/* to Vercel, keep everything else on old platform
// On old platform, add a rewrite/proxy:
// /api/* → https://my-app.vercel.app/api/*

// Phase 2: Move static pages to Vercel
// Update DNS for staging subdomain first:
// staging.example.com → cname.vercel-dns.com

// Phase 3: Move production
// Update DNS A record: example.com → 76.76.21.21

Step 5: DNS Cutover

# Add domain to Vercel
vercel domains add example.com

# Verify domain ownership
vercel domains inspect example.com

# DNS records to set:
# Apex domain (example.com):
#   A → 76.76.21.21
#
# Subdomain (www.example.com):
#   CNAME → cname.vercel-dns.com
#
# Or transfer nameservers to Vercel:
#   NS → ns1.vercel-dns.com
#   NS → ns2.vercel-dns.com

# Wait for DNS propagation (check with dig)
dig example.com A +short
# Should return 76.76.21.21

# SSL certificate auto-provisions after DNS verification

Step 6: Validate Feature Parity

# Compare old and new deployments
# Test all routes
for path in "/" "/about" "/api/health" "/api/users"; do
  echo "=== $path ==="
  echo "Old:"
  curl -sI "https://old.example.com${path}" | head -3
  echo "New:"
  curl -sI "https://my-app.vercel.app${path}" | head -3
done

# Compare headers
diff <(curl -sI https://old.example.com/ | sort) \
     <(curl -sI https://my-app.vercel.app/ | sort)

# Check redirects still work
curl -sI https://my-app.vercel.app/old-page | grep Location

Migration Checklist

StepValidated
All functions converted to Vercel formatRequired
Environment variables migrated with correct scopingRequired
Redirects and headers ported to vercel.jsonRequired
DNS configured and SSL provisionedRequired
Preview deployment tested end-to-endRequired
Performance baseline compared (old vs new)Recommended
Monitoring and alerting configuredRequired
Rollback plan documented (DNS revert)Required
Old platform kept running during validation periodRecommended

Output

  • Configuration mapped from source platform to Vercel
  • Functions converted to Vercel serverless/edge format
  • Environment variables migrated with proper scoping
  • DNS cutover completed with SSL auto-provisioning
  • Feature parity validated

Error Handling

ErrorCauseSolution
Function format mismatchAWS/Netlify handler signatureConvert to (req, res) or Web API format
Missing env var after migrationNot added to correct environmentRe-add with vercel env add
DNS not resolvingPropagation delayWait 24-48 hours, check with dig
SSL not provisioningDNS records incorrectVerify A/CNAME records match Vercel's requirements
404 on migrated routesDifferent path conventionsAdd rewrites in vercel.json

Resources

Next Steps

For advanced troubleshooting, see vercel-advanced-troubleshooting.

信息
分类 编程开发
名称 vercel-migration-deep-dive
版本 v20260423
大小 5.56KB
更新时间 2026-09-06
语言