第五章 | 让产品跑起来：API接入与全球部署上线——大模型接口 + Vercel + 域名备案

产品写完了，代码跑起来了，但离真正被用户使用还有最后一段路。这一章把本地开发环境里的东西推到线上，让陌生人也能访问你的产品。路线很明确：接上大模型API、用GitHub管代码、在Vercel上一键部署、配好域名和备案、开启HTTPS和CDN。每一步都有坑，但跨过去之后，你的产品就不再是笔记本里的demo了。

5.1 大模型API接入

为什么需要API

本地跑大模型需要GPU、要调参、要维护模型版本，对个人开发者不现实。API把复杂度交给供应商，你只需要发请求、收响应。产品里最常见的用法是把用户输入传给模型，拿到结果后渲染到页面上。

主流API提供商对比

提供商	代表模型	计费方式	延迟	中文支持	适用场景
OpenAI	GPT-4o / GPT-4o-mini	按token计费	中	好	通用对话、代码生成
Anthropic	Claude Sonnet / Opus	按token计费	中	好	长上下文、复杂推理
Google	Gemini Pro / Ultra	按token计费	低	好	多模态、Google生态
智谱AI	GLM-4	按token计费	低	极好	国内合规、中文优先
通义千问	Qwen-Max	按token计费	低	极好	国内合规、阿里生态
月之暗面	Kimi	按token计费	低	极好	长文本处理

选型原则：优先看延迟和成本，其次看模型能力。GPT-4o-mini 和 Claude Sonnet 在大多数场景下性价比最高。如果面向国内用户且涉及备案，建议同时准备国内模型作为备选。

API Key的管理

不要硬编码在代码里。以下做法按优先级排列：

• 环境变量：.env.local 文件加入 .gitignore，部署平台通过控制台注入
• 密钥轮换：定期更换API Key，泄露后立即失效
• 权限隔离：测试用Key限制额度，生产用Key单独管理
• 不要分享Key：通过链接分享功能时，Key不能出现在URL参数里

# .env.local（绝不提交到Git）
OPENAI_API_KEY=sk-xxx
ANTHROPIC_API_KEY=sk-ant-xxx
NEXT_PUBLIC_APP_NAME="我的产品"

Next.js 项目中，以 NEXT_PUBLIC_ 开头的变量会编译到客户端代码中，只能放不涉及敏感信息的内容。API Key 绝对不能加这个前缀。

从测试到生产：API调用的最佳实践

• 超时设置：大模型响应可能较慢，前端设置 30 秒超时，后端设置 60 秒
• 重试机制：网络抖动导致请求失败时自动重试 2-3 次，用指数退避间隔
• 错误降级：API 不可用时显示友好提示，而不是白屏或崩溃
• 流式输出：用 SSE（Server-Sent Events）逐块返回响应，用户体验远好于等待全部结果
• 输入校验：在发给模型之前清洗用户输入，防止注入攻击和超长请求

成本控制

Token 计费看起来便宜，用量上来后可能超出预期。几个实用的省钱策略：

• 模型分层：简单问题用小模型（GPT-4o-mini / Claude Haiku），复杂推理用大模型
• 响应缓存：相同输入直接返回缓存结果，Redis 或内存缓存都可以
• 请求合并：批量处理用户请求，减少 API 调用次数
• 用量监控：设置月度预算告警，超阈值自动通知
• 清理无用输出：只保留需要的字段，避免存储大量无用数据

5.2 GitHub项目管理

仓库初始化

新项目的第一个 commit 就决定了后续协作的效率。初始化时做好这几件事：

• README.md：一句话说清产品是什么，放一张截图或 GIF，列出核心技术栈
• .gitignore：Next.js 项目用 vercel/next.js 的 gitignore 模板，确保 node_modules、.next、.env 不被提交
• LICENSE：个人项目建议选 MIT License，简单明了，允许他人自由使用
• package.json 的 description：填一句能让人搜索到的描述

分支策略

个人项目不需要复杂的 GitFlow。推荐简化版：

• main：生产环境代码，保持稳定，只接受合并
• develop：集成开发分支，日常开发在这里进行
• feature/：新功能分支，从 develop 切出，完成后合并回 develop
• hotfix/：紧急修复分支，从 main 切出，修完同时合入 main 和 develop

分支命名用 feature/ 或 fix/ 前缀，后面跟简短描述：feature/add-login-page、fix/api-timeout。

AI协作下的Git工作流

用 Claude 等 AI 工具写代码时，提交信息的质量直接影响后续回溯。好的习惯：

