一、部署概览与架构选型
本次上线的是一款**集成AI能力的个人技术品牌平台**（包含作品集、AI简历优化、面试模拟、RAG知识助手等功能）。为了兼顾开发效率和免费额度，我选择了这套组合拳：
前端/后端一体化：Next.js (App Router)
数据库与认证：Supabase（PostgreSQL + pgvector 向量插件）
AI大模型：DeepSeek（推理） + SiliconFlow（BGE-M3 嵌入向量，免费）
部署阵地：Vercel（Hobby 免费版）
整体耗时：按顺序执行，约 30~40分钟*即可让服务在全球CDN上跑起来。
二、第一步：Supabase 项目初始化（含 pgvector）
Supabase 不只是数据库，它还管着认证和实时订阅。这一步不能只建表，还得把**向量检索**的环境搭好。
1. 新建项目：去 [supabase.com](https://supabase.com) 点“New project”，免费版足够用。**区域选择**建议新加坡或东京，国内访问延迟相对低一些。
2. “执行SQL脚本”：进入 SQL Editor，按顺序跑两个文件：
-
schema.sql：这里面不仅建了业务表，还启用了pgvector扩展，并创建了基于余弦距离的检索函数（这是后面RAG知识库的基石）。 -
rls.sql：行级安全策略。Supabase 默认墙掉了所有外部访问，必须靠 RLS 放行，否则前端调接口全报 401。
3. “记下三把钥匙”：到 **Settings → API** 抄下来：
-
Project URL（请求地址） -
anon public key（前端公钥，公开的） -
service_role key（后端特权密钥，**绝不能泄露到前端**）
三、第二步：GitHub OAuth 配置（最容易翻车的环节）
用户登录用的是 GitHub OAuth，这里**回调地址的坑**我折腾了十分钟，大家直接照抄我的配置能避雷。
1. GitHub OAuth App 设置
去 GitHub Developer settings 新建 OAuth App：
- Homepage URL：本地开发填 http://localhost:3000（上线后记得改生产域名）。
- Authorization callback URL：**必须是** https://<你的项目ref>.supabase.co/auth/v1/callback。
> 注意：这个回调是发给 Supabase 的，不是发给你的 Next.js 站点！因为 OAuth 流程由 Supabase Auth 托管。
拿到 Client ID 和 Secret 后，去 Supabase Dashboard 的 **Authentication → Providers** 打开 GitHub 开关，填进去。
2. 重定向白名单
在 **Authentication → URL Configuration** 中：
- Site URL：本地填 http://localhost:3000。
- Redirect URLs：必须加上 http://localhost:3000/auth/callback（Next.js 处理回调的路由）。
四、第三步：AI 密钥准备（成本控制）
本次项目用了两家 AI 服务商：
1. DeepSeek：负责复杂的推理任务（如JD匹配、简历润色）。去 platform.deepseek.com 创建 Key，**确认账户余额 > 0**（哪怕充1块钱，防止接口因余额不足报错）。
2. SiliconFlow：负责 BGE-M3 向量嵌入，好消息是目前**完全免费**。去 cloud.siliconflow.cn 创建 Key 即可。
五、第四步：本地验证（强烈推荐）
别急着直接上生产，先用本地环境跑通全链路：
```bash
cd dev-platform
cp .env.example .env.local # 把上面拿到的所有 Key 填进去
npm run dev
打开 `http://localhost:3000\`\[，点击登录走一遍\](http://localhost:3000\`，点击登录走一遍) GitHub 授权。如果登录后顶部导航出现了 \*\*“管理”\*\* 分组，说明认证和角色权限打通了。
此时去 Supabase 的 \*\*Authentication → Users\*\* 里复制你本人的 UID，填到 `.env.local` 的 `ADMIN_USER_ID` 中——这样你才有后台管理的最高权限。
六、第五步：Vercel 生产部署（关键步骤）
代码推送到 GitHub 后，在 Vercel 导入项目。这里有一个极易忽略的致命细节：
🌟 Root Directory 必须设为
dev-platform！
因为代码仓库的根目录可能包含其他文档，而 Next 应用在子文件夹里，不指定这个，Vercel 会找不到package.json直接构建失败。
环境变量注入（Production）
在 Vercel 项目设置中，填入以下环境变量（切记区分 NEXT_PUBLIC_* 前缀）：
变量名说明NEXT_PUBLIC_SUPABASE_URLSupabase 地址NEXT_PUBLIC_SUPABASE_ANON_KEY前端匿名密钥SUPABASE_SERVICE_ROLE_KEY服务端特权密钥（用于绕过 RLS 做数据初始化）DEEPSEEK_API_KEYDeepSeek 密钥SILICONFLOW_API_KEYSiliconFlow 密钥ADMIN_USER_ID你的管理员 UIDNEXT_PUBLIC_SITE_URLhttps://你的Vercel域名DAILY_TOKEN_LIMIT500000（AI 用量日限额，防刷）
点击 Deploy，等待 3~5 分钟构建结束。部署成功后，记得回 Supabase 和 GitHub 把 OAuth 的 Site URL 和 Homepage URL 都改成生产域名，否则线上登录会报“重定向不匹配”。
七、第六步：上线后初始化（让数据活起来）
部署完成不代表结束，还需要做两件重要的事：
-
导入初始数据：通过
/projects/import导入几个真实项目，再发一篇博客，不然首页空荡荡。 -
重建向量索引（RAG 灵魂操作）：为了让 AI 知识助手能基于你的博客和项目回答问题，必须把文本转为向量存进 Supabase。在登录状态下，打开浏览器控制台执行：
js
fetch('/api/admin/reindex', {method: 'POST'}).then(r => r.json()).then(console.log)等待执行完毕，向量数据库里就有了你的专属知识库。
-
最后去
/settings填好个人简介和头像，首页 Hero 区域就会展示你的信息了。
八、部署验收清单（对照 PRD）
上线后建议逐项打钩，确保核心链路没断：
-
□
访客可浏览博客、项目详情、个人主页（无需登录）
-
□
管理员登录后可进入后台管理
-
□
上传 README.md，AI 能解析并自动预填项目表单
-
□
粘贴招聘 JD，AI 能匹配项目库中的关联项目
-
□
AI 简历生成后导出 PDF（重点实测：检查中文字体是否乱码，若失败按注释切换本地字体源）
-
□
技能缺口分析能识别短板并推荐方案
-
□
面试题库可基于 JD 生成分类题目
-
□
模拟面试多轮对话正常，能出评估报告
-
□
AI 助手能基于项目库和博客流式回答访客提问
-
□
Token 用量统计正常（
/settings/usage） -
□
日历和热力图正常渲染
-
□
暗色主题（明日方舟风格）适配完整
九、避坑指南 & 已知问题
-
PDF 中文字体：项目运行时依赖 jsdelivr CDN 加载
Noto Sans SC字体，导出 PDF 必须联网。如果导出空白，打开控制台看字体加载是否 404。 -
Vercel 免费版超时限制：Hobby 计划函数最大执行 60s。本项目已将简历生成等长耗时操作拆分为多个独立请求，避免单次超时。
-
Supabase 免费容量：500MB 数据库足够，但注意清理测试数据。
-
Next.js 16 弃用警告：控制台可能会报
middleware迁移提示，这属于 Next 自身升级的兼容警告，不影响业务功能，可以后续再优化。 -
OG 分享图：目前没有动态生成，建议放一张 1200×630 的 PNG 到
public/作为兜底。
十、结语
从本地代码到公网可访问，短短半小时其实浓缩了数据库运维、身份认证、AI密钥管理和边缘部署的整套流程。相比于传统的买服务器、配Nginx、装Python环境，Vercel + Supabase 的 Serverless 体验确实省心不少。希望这份实录能帮你避开那些隐藏的“回调坑”和“根目录坑”。
如果你的项目也在部署中遇到了奇怪的问题，欢迎在评论区一起交流。
（项目代码已私有化托管，核心部署流程如上，供同好参考）