核心结论：上线收款要先跑通最小闭环：代码托管、线上访问、数据库、登录、支付沙盒、域名和环境变量。商业验证阶段优先稳定和可追踪，后续再优化成本与架构。
适用时机：本地 Demo 已经能跑，准备让其他人访问、登录、保存数据或测试付款。
一、上线前准备
| 准备项 | 说明 | 负责人 |
|---|---|---|
| 代码仓库 | GitHub 仓库、README、启动命令、依赖版本 | 开发 |
| 部署平台 | Vercel 项目或其他静态/全栈部署平台 | 开发 |
| 数据库 | Supabase 项目、表结构、RLS 或访问策略 | 开发 |
| 登录方式 | Google、GitHub、邮箱验证码或匿名试用 | 产品 + 开发 |
| 支付方式 | Stripe、Paddle、支付宝生态能力或其他服务 | 商业 + 开发 |
| 域名 | 主域名、子域名、DNS 托管和证书 | 运营 + 开发 |
| 隐私与条款 | 隐私政策、服务条款、退款说明和联系方式 | 运营 |
- 01GitHub
- 02Vercel
- 03线上网址
- 04登录
- 05数据库
- 06支付沙盒
- 07订单记录
- 08域名和 DNS
二、标准上线流程
1. 本地运行
npm install
npm run dev
npm run build本地页面能打开。
核心功能能完成一次输入和输出。
控制台没有阻断性错误。
移动端宽度下没有横向滚动。
2. 上传代码到 GitHub
| 动作 | 检查点 |
|---|---|
| 初始化仓库 | 确认没有把 .env、密钥、数据库密码提交上去 |
| 写 README | 说明启动命令、环境变量、主要页面和部署地址 |
| 提交代码 | 提交信息写清本次改动目的 |
| 设置分支 | main 或 production 分支对应正式部署 |
3. Vercel 部署
- 登录 Vercel，导入 GitHub 仓库。
- 确认 framework、build command、output directory。
- 配置环境变量，包括数据库、模型、支付、登录回调地址。
- 部署后打开 preview URL，检查首屏、API 和静态资源。
- 把 production URL 写入 README 和项目记录表。
4. Supabase 数据库
| 表 | 字段建议 | 用途 |
|---|---|---|
| users | id、email、name、created_at、plan | 用户和订阅状态 |
| projects | id、user_id、title、status、payload | 用户创建的项目或任务 |
| feedback | id、user_id、rating、comment、source | 收集试用反馈 |
| orders | id、user_id、provider、amount、status | 记录支付事件 |
安全提醒：生产库必须检查 Row Level Security 或后端访问策略。不要把 service role key 放在前端。
5. 登录配置
| 登录方式 | 适合场景 | 注意事项 |
|---|---|---|
| Google OAuth | 海外用户、工具站、SaaS | 回调 URL 要同时配置 preview 和 production |
| GitHub OAuth | 开发者工具、技术用户 | 适合黑客松和开发者项目 |
| Email OTP | B2B、低频工具 | 需要配置发信域名和邮件服务 |
| 匿名试用 | Demo Day 展示 | 适合降低试用门槛，后续再引导注册 |
6. 支付配置
| 步骤 | 要点 | 验收 |
|---|---|---|
| 选择支付服务 | 根据国家、品类、合规风险和结算需求选择 | 能创建产品和价格 |
| 接入沙盒 | 使用 test key 和测试卡号 | 能生成测试订单 |
| 配置 webhook | 监听支付成功、退款、订阅取消 | 订单表状态能更新 |
| 绑定用户权益 | 付款后更新用户 plan 或 quota | 付费功能能解锁 |
| 写退款和联系入口 | 降低投诉和风控风险 | 页面有明确联系方式 |
7. 域名配置
- 购买域名，建议使用和产品名一致或便于记忆的域名。
- 在 DNS 托管平台添加 Vercel 要求的 CNAME 或 A 记录。
- 等待证书签发后，打开 https 地址检查页面。
- 把登录和支付回调地址更新为正式域名。
- 配置 Search Console，为后续 SEO 留数据入口。
三、环境变量安全规范
| 变量类型 | 可放前端 | 处理方式 |
|---|---|---|
| 公开 API URL | 可以 | 变量名可用 NEXT_PUBLIC_ 前缀 |
| 匿名 key | 视服务策略而定 | 只允许低权限访问，配合 RLS |
| 数据库 service role | 不可以 | 只放服务端环境变量 |
| 模型 API key | 不可以 | 通过后端 API 调用 |
| 支付 secret key | 不可以 | 只放后端，前端只拿 checkout URL |
| Webhook secret | 不可以 | 用于后端校验支付事件 |
四、故障排查表
| 现象 | 常见原因 | 处理动作 |
|---|---|---|
| Vercel build 失败 | 依赖缺失、Node 版本、环境变量缺失 | 看 build log，先本地跑 npm run build |
| 登录回调失败 | OAuth 回调 URL 未配置 | 在服务商后台添加 preview 和 production 地址 |
| 数据库读写失败 | RLS、表名、字段或 key 权限错误 | 用 SQL editor 和日志定位 |
| 支付成功但权益没更新 | Webhook 未收到或签名校验失败 | 查看支付平台事件日志和后端日志 |
| 域名打不开 | DNS 未生效或记录配置错误 | 检查 CNAME/A 记录和 Vercel 域名状态 |
五、上线交付物
GitHub 仓库地址和 README。
Vercel production URL 和 preview URL。
Supabase 表结构、RLS 规则和备份说明。
登录回调、支付沙盒、webhook 测试记录。
域名、隐私政策、服务条款和联系邮箱。
上线检查截图：桌面、移动端、支付成功、订单记录。