• 每次有意义的改动都提交，不要攒一大坨再一次性提交
• commit message 用英文，格式为 type: short description，例如 feat: add user authentication page
• AI 生成的代码也要 review，确认逻辑正确后再 commit
• 善用 staged commit：git add -p 只提交相关的改动，不要把调试代码也提交进去

Pull Request流程

即使是一个人开发，PR 流程也有价值——它强制你在合并前审视改动。

• 用 PR 做自审：合并前读一遍 diff，确认没有遗漏
• 自动化检查：GitHub Actions 配置 lint 和 test 步骤，不通过就不能合并
• PR 模板：在 .github/PULL_REQUEST_TEMPLATE.md 里写明改了什么、测试了没有、有没有依赖变更
• 自动关闭 Issue：PR 描述里写 Closes #123，合并后自动关闭对应 Issue

项目看板

GitHub Issues + Projects 足够管理个人项目的进度：

• Issues：每个功能或 bug 开一个 Issue，方便追踪
• Projects：用 Kanban 板管理任务状态（To Do / In Progress / Done）
• Milestones：按版本划分里程碑，比如 v0.1、v1.0
• Labels：给 Issue 打标签分类（bug、feature、documentation、good-first-issue）

5.3 Vercel部署：零配置上线

为什么选Vercel

Vercel 对 Next.js 的支持是原生的。不用配 Docker、不用管 Node 版本、不用自己搭 CI/CD。代码推送到 GitHub，Vercel 自动检测变化、安装依赖、构建、部署。从提交到上线通常在一两分钟内完成。

其他可选方案：

• Netlify：类似 Vercel，但对 Next.js 的动态特性支持不如 Vercel 完善
• Cloudflare Pages：免费额度大，边缘网络强，但 Next.js 集成需要额外配置
• Railway / Render：适合需要数据库和后端服务的场景

对于纯 Next.js 前端项目，Vercel 是最省心的选择。

部署流程

第一步：在 vercel.com 注册账号，用 GitHub 登录。

第二步：Import 你的 GitHub 仓库。Vercel 会自动检测项目类型。如果是 Next.js，它会识别 package.json 中的 next 脚本，自动设置构建命令为 next build。

第三步：配置环境变量。在 Vercel 控制台的 Project Settings > Environment Variables 中添加所有需要的变量。注意区分 Development、Preview、Production 三种环境。

第四步：点击 Deploy。首次部署完成后，你会得到一个 your-project.vercel.app 的默认域名。

整个过程不需要写一行配置文件。Vercel 的 vercel.json 可以覆盖默认行为，但绝大多数项目用不到。

环境变量配置

环境变量分三个环境：

环境	触发条件	用途
Development	本地运行 npm run dev	开发调试
Preview	PR 预览部署	测试验证
Production	main 分支合并	正式环境

每个环境的变量可以不同。比如 Preview 环境用测试 API Key，Production 环境用正式 Key。在 Vercel 控制台分别配置即可。

预览部署

这是 Vercel 最实用的功能之一。每个 PR 都会自动生成一个预览链接，比如 preview-abc123.your-project.vercel.app。你可以在这个链接里测试新功能，分享给同事或用户收集反馈，确认没问题后再合并到 main。

边缘函数

Vercel 支持 Edge Functions，代码运行在全球边缘节点上，比传统云服务器延迟更低。Next.js 的 API Routes 可以标记为 Edge Runtime：

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

export async function GET() {
  return Response.json({ message: 'Hello from the edge!' });
}

如果你的用户分布在全球各地，边缘函数能显著改善响应速度。

5.4 域名与DNS管理

域名选择

好域名的标准就三条：好记、好拼、相关。

• 长度越短越好，不超过 15 个字符
• 避免连字符和数字，容易口口相传出错
• 优先选 .com，国内用户也可以用 .cn
• 如果目标用户在国内，考虑 .cn 或 .com.cn，备案更方便

DNS配置

部署到 Vercel 后，需要在域名注册商的 DNS 控制台添加记录：

记录类型	主机记录	记录值	说明
CNAME	www	your-project.vercel.app	绑定 www 子域名
CNAME	@	cname.vercel-dns.com	绑定根域名（必须用 CNAME 而非 A 记录）
AAAA	@	Vercel 提供的 IPv6 地址	如果需要 IPv6 支持

Vercel 的控制台会告诉你具体的记录值。添加 DNS 记录后，全球生效通常需要几分钟到几小时。

国内域名注册商对比

注册商	价格（.com）	备案支持	界面友好度	备注
阿里云	~55元/年	原生支持	好	备案系统完善，推荐
腾讯云	~50元/年	原生支持	好	备案系统和微信打通
GoDaddy	~80元/年	不支持	一般	续费价格较高，不建议国内使用
Namecheap	~60元/年	不支持	好	隐私保护免费，但不支持备案

