Session 7: 部署与维护 - 让你的作品活下去

最后一节课！让你的项目上线，让全世界都能用。

🎬 开场故事

小周的读书笔记工具做好了。

功能完美，测试通过，界面美观。

他打开微信，想发给朋友。

然后愣住了："怎么发？"

代码在他电脑里，朋友打不开。

他需要一个"服务器"，把网站放上去。

但服务器是什么？怎么买？怎么配置？SSL 证书是什么？域名怎么绑？

小周一脸懵逼，项目烂尾。

meanwhile，小吴用了 Vercel。

git push → 自动部署 → 得到一个网址 → 发给朋友。

全程 5 分钟。

这就是部署的差距。

🧠 核心概念：部署比开发简单

系统设计师知道：

• 现代部署工具已经非常傻瓜化
• 你不需要懂服务器，也能上线

部署方式对比

结论：先用免费的，够用了。

🛠️ 实战工具：Vercel 一键部署

准备

1. 代码推送到 GitHub
2. 注册 Vercel 账号（用 GitHub 登录）
3. 点"New Project"
4. 选择你的 GitHub 仓库
5. 点"Deploy"

完成！得到一个 .vercel.app 的网址。

自定义域名（可选）

1. 买个域名（阿里云/腾讯云/Namecheap）
2. Vercel 里点"Domains"
3. 按提示添加 DNS 记录
4. 等待生效（几分钟到几小时）

后续更新

git add .
git commit -m "更新功能"
git push

Vercel 自动重新部署！

📝 实战案例：小红部署读书笔记工具

她的项目情况

• 纯前端 HTML/CSS/JS
• 数据存在 LocalStorage（单机版）
• 代码在 GitHub 上

部署步骤

第 1 步：确保代码在 GitHub

git push origin main

第 2 步：Vercel 部署

1. 登录 vercel.com
2. "Add New Project"
3. 导入 reading-notes 仓库
4. Framework Preset 选"Other"（纯 HTML）
5. 点 Deploy

第 3 步：得到网址

https://reading-notes-xxx.vercel.app

第 4 步：分享给朋友

微信发过去，朋友点开就能用！

后续更新

小红加了搜索功能：

git add .
git commit -m "添加搜索功能"
git push

Vercel 自动部署，朋友刷新页面就有新功能。

🔄 维护与迭代

监控 = 定期自己用

不需要复杂监控，每周自己用一次：

• 功能正常吗？
• 速度快吗？
• 有用户反馈吗？

备份 = 代码在 GitHub

用 GitHub 就是备份：

# 每次改代码都提交
git add .
git commit -m "做了什么"
git push

代码永远不会丢。

数据备份（如果用户有数据）

如果数据存在 LocalStorage：

