feat(docs): enhance interactive demos and improve documentation

- Add new interactive components for frontend routing, browser rendering pipeline, and database transactions
- Improve existing demos with better visuals, explanations, and examples
- Update documentation structure and content for better clarity
- Add new utility scripts and update package.json with new commands
- Fix formatting and alignment in documentation tables

docs/zh-cn/appendix/deployment.md

@@ -1,263 +1,592 @@
-# 部署与上线 (Deployment & Release)
+# 服务上线之旅：从代码到用户眼中的网页
 
-> 💡 **学习指南**：本章节不讲复杂的服务器运维，而是通过“交互式体验”，带你从零看懂一个网站是如何从你的电脑“跑”到用户手机里的。
-
-## 0. 全局概览：一个请求的“奇幻漂流”
-
-你有没有想过，当你在浏览器输入网址并回车的那一瞬间，到底发生了什么？
-其实，这就像是一次**快递配送**的过程。
-
-不过，根据你要“送”的东西不同，配送路线也会稍微有点不一样。
-
-**为什么会有这些区别呢？**
-就像在现实生活中，不同的东西有不同的送法：
-
-1.  **发传单（静态网页）**：
-    - _场景_：公司的介绍页、博客文章。
-    - _特点_：内容是**死**的，印好了就不变了。
-    - _做法_：直接把“传单”贴在离用户最近的宣传栏（CDN）上。谁来看都一样，速度最快，成本最低。
-
-2.  **送乐高积木（SPA 单页应用）**：
-    - _场景_：类似飞书、Notion 这种复杂的网页软件。
-    - _特点_：交互特别多，像个**软件**。
-    - _做法_：先给你寄一个“空盒子”和一大堆“零件”（JS代码），你的浏览器收到后，自己在本地把页面“拼”出来。
-    - _好处_：一旦加载完，点哪里都很快，因为不需要再找服务器要页面了，只需要要数据。
-
-3.  **送热披萨（SSR 服务端渲染）**：
-    - _场景_：股票大盘、新闻头条、个性化推荐。
-    - _特点_：数据**实时变动**，或者需要**千人千面**。
-    - _做法_：必须在用户下单的那一秒，由办事员（服务器）现场查数据、现场组装好页面，再热乎乎地交给你。
-    - _好处_：数据绝对新鲜，而且搜索引擎（爬虫）最喜欢这种完整的页面。
-
-下面这个互动图，带你体验这三种不同的“配送路线”：
-
-<DeploymentArchitecture />
-
-不管你选择哪种模式，一个**完整的请求**通常都要经过以下这些关卡。
-让我们看看它们都是干什么的，以及**为什么**我们缺不了它们：
-
-1.  **用户 (User) —— 寄件人**
-    - _动作_：在浏览器输入网址，回车。
-    - _人话_：就像是你发出了一个“我想看网页”的请求包裹。
-
-2.  **DNS (域名解析) —— 查号台**
-    - _为什么需要？_ 电脑只认识数字（IP地址），人脑只记得住单词（域名）。
-    - _人话_：它负责告诉你“baidu.com”这个名字对应的**门牌号 (IP地址)** 到底是哪一家。
-
-3.  **CDN (内容分发) —— 家门口的快递柜**
-    - _为什么需要？_ 服务器可能在地球另一边，传一张图片过来太慢了。
-    - _人话_：如果你要的东西（图片、视频）在楼下的快递柜（CDN节点）里正好有备份，直接给你，**不用跑远路**去总仓库取。
-
-4.  **WAF (防火墙) —— 小区保安**
-    - _为什么需要？_ 互联网上有很多坏人（黑客）想搞破坏。
-    - _人话_：它站在门口，把带炸弹的、发传单的（恶意攻击）都**拦在外面**，只让正常的客人进去。
-
-5.  **LB (负载均衡) —— 大堂经理**
-    - _为什么需要？_ 访问的人太多了，一台服务器累死也干不完。
-    - _人话_：它看着后面开着的 10 个窗口（服务器），把你引导到那个**最空闲**的窗口去办理业务，不让你干等。
-
-6.  **Server (服务器) —— 办事员**
-    - _为什么需要？_ 总得有人真正干活，处理你的订单、计算金额。
-    - _人话_：他是真正**处理业务**的人，负责把网页内容拼好，或者把数据算出来给你。
-
-7.  **DB (数据库) —— 档案室**
-    - _为什么需要？_ 办事员脑子记不住那么多数据，而且断电了不能忘。
-    - _人话_：这里**永久保存**着你的账号、密码、历史订单等核心机密数据。
-
-弄懂了这个流程，部署就不难了。部署无非就是把这些环节一个个打通。
+> **学习指南**：本章节带你完整体验"一个服务上线"的全过程。我们不讲复杂的运维术语，而是通过小明的咖啡店网站上线故事，让你看懂代码是怎么变成用户能访问的网站的。
 
 ---
 
