JAICYLAB
委托项目
VERCEL

Vercel
部署与域名接入

使用 Next.js 团队打造的 Vercel 部署前端的指南。 涵盖 GitHub 接入、环境变量、自定义域名、Preview 部署与 Functions,聚焦实战场景。

打开 Vercel 控制台查看步骤

Hobby 套餐

个人非商用免费

Pro 套餐

$20/月/用户

准备条件

GitHub 账号

Overview

开始前请确认

Hobby 套餐禁止商业用途。公司项目需使用 Pro 及以上套餐,否则违反 ToS。自定义域名在免费套餐也可使用,但团队协作、分析与安全功能需要 Pro 起。

GitHub 仓库

要部署的项目仓库。

域名注册商

Whois、Gabia、Cloudflare 等。

环境变量隔离

.env.local 禁止提交。

区域选择

Functions 默认 icn1(首尔)。

Step by Step

分步指南

01

SIGNUP

注册账号

在 vercel.com 注册。

  • 推荐 Sign Up with GitHub(衔接最顺畅)
  • 也支持 GitLab、Bitbucket、邮箱
  • 自动进入 Hobby 套餐
  • 需要团队时创建组织
02

CONNECT

连接 Git 仓库

将 GitHub 与 Vercel 对接。

  • 点击 Import Git Repository
  • 安装 Vercel GitHub App(全部或指定仓库)
  • 选择仓库 → 自动识别框架
  • 支持 Next.js / Nuxt / Vite / SvelteKit 等主流框架
03

ENV

配置环境变量

部署前登记必备的环境变量。

  • Settings > Environment Variables
  • 三套环境: Production / Preview / Development
  • NEXT_PUBLIC_ 前缀会进入客户端打包(敏感信息禁用)
  • 仅服务端变量不加前缀(DATABASE_URL、API_SECRET 等)
  • 使用 vercel env pull 同步到本地 .env.local
04

DEPLOY

首次部署与 Preview URL

推送 main → 自动 Production 部署。

  • 推送 main(或 Production Branch)时自动部署
  • 其他分支与 PR 自动生成 Preview URL
  • Preview URL: https://${项目}-${分支}-${团队}.vercel.app
  • 部署状态会自动评论到 GitHub PR
  • 也可使用 vercel CLI 手动部署
05

DOMAIN

接入自定义域名

将已购域名绑定到项目。

  • Project Settings > Domains
  • 输入域名 → Vercel 给出所需 DNS 记录
  • apex 域名: A 记录 76.76.21.21
  • www 子域名: CNAME cname.vercel-dns.com
  • 或将 NS 切换到 Vercel(ns1.vercel-dns.com / ns2.vercel-dns.com)
  • SSL 证书(Let's Encrypt)自动签发与续期
06

SECURITY

部署保护(可选)

防止预览 URL 被外部访问。

  • Settings > Deployment Protection
  • Vercel Authentication(仅团队成员可访问)
  • Password Protection(Pro 起)
  • 使用 Bypass Token 放行 E2E 测试与 Agent
  • 适合发布前的 staging 审阅
07

FUNCTIONS

Functions 与区域配置

Serverless/Edge Functions 部署设置。

  • 默认区域: icn1(首尔) — 推荐给面向韩国的服务
  • 在 next.config.js 的 runtime export 或 vercel.json 中配置
  • Fluid Compute: 针对长 I/O(LLM、API)优化
  • 可调整 maxDuration / memory / CPU
  • Edge Runtime 对部分 Node.js API 不兼容 — 需核查
08

ANALYTICS

分析与监控

启用访客与性能指标。

  • Web Analytics: 访客与 PV(无 Cookie)
  • Speed Insights: 真实用户 Core Web Vitals
  • 在 Vercel Logs 查看 Functions 日志
  • 通过 OpenTelemetry 接入外部 APM
  • 两者在 Hobby 也有免费额度

Pitfalls

常见卡点

Hobby 用于商业场景

用 Hobby 运营公司官网或付费服务违反 ToS,至少升级到 Pro($20/月)。

滥用 NEXT_PUBLIC_ 前缀

加了此前缀就会打进浏览器包。DATABASE_URL、API_SECRET 绝不能加 NEXT_PUBLIC_。

Edge Runtime 兼容性

pg、bcrypt、fs 等仅 Node.js 的模块在 Edge 无法运行,请改用 Node.js runtime 或 serverless。

误提交 .env.local

即便 .gitignore 已配置,一旦提交就会留在历史中,需立即轮换密钥。

切换 Production Branch

将 Production Branch 从 main 改成别的分支,域名就会指向该分支的部署,请谨慎操作。

Resources

官方链接

Vercel Dashboard

项目管理

Pricing

Hobby / Pro / Enterprise

Custom Domains

域名接入指南

Environment Variables

环境变量管理

Functions

Serverless · Edge · Fluid

AI Gateway

模型路由网关

嫌配置麻烦? 可以全权代办

JAICYLAB 承接的项目,从开发者账号配置到上线与运营全部包含在内。

委托代办 更多指南