把真实域名指到 Vercel 部署之前过一遍这 10 项。每项都是哪个独立开发者被坑过的——每项都不超过 5 分钟能检查完。
问题背景
Vercel 默认值跑起来够用,但上线前是把东西收紧的时候:主域名、环境变量、分析、跳转、应急方案。本清单按执行顺序写,从上到下做。
实操步骤
- 确认 base URL。 Astro 在
astro.config.mjs里site:;Next.js 在app/layout.tsx里metadataBase。必须是自定义域名,不能是*.vercel.app:
// astro.config.mjs
export default defineConfig({
site: 'https://yourdomain.com',
trailingSlash: 'always',
});
// app/layout.tsx (Next.js)
import type { Metadata } from 'next';
export const metadata: Metadata = {
metadataBase: new URL('https://yourdomain.com'),
alternates: { canonical: '/' },
};
- 环境变量审计。 列出 Production 变量并 grep 检查是否泄漏到客户端:
vercel env ls production
# 确认真正的 secret 不在公开前缀变量里
vercel env ls production | grep -E 'NEXT_PUBLIC_|PUBLIC_'
# 在这里看到 STRIPE_SECRET / API_KEY 就是漏了
- 两个域都加上,一个做主。
vercel.json把非主域 redirect 掉:
{
"redirects": [
{ "source": "/:path*", "has": [{ "type": "host", "value": "www.yourdomain.com" }],
"destination": "https://yourdomain.com/:path*", "permanent": true }
]
}
apex 做主时 DNS:
Type Name Value
A @ 76.76.21.21
CNAME www cname.vercel-dns.com
- 两个主机名都验 SSL:
curl -sI https://yourdomain.com | head -1 # HTTP/2 200
curl -sI https://www.yourdomain.com | head -3 # HTTP/2 308 + location: https://yourdomain.com/
- 开 Speed Insights 和 Web Analytics。 Project → Analytics → Enable;或者用 SDK 拿服务端数据:
npm install @vercel/analytics @vercel/speed-insights
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';
export default function RootLayout({ children }) {
return <html><body>{children}<Analytics /><SpeedInsights /></body></html>;
}
- 线上 URL 跑 Lighthouse。 Performance 和 Best Practices > 90:
npx lighthouse https://yourdomain.com/ \
--only-categories=performance,seo,best-practices \
--chrome-flags="--headless" --quiet
- 主域名提交到 Search Console。 Domain property 最好——DNS TXT 验证比 HTML 标签稳:
Search Console → Add property → Domain → yourdomain.com
在 apex 加 DNS TXT 记录:
Name: @ Value: google-site-verification=<token>
再 Sitemaps → Add → https://yourdomain.com/sitemap.xml
- 扫线上 HTML 有没有漏出 vercel.app URL:
curl -s https://yourdomain.com/ | grep -iE 'vercel\.app|canonical|og:url' | head
# canonical/og:url 必须是 yourdomain.com,绝不能是 *.vercel.app
- 回滚提前演练:
vercel ls
# READY Production https://yourdomain.com abc123 当前
# READY Preview https://... def456 回滚目标
vercel promote https://yourdomain-def456.vercel.app # 提升到 Production
# 控制台:Deployments → ... → Promote to Production
- 设花费上限。 Settings → Billing → Spend Management → 开启。配硬上限,50% 和 90% 各加告警。
容易踩的坑
- canonical / sitemap / social meta 里还留着
*.vercel.app。 - sitemap 交到了非主域——Search Console 当成两个独立 property。
- 周五下午上线——回滚演练放周一更稳。
- 没审环境变量,上线后第一波流量到处 “undefined”。
- 商用项目还指望 Hobby 的免费额度——该上 Pro 就上。
这篇适合谁
每一个在 Vercel 上线内容站的独立开发者。
这篇不适合谁
后端 / 数据库集成复杂的应用,需要在这份清单之外加更多检查。
FAQ
- 整个清单要多久?: 第一次 30-45 分钟,有模板之后第二个项目 10 分钟。
- Search Console 验证有什么特别的吗?: 加 HTML meta 或 DNS TXT,Vercel 都支持。DNS 那种更稳。
- 上线后发现 404 怎么办?: 查跳转和
cleanUrls/ trailing slash 的组合关系。严重的话直接 Promote 之前的部署。 - 要上监控吗?: 至少接一个免费 uptime 监控(UptimeRobot / BetterStack 免费档)每 5 分钟打一次
/。