-## 1. 域名与 DNS：给你的网站起个名
+## 0. 引言：小明的咖啡店网站要上线了
 
-你想让别人访问你的网站，总不能给人家一串冷冰冰的数字（IP 地址：`123.45.67.89`）吧？
-你需要一个好记的名字，比如 `my-cool-site.com`。这就是**域名**。
+小明是个前端开发，他用 Vue 写了一个漂亮的咖啡店网站：可以看菜单、在线下单、查看订单状态。
 
-而 **DNS**，就是负责把这个“好记的名字”翻译成“机器能懂的 IP”的系统。
+网站在**小明的电脑上**跑得好好的，但是问题来了：
 
-### 1.1 常见的记录类型
+> **怎么让全世界的人都能访问这个网站？**
 
-在配置域名时，你会看到很多选项，别晕，最常用的就这俩：
+这就像小明在家做了一桌子菜，现在要开餐厅让所有人来吃。这可不是简单地"把菜端出去"那么简单，他要经历一整套完整的流程。
 
-- **A 记录**：最直接的。告诉 DNS，“`my-site.com` 的 IP 是 `1.2.3.4`”。
-- **CNAME 记录**：起别名。告诉 DNS，“`www.my-site.com` 也就是 `my-site.com`”。这在接入 CDN 时特别常用。
+<DeploymentOverviewDemo />
 
-### 1.2 避坑指南
+**服务上线就是一场"搬家+开业"的大工程**：
 
-- **生效慢**：DNS 修改不是立即生效的，全球同步可能需要几分钟到几小时（受 TTL 影响）。
-- **配错了**：如果不小心配错了 IP，用户就真的找不到你了。
+1. **打包行李** → 把代码打包成服务器能懂的格式
+2. **找房子** → 选择服务器（云服务器/VPS）
+3. **搬家** → 把代码部署到服务器
+4. **装修** → 配置运行环境
+5. **挂牌** → 配置域名和DNS
+6. **安防** → 安装HTTPS证书
+7. **招服务员** → 配置负载均衡
+8. **开分店** → 配置CDN加速
+9. **自动化** → 建立CI/CD流程
+10. **守夜人** → 监控和备份
 
-<DnsFlowDemo />
+让我们跟着小明，一步一步完成这场"上线之旅"！
 
 ---
 
-## 2. 服务器：你的网站“住”在哪？
+## 1. 打包行李：把代码变成"可携带的包裹"
 
-代码写好了，得找个地方跑起来。这个地方就是**服务器**。
-你可以把它想象成一台**永不关机、连着公网的电脑**。
+小明的网站代码在他电脑上是这样散落的：
 
-### 2.1 怎么选配置？
+```
+my-coffee-shop/
+├── src/              # 源代码
+│   ├── App.vue      # Vue 组件
+│   ├── main.js      # 入口文件
+│   └── assets/      # 图片、样式
+├── package.json     # 依赖清单
+└── vite.config.js   # 构建配置
+```
 
-新手最容易犯两个错：
+这些源代码浏览器**看不懂**。浏览器只认识：
+- HTML 文件（网页骨架）
+- CSS 文件（网页样式）
+- JS 文件（网页逻辑）
 
-1.  **买太小**：1核1G 的机器，跑个 Hello World 还行，稍微装点东西就卡死。
-2.  **买太大**：一上来就买 8核16G，结果每天只有 10 个人访问，纯属浪费钱。
+### 1.1 为什么要"构建"？
 
