08. Web 开发实战 (下)：部署与发布

课时信息

📅 时间：16:35 - 17:00 🎯 目标：掌握 Vercel 一键部署，理解 CI/CD 自动化流程，回顾全天知识点

1. 部署：帽子云 (Maoziyun)

由于 Gitee Pages 暂停个人服务，我们推荐使用 帽子云 (Maoziyun)，这是一个国内优秀的静态托管平台（类似国内版 Vercel），速度快且免费。

关键配置 (Next.js Static Export)

虽然帽子云支持多种模式，但为了确保稳定性，我们推荐静态导出模式。

1. 修改 next.config.mjs:

   const nextConfig = {
     output: 'export',  // 👈 关键：开启静态导出
     images: { unoptimized: true }
   };
   export default nextConfig;

2. 生成静态文件: 在终端运行：

   npm run build

   成功后，项目根目录会出现一个 out 文件夹。

上线步骤

1. 注册/登录: 访问 帽子云官网 并注册。

2. 创建项目:

   • 在控制台点击 新建站点。
   • 连接代码库：如果有 Gitee 仓库，可以直接授权连接（推荐）。
   • 手动上传：也可以直接把 out 文件夹压缩成 zip 包上传。

3. 部署:

   • 如果是连接仓库，Build Command 填 npm run build，Output Directory 填 out。
   • 点击 部署 (Deploy)。

4. 访问: 等待片刻，你将获得一个 https://super-resume.maoziyun.com (示例) 的免费域名。

---

2. 持续迭代 (Manual CI)

没有 Vercel 那么自动化，但我们可以建立自己的工作流：

1. 本地 AI 辅助修改代码。
2. 本地 npm run build 验证无误。
3. Git Commit & Push 到 Gitee。
4. 在 Gitee Pages 页面点击 更新。

这虽然多点几下鼠标，但让你更清楚地理解了“构建 -> 发布”的底层逻辑。

---

3. Day 1 课程回顾

今天我们完成了一次从 AI 认知 到 全栈实战 的闭环：

课时	核心知识点	关键工具
01	模型生态	DeepSeek, Claude, Cursor, Trae
02	环境基石	Node.js, fnm, pnpm
03	系统掌控	Linux CLI, Git, Shell
04	Agent 初探	Claude Code, Qwen CLI
05	Agent 进阶	MCP 协议, Chrome DevTools
06	前端基础	Vue3 vs Next.js, Tailwind
07	实战 (上)	组件化思维, 调试技巧
08	实战 (下)	Vercel 部署, CI/CD

明天 (Day 2)，我们将进入 移动端适配与设计规范 的深水区，并学习如何让你的 AI 助手更懂你的代码规范。