国内注册商的优势在于备案系统集成。在阿里云买域名，可以在同一个控制台提交备案申请，不用跳转。

域名转移和续费的注意事项

• 续费提前：域名过期后会进入赎回期，费用翻倍。设置自动续费
• WHOIS 信息：填写真实有效的联系人信息，备案时需要核对
• 域名锁定：开启 registrar lock 防止未经授权的转移
• 隐私保护：.com 等后缀默认公开 WHOIS 信息，可以用隐私保护服务隐藏

多域名管理

一个产品可能需要多个域名：

• 主域名：yourproduct.com，用于生产环境
• 测试域名：test.yourproduct.com，用于内部测试
• 备用域名：如果主域名备案被卡，先用备用域名上线

Vercel 的 Domain Settings 可以添加多个域名，并设置哪个是主域名（带 HTTPS 锁标志的那个）。

5.5 ICP备案：国内上线的必经之路

什么是ICP备案

ICP（Internet Content Provider）备案是中国工信部要求的制度。在中国大陆境内提供网站服务，必须在网站服务器所在地通信管理局备案。没有备案的域名，国内运营商无法解析，网站对大陆用户不可访问。

简单来说：用国内服务器 + 国内域名 = 必须备案。用海外服务器 + 海外域名 = 不需要备案，但大陆访问速度可能不稳定。

备案流程

备案流程现在基本全线上化：

1. 准备材料：个人备案需要身份证正反面照片、手机号、电子邮箱；企业备案还需要营业执照
2. 提交申请：在域名注册商控制台（阿里云/腾讯云）找到备案入口，填写信息
3. 人脸识别：个人备案需要完成人脸识别验证
4. 管局审核：提交后由各省通信管理局审核，时效 5-20 个工作日不等
5. 获取备案号：审核通过后会在页面底部展示备案号，需要添加到网站 footer

备案时效和常见问题

省份	平均时效	备注
北京	7-15 工作日	审核严格，材料要求高
上海	5-10 工作日	效率较高
广东	5-10 工作日	量大但流程成熟
浙江	7-15 工作日	电商相关备案较多

常见问题：

• 材料不合格：照片模糊、信息不一致会被退回。提交前仔细检查
• 新增域名需重新备案：已有备案主体下新增域名，走新增接入流程，通常 3-5 个工作日
• 备案期间网站不可访问：备案审核中，域名不能解析到国内服务器

备案期间的替代方案

备案没下来之前，可以用这些方式先上线：

• 海外服务器 + CDN：用 Cloudflare 等 CDN 加速，服务器放在香港或新加坡
• Vercel 默认域名：your-project.vercel.app 不需要备案就能访问
• 小程序/H5：如果产品形态允许，先做小程序绕过域名备案

备案后的变更和注销

• 信息变更：手机号、邮箱等信息变更要及时更新，否则影响备案状态
• 注销备案：不再使用的网站可以申请注销备案，释放备案名额
• 跨省迁移：服务器从一家云厂商换到另一家，需要做变更接入

5.6 HTTPS与CDN

SSL证书

HTTPS 现在是标配，不是可选项。Google 会给没有 HTTPS 的网站标记"不安全"，浏览器也会拦截混合内容。

证书类型	价格	有效期	适用场景
Let's Encrypt	免费	90天	个人项目、初创产品
DV 付费证书	几百元/年	1年	商业项目
OV/EV 证书	几千元/年	1年	金融、电商等高信任场景

个人项目用 Let's Encrypt 就够了。Vercel 自动为所有域名提供免费的 SSL 证书，不需要手动配置。

HTTPS配置

Vercel 上 HTTPS 是全自动的：

• 绑定自定义域名后，Vercel 自动申请和续签 SSL 证书
• 所有 HTTP 请求自动 301 重定向到 HTTPS
• 支持 HSTS（HTTP Strict Transport Security），强制浏览器走 HTTPS

如果你自建服务器，用 Certbot 配置 Let's Encrypt：

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

CDN加速

CDN（内容分发网络）把静态资源缓存在全球各地的节点上，用户从最近的节点获取内容，减少延迟。

Vercel 自带全球 CDN，不需要额外配置。静态文件（HTML、CSS、JS、图片）自动分发到边缘节点。

自建场景下，国内常用 CDN 服务商：

• Cloudflare：免费额度大，全球节点多，支持 DDoS 防护
• 阿里云 CDN：国内节点密集，和备案系统集成
• 腾讯云 CDN：和微信小程序生态打通方便

性能优化

上线前做几项基础优化，效果立竿见影：