-**建议**：先买个入门款（比如 2核4G），不够了再随时升级。云服务器的好处就是可以弹性伸缩。
+想象小明做了一桌子菜，现在要打包外卖：
 
-### 2.2 最小上云脚本 (Ubuntu)
+<DeploymentBuildDemo />
 
-买好服务器后，通常是空的。你需要装一些基础软件。
-把下面这段话复制到服务器终端里运行，就能装好 Nginx（Web服务器）和 Node.js（运行环境）：
+**构建（Build）就是"打包外卖"的过程**：
+
+1. **翻译**：把 Vue 组件翻译成浏览器懂的 HTML/CSS/JS
+2. **压缩**：把代码体积缩小（省流量、加载快）
+3. **合并**：把几十个小文件合成几个大包（减少请求）
+4. **哈希**：给文件名加上指纹（`app.abc123.js`），浏览器缓存友好
+
+运行构建命令：
 
 ```bash
-# 1. 更新系统软件库
+npm run build
+```
+
+构建完成后会生成一个 `dist` 文件夹：
+
+```
+dist/
+├── index.html                 # 主页面
+├── assets/
+│   ├── app.abc123.js         # 打包后的JS（278KB）
+│   ├── app.abc123.css        # 打包后的CSS（45KB）
+│   └── logo.789xyz.png       # 优化后的图片
+```
+
+这个 `dist` 文件夹，就是小明的"行李箱"，里面装着所有要搬去服务器的东西。
+
+---
+
+## 2. 找房子：选择服务器
+
+代码打包好了，现在要找个"房子"住。这个房子就是**服务器**。
+
+### 2.1 服务器是什么？
+
+服务器 = **一台永远不关机、连着互联网的电脑**
+
+<DeploymentServerDemo />
+
+### 2.2 怎么选服务器？
+
+小明有几个选择：
+
+| 方案 | 类比 | 优点 | 缺点 | 价格 |
+|------|------|------|------|------|
+| **虚拟主机** | 租个床位 | 便宜、简单 | 性能差、不能随便装软件 | ¥50-200/年 |
+| **云服务器** | 租整套公寓 | 自由度高、可扩展 | 需要自己配置 | ¥100-1000/年 |
+| **容器服务** | 租豪华酒店 | 自动化管理 | 价格高 | ¥500+/月 |
+| **Serverless** | 租用会议室 | 用多少付多少 | 冷启动慢 | 按量计费 |
+
+**小明的选择**：云服务器（2核4G，约¥500/年）
+
+选配置的误区：
+
+- ❌ **太小了**：1核1G，跑个Hello World还行，稍微多点人就卡死
+- ❌ **太大了**：一上来就8核16G，每天10个访问，纯属浪费
+- ✅ **刚刚好**：2核4G起步，不够了再升级（云服务器支持弹性伸缩）
+
+### 2.3 主流云厂商
+
+| 厂商 | 特点 | 适合人群 |
+|------|------|---------|
+| **阿里云** | 国内访问快、文档多 | 国内业务首选 |
+| **腾讯云** | 价格亲民、微信生态 | 小程序开发者 |
+| **AWS** | 全球覆盖、功能最强 | 国际业务 |
+| **Vercel** | 免费额度、零配置 | 前端项目快速上线 |
+
+---
+
+## 3. 搬家：把代码放到服务器上
+
+服务器租好了，现在要把代码"搬"过去。
+
+### 3.1 怎么连接服务器？
+
+服务器在遥远的机房，怎么操作？用 **SSH（远程连接工具）**：
+
+```bash
+# 连接到服务器
+ssh root@123.45.67.89
+
+# 输入密码后，你就"进入"服务器了
+# 后面敲的命令，都是在服务器上执行
+```
+
+<DeploymentSSHDemo />
+
+### 3.2 部署方式对比
+
+| 方式 | 类比 | 优点 | 缺点 |
+|------|------|------|------|
+| **FTP上传** | 自己扛箱子搬家 | 简单直观 | 容易漏传文件、慢 |
+| **Git拉取** | 让快递公司送货 | 快、可追溯 | 需要配置Git |
+| **Docker容器** | 用搬家集装箱 | 环境一致、易迁移 | 需要学习Docker |
+
+**推荐方式**：Git + Build Script
+
+小明用 Git 把代码推送到 GitHub，然后让服务器自己拉取最新代码：
+
+```bash
+# 服务器上执行的脚本
+cd /var/www/coffee-shop
+git pull origin main          # 拉取最新代码
+npm install                   # 安装依赖
+npm run build                 # 构建项目
+pm2 restart all               # 重启服务
+```
+
+---
+
+## 4. 装修：配置运行环境
+
+代码搬过去了，但是服务器还只是个"空房子"，需要"装修"才能住人。
+
+### 4.1 需要装什么？
+
+<DeploymentEnvironmentDemo />
+
+**最小化安装脚本**（Ubuntu系统）：
+
+```bash
+# 1. 更新系统
 sudo apt update && sudo apt upgrade -y
 
-# 2. 安装 Nginx (Web服务器) 和 Git (拉代码用)
-sudo apt install -y nginx git curl
+# 2. 安装 Nginx（Web服务器，负责接待客人）
+sudo apt install -y nginx
 
-# 3. 安装 Node.js (这里选了版本 18)
+# 3. 安装 Node.js（运行JavaScript代码）
 curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
 sudo apt install -y nodejs
 
-# 4. 安装 PM2 (这是个好东西，能帮你把网站进程“守”住，崩溃了自动重启)
-sudo npm i -g pm2
+# 4. 安装 PM2（进程管家，防止程序崩溃）
+sudo npm install -g pm2
+
+# 5. 安装 Git（拉代码用）
+sudo apt install -y git
 ```
 
