首页/最终部署

大功告成：把你的完整产品推上线

交付关卡

20 分钟

你做到了。

从一个空白的文件夹，到现在这个有前端、有后端、有数据库、有登录、有 AI、有支付的完整产品。

最后一步，把它推上线。

生产环境 vs 测试环境

在整个课程里，你一直在"测试模式"下工作：

Stripe 用的是测试 Key，支付不会真的扣钱
Supabase 用的是开发数据库
AI API 用的是个人 Key，没有限流

上线之前，你需要决定：这次部署是"展示用"还是"真正运营"？

展示用（推荐先这样做）：继续用测试 Key，网站功能完整，但支付不会真的收钱。适合放在简历里展示技术能力。

真正运营：换成生产 Key，需要 Stripe 完成账号验证（需要提供身份证明），支付会真的扣钱。等你准备好接受真实用户时再做这一步。

生产环境变量清单

这是你整个课程积累下来的所有环境变量：

| 变量名 | 来源 | 说明 | |--------|------|------| | NEXT_PUBLIC_SUPABASE_URL | Supabase 项目设置 | 数据库连接 | | NEXT_PUBLIC_SUPABASE_ANON_KEY | Supabase 项目设置 | 数据库公开 Key | | RESEND_API_KEY | resend.com | 邮件发送 | | OPENAI_API_KEY 或 DEEPSEEK_API_KEY | AI 服务商 | AI 对话 | | STRIPE_SECRET_KEY | Stripe Dashboard | 支付（测试用 sk_test_） | | NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY | Stripe Dashboard | 支付（测试用 pk_test_） | | STRIPE_WEBHOOK_SECRET | Stripe Webhook 设置 | Webhook 验证（如果配置了） |

第一步：配置所有生产环境变量

打开 Vercel 项目设置，在 "Environment Variables" 里添加所有新增的变量：

打开 vercel.com，进入你的项目
点击 "Settings" → "Environment Variables"
逐一添加上面表格里的所有变量
Environment 选择 "Production"

⚠️ 注意：如果你用的是 Stripe 测试 Key（sk_test_ 开头），支付功能在线上也是测试模式，不会真的收钱。这对于展示用途完全够了。

第二步：更新 Stripe 支付链接

如果你用了生产环境的 Stripe Key，需要在 Stripe Dashboard 里确认产品和价格已创建（测试模式和生产模式的产品是分开的）。

对 AI 说：

帮我检查 Stripe 相关的代码，确认：
1. 价格 ID 是从环境变量读取的，而不是写死在代码里
2. success_url 和 cancel_url 使用的是生产环境的域名（从环境变量读取）
3. 如果配置了 Webhook，确认 Webhook Secret 也是从环境变量读取的

第三步：推送并验证

git add .
git commit -m "feat: 用户登录、AI对话、Stripe支付"
git push

等 Vercel 部署完成（通常 1-2 分钟），逐一验证：

访问网站，右下角有 AI 对话按钮，能正常对话
点击"解锁完整简历"，跳转到 Stripe 支付页面
访问 /admin/login，用你的账号登录
登录后可以进入后台管理，退出登录后被重定向到登录页

第四步：配置自定义域名（可选）

xxx.vercel.app 的域名可以用，但如果你有自己的域名，可以绑定上去：

在 Vercel 项目设置里点击 "Domains"
输入你的域名，点击 "Add"
按照提示在你的域名服务商（阿里云、腾讯云等）添加 DNS 记录
等待 DNS 生效（通常 5-30 分钟）

域名推荐：.com 最通用，.dev 适合开发者，.io 适合科技产品。国内购买推荐阿里云或腾讯云，价格约 ¥50-100/年。

上线后的维护

网站上线不是终点，还需要定期维护：

监控：Vercel 提供基础的访问统计。如果想要更详细的数据，可以接入 Google Analytics 或 Plausible。

Supabase 活跃：免费计划的项目超过 7 天不活跃会被暂停。定期访问你的网站，或者升级到 Pro 计划。

API 费用：定期检查 AI API 和 Stripe 的费用，确认没有异常消耗。

更新内容：通过后台管理页面更新作品，不需要改代码。

通关条件

完成以下三步即可通关：

代码已推送，Vercel 部署成功（没有报错）
线上 AI 对话功能正常（能收到回复）
线上支付流程可以跳转到 Stripe 页面

你完成了整个课程

回头看看你走过的路：

序章：打开终端，运行第一行代码，把网站部署到互联网

第一章：做出第一个真正属于你的网站，有首页、作品页、关于页

第二章：用 GitHub + Vercel 建立专业的开发工作流，每次改动自动部署

第三章：暗色模式、实时搜索、联系表单、响应式适配——完整的交互体验

第四章：API 路由、数据库、后台管理、访问统计——真正的全栈应用

第五章：用户登录、AI 对话、在线支付——一个可以运营的产品

你没有学过任何编程语言。你只是知道自己想要什么，然后让 AI 帮你实现了。

这就是 2025 年的超能力。

接下来可以做什么？

课程结束了，但你的学习才刚开始。一些方向供参考：

深入某个技术方向：如果你对某个部分特别感兴趣（比如数据库设计、AI 应用、支付系统），可以深入学习。

做一个真正的产品：用这门课学到的技能，做一个解决真实问题的产品。哪怕只有 10 个用户，也比做练习项目学到的多。

参与开源项目：在 GitHub 上找一个你感兴趣的开源项目，提交一个小的改进。这是快速提升技术能力的好方法。

分享你的作品：把你的作品集链接发到社交媒体、技术社区。你会收到反馈，也可能遇到合作机会。

最重要的是：继续做东西。每做一个项目，你就会学到新东西，遇到新问题，找到新解法。这个循环本身就是成长。