• 图片压缩：用 WebP 格式替代 JPEG/PNG，体积减少 30-70%
• 代码分割：Next.js 自动按路由分割代码，不需要额外配置
• 懒加载：非首屏的图片和内容用 loading="lazy"
• 字体优化：用 font-display: swap 避免文字加载时的闪烁
• Gzip/Brotli 压缩：Vercel 自动启用，不需要手动配置

监控和告警

上线不等于不管了。你需要知道产品是否正常运行：

• Uptime Monitoring：UptimeRobot（免费 50 个监控点）或 Better Stack 定期检查站点可用性
• Error Tracking：Sentry 捕获前端和后端错误，实时推送告警
• 日志分析：Vercel Analytics 提供页面访问量、用户分布、性能数据
• API 监控：Datadog 或 New Relic 监控 API 响应时间和错误率

5.7 从本地到全球的完整部署流程

部署检查清单

上线前逐项确认：

• [ ] 环境变量已配置到生产环境（API Key、数据库连接等）
• [ ] 所有敏感信息已从代码中移除，不在 Git 历史中出现
• [ ] 自定义域名已添加，DNS 记录已生效
• [ ] HTTPS 已启用，HTTP 自动跳转到 HTTPS
• [ ] 测试域名和预览部署正常工作
• [ ] API 接口有超时和重试机制
• [ ] 错误页面（404、500）已设计
• [ ] 性能优化已完成（图片压缩、代码分割）
• [ ] 监控和告警已配置
• [ ] 备案已完成（如使用国内服务器）

灰度发布策略

不要一次性把所有流量切到新版本。分阶段发布降低风险：

1. 第一阶段：自己访问，确认基本功能正常
2. 第二阶段：邀请 10-20 个测试用户，收集反馈
3. 第三阶段：开放给 10% 的生产流量，观察错误率和性能指标
4. 第四阶段：全量发布，关闭旧版本

Vercel 的 Preview 部署天然支持灰度——每个 PR 的预览链接就是一个独立的版本。

回滚方案

发布后发现问题怎么办？快速回滚：

• Vercel：在 Deployments 页面点击任意历史部署的 "Redeploy"，一键回滚
• GitHub：git revert 回退到上一个稳定 commit，推送到 main 分支触发重新部署
• 数据库：上线前备份数据，出问题时可以恢复

回滚越快越好。准备一个"紧急回滚按钮"——在 Vercel 控制台置顶最近三个稳定版本的链接。

生产环境监控

上线后持续关注的指标：

指标	工具	关注点
页面加载时间	Vercel Analytics / Lighthouse	首屏加载 < 3 秒
错误率	Sentry	每日错误数趋势
API 响应时间	Datadog / New Relic	p95 延迟 < 500ms
站点可用性	UptimeRobot	99.9% 以上可用
用户增长	Google Analytics	日活、留存率

实际案例：一个 AI 写作工具的完整上线

假设你要上线一个 AI 写作辅助工具，以下是从零到上线的完整时间线：

Day 1-3：本地开发

• 用 Next.js + Claude 搭建项目，完成核心功能
• 本地测试 API 调用，确认响应正常
• 写好 README，初始化 Git 仓库

Day 4：接入 GitHub + Vercel

• 创建 GitHub 仓库，推送代码
• 在 Vercel 导入仓库，配置环境变量
• 首次部署成功，获得 my-writer.vercel.app 域名

Day 5：购买域名 + DNS

• 在阿里云购买 aiwriter.com，花费 55 元
• 在 DNS 控制台添加 CNAME 记录指向 Vercel
• 在 Vercel 绑定自定义域名，自动配置 HTTPS

Day 6-8：备案

• 在阿里云提交个人 ICP 备案
• 上传身份证照片，完成人脸识别
• 等待审核期间，先用 aiwriter.vercel.app 对外分享

Day 9-14：测试迭代

• 通过 Vercel Preview 部署邀请 10 位朋友测试
• 根据反馈修复 Bug，优化 UI
• 配置 Sentry 错误追踪和 UptimeRobot 监控

Day 15：备案通过

• 收到备案通过短信，在页面底部添加备案号
• 全量发布，开始推广

从第一天写代码到正式上线，大约两周时间。其中备案占了最大头的时间，其他环节都很快。

---

这一章覆盖了产品上线的所有关键环节。API 接入让产品有了智能，GitHub 让协作有章可循，Vercel 让部署变得简单，域名和备案解决了合规问题，HTTPS 和 CDN 保障了安全和性能。把这些串起来，你的产品就从本地文件变成了真正可以使用的互联网服务。

下一章，我们聊聊怎么让用户找到你——产品推广和用户增长。