-<ServerSizerDemo />
+### 4.2 Nginx 反向代理是什么？
+
+小明的程序跑在 `3000` 端口，但用户习惯访问 `80`（HTTP）或 `443`（HTTPS）端口。
+
+**Nginx 就像个"门童"**：
+- 守在 80/443 端口接待客人
+- 把请求转给后端的 3000 端口
+- 把结果返回给用户
+
+<DeploymentNginxDemo />
+
+**Nginx 配置示例**：
+
+```nginx
+server {
+    listen 80;
+    server_name coffee.example.com;
+
+    # 所有请求都转发给 3000 端口
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
+```
 
 ---
 
-## 3. HTTPS：给传输管道“加个盖”
+## 5. 挂牌：配置域名和 DNS
 
-以前的网站（HTTP），数据是在网线上“裸奔”的。谁要是拿个工具在中间截获一下，你的密码、聊天记录全都被看见了。
-现在的标准是 **HTTPS**，多出来的这个 **S** 就是 **Secure (安全)**。它给数据加了一层加密壳，别人截获了也看不懂。
+房子装修好了，现在要挂个牌子，让客人能找到你。这个牌子就是**域名**。
 
-### 3.1 反向代理 (Reverse Proxy)
+### 5.1 域名是什么？
 
-这是个听起来很高级，其实很简单的概念。
-你的 Node.js 程序跑在 `3000` 端口，但用户习惯访问 `80` (HTTP) 或 `443` (HTTPS) 端口。
-你不能让用户自己在网址后面输 `:3000` 吧？
+域名 = **网站的门牌号**
 
-这时候就需要 **Nginx** 出场了。它守在 `80/443` 端口，把用户的请求“接”进来，再“转”给你的 `3000` 端口程序。这就叫**反向代理**。
+- IP地址（123.45.67.89）太难记
+- 域名（coffee.example.com）好记
 
-### 3.2 怎么搞定 HTTPS？
+**DNS（域名解析）** = **电话本**，负责把域名翻译成IP
 
-不用花钱买证书！现在有免费的工具叫 **Certbot**。
-它能自动帮你申请证书，还自动帮你改 Nginx 配置。
+<DeploymentDnsDemo />
 
-<HttpsNginxDemo />
+### 5.2 域名配置步骤
+
+1. **买域名**：在阿里云/腾讯云/Namecheap购买（¥50-100/年）
+2. **配置DNS记录**：告诉世界"我的网站在这个IP"
+
+常用记录类型：
+
+| 记录类型 | 用途 | 示例 |
+|---------|------|------|
+| **A记录** | 直接指向IP | `coffee.example.com` → `123.45.67.89` |
+| **CNAME** | 指向另一个域名 | `www.coffee.example.com` → `coffee.example.com` |
+
+**注意事项**：
+- ⏰ DNS生效慢：全球同步需要几分钟到几小时
+- 📝 TTL值：设置小一点（如600秒），修改后生效快
 
 ---
 
