工程化与复盘
从"代码完成"到"产品上线",再到"持续进化"
完成本节后,你将掌握部署流程、线上维护技巧、复盘方法论,并理解 AI 时代开发者角色的转变。
一、部署前的"飞行检查"
AI 生成检查清单
提示词:
我准备将 Next.js + Supabase 项目部署到 Vercel,
请生成详细的部署前检查清单。
输出示例:
## 部署前检查清单
### 环境变量
- [ ] Supabase URL 已添加到 Vercel
- [ ] Supabase Anon Key 已配置
- [ ] 确认 .env.local 未提交到 Git
### 代码检查
- [ ] package.json build 脚本正确
- [ ] TypeScript 编译无错误
- [ ] 所有测试通过
### 数据库
- [ ] schema.sql 已执行
- [ ] rls.sql 已启用
- [ ] 测试账号可正常使用
### Git
- [ ] 所有改动已提交到 main
- [ ] 删除了 console.log 调试代码
本地构建测试
npm run build
# 成功 → 代码无语法错误
# 失败 → 将错误日志复制给 AI
二、自动化部署: CI/CD
Vercel 零配置部署
步骤:
- 访问 vercel.com,连接 GitHub
- Vercel 自动检测 Next.js
- 配置环境变量
- 点击 Deploy
结果: 2-3 分钟后上线,拥有 HTTPS 域名。
自定义 GitHub Actions
需求: 部署前自动运行测试
提示词:
生成 GitHub Actions 工作流:
1. main 分支推送时触发
2. 运行 npm test
3. 测试通过后部署到 Vercel
4. 失败则发送通知
输出示例:
name: CI/CD Pipeline
on:
push:
branches: [main]
jobs:
test-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- run: npm ci
- run: npm test
- name: Deploy to Vercel
if: success()
run: vercel --prod
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
三、线上维护与故障排查
AI 作为"线上消防员"
场景: 应用崩溃
操作流程:
Step 1: 获取错误日志
- Vercel Dashboard → Functions → Logs
Step 2: 向 AI 求助
我的应用崩溃了,这是 Vercel 错误日志:
[粘贴日志]
请分析:
1. 可能的原因?
2. 排查方向?
3. 快速修复方案?
Step 3: AI 诊断
AI: 根据日志,问题是:
环境变量 SUPABASE_URL 未定义
解决:
1. 检查 Vercel 环境变量设置
2. 确认变量名拼写
3. 重新部署
监控工具
- Vercel Analytics: 性能监控
- Sentry: 错误追踪
- Uptime Robot: 可用性监控
四、AI 驱动的文档生成
自动生成技术文档
提示词:
扫描 /src 目录 (@src/),
生成 Markdown 技术文档。
内容:
1. 核心功能模块简介
2. 主要 React 组件列表
3. 所有 API 端点说明
保存为 docs/TECHNICAL_GUIDE.md
维护 README.md
何时更新:
- 新增环境变量
- 修改启动命令
- 添加新依赖
提示词:
根据最近提交,
更新 README.md 的"本地运行"部分,
确保步骤准确。
@README.md
五、文档同步的纪律
PRD 进度标记
## 核心功能
- [x] 用户注册/登录
- [x] 播客 URL 输入
- [x] AI 生成摘要
- [ ] 书签功能 (下个迭代)
维护"技术宪法"
schema.sql 修改流程:
1. 先更新 schema.sql 文件
2. 交叉验证 (新对话审查)
3. 同步到 Supabase 数据库
4. 编写使用新字段的代码
六、复盘: 构建学习闭环
个人复盘模板
创建 retrospective.md:
## [日期] - [功能] 复盘
### 成功之处
- 什么做得好?
- 哪些决策正确?
### 改进空间
- 遇到的困难?
- 如果重来会如何调整?
### 关键学习
- 学到了什么新技术/概念?
- 对 AI 协作的新理解?
### 行动项
- [ ] 将 XXX 经验加入项目规则
- [ ] 下次记得先做 YYY
AI 复盘: 提炼最佳实践
我们完成了 [功能] 开发。
过程:
- 主要挑战: [列举]
- 最终方案: @src/[代码]
请分析代码,总结最佳实践,
并生成可添加到项目规则的新规则。
示例输出:
最佳实践:
所有 API 调用必须:
1. try/catch 错误处理
2. 统一响应 { success, data?, error? }
3. 日志记录
新规则:
"所有外部 API 交互必须遵循统一错误处理模式,
参考 src/lib/api-client.ts"
七、开发者角色的进化
从"Coder"到"总指挥"
传统价值:
- 熟记 API 文档
- 手写优雅算法
- 配置复杂环境
AI 时代价值:
-
提出正确的问题
- 将商业愿景转化为清晰需求
- "做什么"比"如何做"更重要
-
做出关键决策
- 技术选型
- 架构设计
- 质量把关
-
建立系统与流程
- 定义规则
- 管理上下文
- 建立复盘闭环
-
对质量负责
- 批判性审查 AI 输出
- 测试与重构
- 最后一道防线
个人经历启示
案例:
- 过去: 2 万行项目头疼不已
- 现在: 2 周产出功能完备产品
关键不是新语言/框架,而是与 AI 协同的思维模式。
八、当前局限与应对
AI 的三大局限
-
知识滞后性
- 训练数据落后
- 应对: 使用 MCP (Context7) 实时查询
-
产生幻觉
- 自信地给出错误答案
- 应对: 永远验证,永远审查
-
缺乏真正理解
- 模式匹配 ≠ 逻辑推理
- 应对: 复杂创新仍需人类主导
保持批判性思维
黄金法则:
AI 是最强工具,
但方向盘必须握在你手中
九、未来展望
技术演进趋势
短期 (1-2 年):
- 更长上下文 (500k+ tokens)
- 更强代码理解
- 更好多模态集成
中期 (3-5 年):
- Agent 自动化流水线
- 从"总指挥"到"需求提出者"
- 更模糊的"编程"边界
持续学习心态
唯一不变的,是变化本身
建议:
- 关注 AI 最新进展
- 定期尝试新工具
- 加入社区,分享经验
十、总结: Vibe Coding 本质
核心思维模式
传统: 我 → 编写代码 → 产品
Vibe: 我 → 定义目标/规则 → AI 编写
→ 我审查 → 产品
关键转变:
- 从"如何实现"到"实现什么"
- 从"写代码"到"管理代码生成"
- 从"个人技艺"到"系统化协作"
四大核心能力
- 需求转化: PRD 撰写、任务拆解、清晰表达
- 上下文管理: 精准投喂、控制长度、清理噪音
- 批判性审查: 验证输出、发现问题、质量把关
- 系统化思维: 建立规则、复盘迭代、持续优化
十一、行动清单
立即行动
- 完成开发环境搭建
- 配置 Cursor 规则
- 创建核心文档 (PRD, schema, rls, api)
第一个项目
- 选择简单想法 (3-5 核心功能)
- 走完整 Vibe Coding 流程
- 部署上线并分享
持续进化
- 每完成功能,进行复盘
- 每周更新项目规则
- 每月尝试新 AI 工具
十二、资源推荐
学习资源
- Cursor 官方文档 (中文版)
- Supabase 官方文档
- Next.js 官方教程
社区
- GitHub Discussions
- Discord 服务器
- Reddit r/cursor / r/ClaudeAI
工具
- Cursor / Claude Code
- Supabase / Firebase
- Vercel / Netlify
- Context7 MCP
- Figma MCP
十三、最后的话
Vibe Coding 不是:
- 让 AI 替你思考
- 完全不写代码
- 万能的银弹
Vibe Coding 是:
- 新的协作模式
- 放大你能力的杠杆
- 从想法到产品的最短路径
关键在于:
- 保持好奇心
- 持续学习
- 拥抱变化
希望这份指南,能为你在 AI 时代的软件开发之路,提供一张可靠的航海图。
祝你,航行愉快。 🚀