// 添加导出功能
function exportData() {
  const data = localStorage.getItem('books');
  const blob = new Blob([data], {type: 'application/json'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'reading-notes-backup.json';
  a.click();
}

让用户能导出数据，就不怕丢失。

版本迭代

版本 1.0 上线 → 收集反馈 → 修 Bug → 版本 1.1
     ↑                              ↓
     └──── 版本 2.0 ← 加新功能 ←────┘

小步快跑，持续迭代。

⚠️ 常见陷阱

陷阱 1：追求"正式"上线

❌ 非要买服务器、备案、配域名，折腾一个月

✅ 正确做法：Vercel 免费版先用起来，有用户了再升级

陷阱 2：不测就上线

❌ 代码写完直接 push，不检查

✅ 正确做法：本地先跑一遍，确认没问题再 push

陷阱 3：不备份

❌ 代码只在本地，电脑坏了全没

✅ 正确做法：用 GitHub，每次改都 push

陷阱 4：上线就不管了

❌ 上线后不看、不用、不更新

✅ 正确做法：每周用一次，收集反馈，持续迭代

🤖 AI 协作技巧

1. 生成部署配置

我的项目是：纯 HTML/CSS/JS，没有后端
我想部署到 Vercel

请给我：
1. 详细部署步骤
2. 需要配置什么吗？
3. 怎么设置自定义域名？

2. 排查部署问题

我的网站部署到 Vercel 后：
【问题描述】

【本地是正常的，部署后出问题】
【报错信息】

请帮我分析可能的原因。

3. 生成 CI/CD 脚本

请帮我写 GitHub Actions 配置：
每次 push 到 main 分支，自动部署到 Vercel。

项目类型：纯前端 HTML

4. 性能优化建议

我的网站加载很慢：
【网址】

请分析：
1. 可能的原因
2. 优化建议
3. 具体怎么改

✅ 本节课作业

作业 1：选择部署平台

根据你的项目，选择：

• Vercel（推荐，免费，简单）
• Netlify（同上）
• GitHub Pages（静态网站）

作业 2：准备代码

确保代码：

• 在 GitHub 上
• 能在本地正常运行
• 有 README 说明是什么项目

作业 3：部署上线

按步骤部署，得到一个可访问的网址。

作业 4：分享给朋友

发给至少 3 个朋友，收集反馈。

作业 5：记录反馈

朋友的反馈：

• 哪里好用？
• 哪里困惑？
• 希望加什么功能？

作业 6：制定迭代计划

根据反馈，规划下一个版本要改什么。

作业 7（终极）：写项目总结

写一段话：

• 这个项目做什么
• 技术栈是什么
• 学到什么
• 下一步计划

放到 GitHub README 里。

📎 模板下载

部署检查清单

部署前检查：

□ 代码在 GitHub 上
□ 本地测试通过
□ 没有敏感信息（密码、API Key）
□ 有 README 说明项目
□ 有 LICENSE（可选，建议 MIT）

部署步骤：

□ 1. 选择平台（Vercel/Netlify/GitHub Pages）
□ 2. 连接 GitHub 仓库
□ 3. 配置构建设置（通常自动识别）
□ 4. 点击 Deploy
□ 5. 等待部署完成
□ 6. 测试线上版本
□ 7. 分享网址

部署后检查：

□ 功能正常
□ 样式正常
□ 手机访问正常
□ 速度可接受

维护计划：

每周：
□ 自己用一次
□ 检查是否有反馈

每月：
□ 备份数据
□ 更新依赖（如果有）

每季度：
□ 回顾使用情况
□ 规划新功能

🎉 课程总结

6 个 Session 回顾

1. 需求分析 - 想清楚要做什么（5W1H）
2. 架构设计 - 画出系统结构（三层架构）
3. 技术选型 - 选最简单的方案（不要造轮子）
4. 模块化设计 - 切成一口一口能吃下的小块（MVP）
5. AI 结对编程 - 写好 Prompt，让 AI 写代码
6. 测试与迭代 - 用 AI 测试 AI 写的代码
7. 部署与维护 - 上线，让全世界都能用

核心理念

1. 先想清楚，再动手 - 需求分析和架构设计能省 80% 返工
2. 小步快跑 - MVP 思维，不要追求完美
3. AI 是伙伴 - 清晰的指令 = 好的结果
4. 测试是保险 - 让 AI 测试 AI 写的代码
5. 完成比完美重要 - 先上线，再迭代

你现在能做什么

✅ 分析一个想法的可行性

✅ 画出系统架构图

✅ 选择合适的技术方案

✅ 规划版本和模块

✅ 用 AI 写出能用的代码

✅ 测试和修复 Bug

✅ 部署上线，分享给朋友

这就是 Vibe Coding with AI！

🚀 下一步

继续学习

• 《System Design Interview》by Alex Xu（深入技术）
• 《用户故事地图》by Jeff Patton（深入需求）
• System Design Primer（免费）

实践建议

1. 做 3 个小项目 - 实践出真知
2. 教别人 - 教是最好的学
3. 加入社区 - 和同样用 AI 编程的人交流
4. 分享你的项目 - 写博客、拍视频、发朋友圈

记得

• 每次都用 5W1H 分析需求
• 每次都先画架构图
• 每次都做 MVP
• 每次都写结构化 Prompt
• 每次都测试
• 每次都部署上线

循环往复，你就是 Vibe Coding 专家！

💬 最后的话

你可能不是程序员。

你可能不懂算法、数据结构、设计模式。

但没关系。

你有想法，AI 有代码。

你有需求，AI 有实现。

你有愿景，AI 有工具。

这套课给你的，不是编程技能，而是用 AI 实现想法的方法。

现在，去创造吧！

完结撒花 🎉

感谢学习 Vibe Coding with AI

愿你的每一个想法，都能变成现实

📚 资源汇总

部署平台：

• Vercel
• Netlify
• Cloudflare Pages
• GitHub Pages

学习资源：

• System Design Primer
• ByteByteGo
• MDN Web Docs

AI 工具：

• Claude / ChatGPT / Kimi - 写代码
• GitHub Copilot - 代码补全
• V0.dev - 生成 UI
• Replit - 在线编程

感谢学习 Vibe Coding with AI

愿你的每一个想法，都能变成现实