-## 4. CDN：让网站“飞”到用户家门口
+## 6. 安防：安装 HTTPS 证书
 
-如果你的服务器在**北京**，而用户在**纽约**。
-每一次请求都要跨越半个地球，光是光纤传输就要好几百毫秒，肯定慢。
+房子好了，牌子挂了，现在要装门锁，保证安全。
 
-**CDN (内容分发网络)** 就是解决这个问题的。
-它在全球各地建了无数个“小仓库”。当你把图片、CSS、JS 文件放到 CDN 上：
+### 6.1 为什么需要 HTTPS？
 
-- 北京用户访问，CDN 就近从北京节点给他。
-- 纽约用户访问，CDN 就近从纽约节点给他。
+<DeploymentHttpsDemo />
 
-**结果**：你的服务器轻松了（流量少了），用户也爽了（速度快了）。
+**HTTP 的问题**：数据"裸奔"，谁都能看见
 
-<CdnCacheDemo />
+**HTTPS 的好处**：数据加密，黑客看见也是乱码
+
+### 6.2 怎么搞定 HTTPS？
+
+不用花钱买证书！用 **Let's Encrypt（免费证书）** + **Certbot（自动工具）**
+
+```bash
+# 1. 安装 Certbot
+sudo apt install -y certbot python3-certbot-nginx
+
+# 2. 自动申请证书并配置 Nginx
+sudo certbot --nginx -d coffee.example.com
+
+# 3. 证书自动续期（Certbot会自动设置）
+sudo certbot renew --dry-run
+```
+
+完成后，访问网站会看到小锁🔒，HTTPS 就搞定了！
 
 ---
 
-## 5. CI/CD：告别“手工搬砖”
+## 7. 招服务员：负载均衡
 
-以前发布网站是这样的：
+小明的咖啡店火了，一个人接待不过来，怎么办？招更多服务员！
 
-1.  在本地改代码。
-2.  用 FTP 软件把文件上传到服务器。
-3.  SSH 连上去重启服务。
-4.  哎呀，上传漏了一个文件，报错了！赶紧修...
+### 7.1 什么是负载均衡？
 
-这太累，而且容易出错。
-现在我们用 **CI/CD (持续集成/持续部署)**。
+<DeploymentLbDemo />
 
-### 5.1 它是怎么工作的？
+**负载均衡器（Load Balancer）** = **餐厅领班**
 
-你只需要做一件事：**把代码推送到 Git 仓库**。
-剩下的事情，流水线（Pipeline）自动帮你做：
+- 看着后面N个服务器（服务员）
+- 把客人分配到最空闲的那个
+- 某个服务器挂了，自动把流量分给其他的
 
-1.  **检测**：自动发现有新代码了。
-2.  **安装**：自动在新环境里装依赖 (`npm install`)。
-3.  **构建**：自动打包 (`npm run build`)。
-4.  **部署**：自动把打好的包发到服务器，并重启服务。
+### 7.2 什么时候需要负载均衡？
 
-如果中间任何一步出错了（比如测试没过），它会立刻停下来报警，绝不会把烂代码发到线上。
-
-<CicdPipelineDemo />
-
-### 5.2 进阶：如何“丝滑”回滚？
-
-万一新版本上线后发现有重大 Bug，怎么办？
-**蓝绿部署** 或 **滚动更新** 可以帮你。简单说，就是新老版本共存一小会儿，没问题了再全切过去。有问题？一键切回老版本，用户甚至感觉不到。
-
-<RollbackSwitchDemo />
+| 访问量 | 服务器配置 | 是否需要LB |
+|--------|-----------|-----------|
+| <100/天 | 1核2G | ❌ 不需要 |
+| 1000-10000/天 | 2核4G | ❌ 不需要 |
+| >10000/天 | 4核8G | ✅ 建议配置 |
 
 ---
 
-## 6. 监控与备份：做个“心里有数”的管理员
+## 8. 开分店：CDN 加速
 
-网站上线了，不是结束，只是开始。
-你不能等用户打电话骂你“网站打不开了”，你才知道出事了。
+小明在全国都有客人，北京的服务器响应纽约的请求太慢了。怎么办？开分店！
 
-### 6.1 监控 (Observability)
+### 8.1 什么是 CDN？
 
-你需要给服务器装上“摄像头”和“报警器”：
+**CDN（内容分发网络）** = **全球连锁仓库**
 
-- **日志 (Logs)**：记录程序运行的每一句话。报错了查日志，一查一个准。
-- **指标 (Metrics)**：CPU 用了多少？内存剩多少？QPS（每秒请求数）是多少？
-- **告警 (Alerts)**：当 CPU 飙到 90%，或者错误率突然升高时，直接发短信/钉钉告诉你。
+<DeploymentCdnDemo />
 
-### 6.2 备份 (Backup)
+**CDN 的工作原理**：
 
-**数据是无价的**。
-一定要设置**自动备份**。哪怕服务器炸了、被黑客删库了，只要有备份，你就能在半小时内“起死回生”。
+1. 你把图片、CSS、JS等"不变的东西"上传到CDN
+2. CDN把这些文件复制到全球各地的节点
+3. 用户访问时，CDN自动从最近的节点给文件
 
-<ObservabilityBackupDemo />
+**效果**：
+- 北京用户 → 北京节点（10ms）
+- 纽约用户 → 纽约节点（15ms）
+- 伦敦用户 → 伦敦节点（20ms）
+
+### 8.2 怎么配置CDN？
+
+1. **开通CDN服务**：阿里云CDN/腾讯云CDN/Cloudflare
+2. **添加域名**：填写你的网站域名
+3. **配置源站**：告诉CDN你的服务器IP
+4. **刷新缓存**：文件更新后，手动刷新CDN缓存
 
 ---
 
-## 7. 遇到问题怎么办？(故障速查)
+## 9. 自动化：建立 CI/CD 流程
 
-别慌，按这个表排查：
+每次更新代码都要手动SSH到服务器、拉代码、构建、重启，太累！自动化吧！
 
-| 现象           | 可能原因                                 | 怎么办？                                                                   |
-| :------------- | :--------------------------------------- | :------------------------------------------------------------------------- |
-| **打不开网站** | 域名没解析好？服务器挂了？防火墙拦住了？ | 1. `ping 域名` 看看通不通。<br>2. 检查云厂商防火墙是不是没开 80/443 端口。 |
-| **HTTPS 报错** | 证书过期了？没配置好？                   | 运行 `certbot renew` 试着续期一下。                                        |
-| **改了没生效** | 浏览器缓存？CDN 缓存？                   | 强制刷新浏览器 (Ctrl+F5)；去 CDN 控制台点“刷新缓存”。                      |
-| **发布失败**   | 依赖装不上？代码写错了？                 | 去看 CI/CD 的日志，最后几行通常就是原因。                                  |
+### 9.1 什么是 CI/CD？
+
+<DeploymentCicdDemo />
+
+**CI（持续集成）** = 自动化测试
+
+- 每次提交代码自动运行测试
+- 保证代码质量
+
+**CD（持续部署）** = 自动化上线
+
+- 代码通过测试后自动部署
+- 一键上线，安全可靠
+
+### 9.2 怎么实现 CI/CD？
+
+**推荐：GitHub Actions**
+
+在项目根目录创建 `.github/workflows/deploy.yml`：
+
+```yaml
+name: Deploy to Production
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to server
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: root
+          key: ${{ secrets.SSH_KEY }}
+          script: |
+            cd /var/www/coffee-shop
+            git pull origin main
+            npm install
+            npm run build
+            pm2 restart all
+```
+
+**工作流程**：
+1. 小明提交代码到 GitHub
+2. GitHub Actions 自动触发
+3. 自动构建 + 自动部署
+4. 几分钟后，新版本就上线了！
 
 ---
 
-## 8. 名词速查表 (Glossary)
+## 10. 守夜人：监控和备份
 
-| 缩写      | 全称                                | 人话解释                                           |
-| :-------- | :---------------------------------- | :------------------------------------------------- |
-| **DNS**   | Domain Name System                  | **域名解析**。把网址变成 IP。                      |
-| **CDN**   | Content Delivery Network            | **加速网络**。把资源存到离用户最近的地方。         |
-| **HTTPS** | HyperText Transfer Protocol Secure  | **安全协议**。给数据传输加把锁。                   |
-| **CI/CD** | Continuous Integration / Deployment | **自动发布**。提交代码后自动跑完测试和上线流程。   |
-| **PM2**   | Process Manager 2                   | **进程管家**。Node.js 的保姆，负责让程序一直跑着。 |
+网站上线了，但工作还没完。就像开店后需要保安和账房，网站也需要**监控**和**备份**。
+
+### 10.1 监控：当个好管家
+
+<DeploymentMonitorDemo />
+
+**需要监控什么？**
+
+| 指标 | 说明 | 正常范围 |
+|------|------|---------|
+| **CPU使用率** | 服务器"脑子"有多忙 | <70% |
+| **内存使用率** | 服务器"记忆"占多少 | <80% |
+| **磁盘空间** | 硬盘还剩多少 | <80% |
+| **响应时间** | 网页加载多慢 | <2秒 |
+| **错误率** | 有多少请求失败 | <1% |
+
+**监控工具推荐**：
+- **基础监控**：云厂商自带的监控（阿里云云监控/腾讯云云监控）
+- **APM监控**：New Relic / Datadog（收费，功能强大）
+- **开源方案**：Prometheus + Grafana（免费，需自建）
+
+### 10.2 备份：最后的安全网
+
+**数据是无价的**！一定要定期备份。
+
+<DeploymentBackupDemo />
+
+**备份三要素**：
+
+1. **定期备份**：每天凌晨自动备份（用户访问少的时候）
+2. **多地存储**：本地 + 异地（防止单点故障）
+3. **定期恢复测试**：备份了要确保能恢复
+
+**备份策略**：
+
+```bash
+# 每天自动备份数据库
+0 2 * * * /usr/bin/mysqldump -u root -p密码 coffee_shop > /backup/db_$(date +\%Y\%m\%d).sql
+
+# 保留最近7天的备份
+find /backup -name "db_*.sql" -mtime +7 -delete
+
+# 自动上传到云存储（如阿里云OSS）
+/usr/bin/ossutil cp /backup/db_$(date +\%Y\%m\%d).sql oss://my-backup/db/
+```
 
 ---
 
-## 9. 上线前的最后检查 (Checklist)
+## 11. 故障排查：遇到问题怎么办？
 
-在按下“发布”按钮前，心里默念一遍：
+网站出问题了，别慌，按这个流程排查：
 
-- [ ] **域名**：解析通了吗？IP 对吗？
-- [ ] **安全**：HTTPS 绿锁有了吗？
-- [ ] **加速**：CDN 配好了吗？静态资源快吗？
-- [ ] **流程**：自动发布跑通了吗？能一键回滚吗？
-- [ ] **后路**：监控报警开了吗？数据库备份了吗？
+### 11.1 排查流程图
 
-如果都 OK，恭喜你，你的产品正式面世了！🚀
+<DeploymentTroubleshootDemo />
+
+### 11.2 常见问题速查表
+
+| 现象 | 可能原因 | 怎么办 |
+|------|---------|--------|
+| **网站打不开** | 域名没解析？服务器挂了？ | `ping 域名` 看通不通<br>`ssh` 连不上就是服务器挂了 |
+| **404 Not Found** | Nginx配置错了？文件路径不对？ | 检查 `nginx -t` 配置<br>看看 `root` 路径对不对 |
+| **502 Bad Gateway** | 后端服务挂了？端口没开？ | `pm2 list` 看服务在不在<br>`netstat -tlnp` 看端口监听 |
+| **HTTPS证书报错** | 证书过期了？域名不匹配？ | `certbot renew` 续期<br>检查证书域名是否正确 |
+| **更新不生效** | 浏览器缓存？CDN缓存？ | Ctrl+F5 强制刷新<br>去CDN控制台"刷新缓存" |
+| **很慢** | 服务器性能不够？CDN没配置？ | 查监控看CPU/内存<br>静态资源上CDN |
+
+---
+
+## 12. 上线前最后检查
+
+小明终于要正式开业了！在按下"发布"按钮前，再检查一遍：
+
+<DeploymentChecklistDemo />
+
+### 最终检查清单
+
+**基础检查**：
+- [ ] 代码已经构建（`npm run build`）
+- [ ] 服务器环境配置完成（Nginx + Node.js）
+- [ ] 域名解析正确（能ping通）
+- [ ] HTTPS证书正常（有🔒小锁）
+
+**性能检查**：
+- [ ] 首屏加载时间 <2秒
+- [ ] 图片已经压缩优化
+- [ ] CDN配置完成
+- [ ] 开启了Gzip压缩
+
+**安全检查**：
+- [ ] 数据库密码不是弱密码
+- [ ] 敏感信息没写在代码里
+- [ ] 开启了防火墙（只开必要的端口）
+- [ ] 配置了SQL注入防护
+
+**运维检查**：
+- [ ] 监控告警配置完成
+- [ ] 日志正常记录
+- [ ] 自动备份已设置
+- [ ] CI/CD流程测试通过
+
+**应急预案**：
+- [ ] 准备了回滚方案
+- [ ] 有故障联系机制
+- [ ] 备份恢复测试通过
+
+---
+
+## 13. 总结：服务上线的关键点
+
+小明的咖啡店网站终于上线了！让我们回顾一下整个过程：
+
+### 核心流程
+
+1. **构建**：把代码打包成浏览器懂的格式
+2. **部署**：把代码放到服务器上
+3. **配置**：Nginx、域名、HTTPS
+4. **优化**：CDN、负载均衡
+5. **自动化**：CI/CD解放双手
+6. **保障**：监控和备份守住底线
+
+### 关键原则
+
+| 原则 | 说明 |
+|------|------|
+| **小步快跑** | 先上线MVP（最小可用产品），再逐步完善 |
+| **自动化优先** | 能自动的别手动，减少人为失误 |
+| **监控先行** | 先建监控，再上功能 |
+| **备份为王** | 数据无价，备份是最后的防线 |
+| **安全第一** | HTTPS、防火墙、弱密码检查，一个都不能少 |
+
+### 学习路线
+
+**入门**（第1天）：
+- 用 Vercel/Netlify 免费部署一个静态网页
+
+**进阶**（第1周）：
+- 租一台云服务器
+- 手动部署一个 Node.js 应用
+- 配置域名和 HTTPS
+
+**实战**（第2-4周）：
+- 搭建完整的 CI/CD 流程
+- 配置 CDN 加速
+- 建立监控和备份体系
+
+**深入**（持续）：
+- 学习 Docker 容器化部署
+- 研究 Kubernetes 集群管理
+- 探索微服务架构
+
+---
+
+## 名词速查表
+
+| 名词 | 英文 | 人话解释 |
+|------|------|---------|
+| **部署** | Deployment | 把代码放到服务器上让人能访问 |
+| **构建** | Build | 把源代码翻译打包成浏览器懂的格式 |
+| **服务器** | Server | 一台永远不关机、连着互联网的电脑 |
+| **域名** | Domain Name | 网站的好记名字（如 baidu.com） |
+| **DNS** | Domain Name System | 域名解析系统，把域名翻译成IP |
+| **IP地址** | IP Address | 电脑在互联网上的门牌号 |
+| **HTTP** | HyperText Transfer Protocol | 网页传输协议（不安全） |
+| **HTTPS** | HTTP Secure | 安全的网页传输协议（加密） |
+| **Nginx** | Engine X | 一个高性能的Web服务器（门童） |
+| **反向代理** | Reverse Proxy | 转发请求到后端服务 |
+| **SSH** | Secure Shell | 远程连接服务器的工具 |
+| **CDN** | Content Delivery Network | 内容分发网络，全球加速 |
+| **负载均衡** | Load Balancing | 把流量分到多台服务器 |
+| **CI/CD** | Continuous Integration/Deployment | 持续集成/持续部署（自动化） |
+| **监控** | Monitoring | 盯着服务器看有没有问题 |
+| **备份** | Backup | 复份数据，防丢失 |