diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentOverviewDemo.vue
index 72e0f82..b19c514 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentOverviewDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentOverviewDemo.vue
@@ -1,70 +1,116 @@
 <template>
   <div class="deployment-overview">
     <div class="demo-header">
-      <span class="icon">🚀</span>
       <span class="title">服务上线全流程</span>
       <span class="subtitle">从代码到用户眼中的网页</span>
     </div>
 
     <div class="demo-content">
-      <div class="service-flow">
-        <div class="flow-step" :class="{ active: currentStep >= 1 }">
-          <div class="step-icon">📦</div>
-          <div class="step-title">Build</div>
-          <div class="tech-term">源码→可执行文件</div>
-        </div>
-        <span class="flow-arrow">→</span>
-        <div class="flow-step" :class="{ active: currentStep >= 2 }">
-          <div class="step-icon">🖥️</div>
-          <div class="step-title">Server</div>
-          <div class="tech-term">24h运行的电脑</div>
-        </div>
-        <span class="flow-arrow">→</span>
-        <div class="flow-step" :class="{ active: currentStep >= 3 }">
-          <div class="step-icon">�</div>
-          <div class="step-title">Deploy</div>
-          <div class="tech-term">代码放到服务器</div>
-        </div>
-        <span class="flow-arrow">→</span>
-        <div class="flow-step" :class="{ active: currentStep >= 4 }">
-          <div class="step-icon">🔀</div>
-          <div class="step-title">Nginx</div>
-          <div class="tech-term">接收请求分发响应</div>
-        </div>
-        <span class="flow-arrow">→</span>
-        <div class="flow-step" :class="{ active: currentStep >= 5 }">
-          <div class="step-icon">�</div>
-          <div class="step-title">DNS</div>
-          <div class="tech-term">域名→IP地址</div>
-        </div>
-        <span class="flow-arrow">→</span>
-        <div class="flow-step" :class="{ active: currentStep >= 6 }">
-          <div class="step-icon">�</div>
-          <div class="step-title">HTTPS</div>
-          <div class="tech-term">加密数据传输</div>
-        </div>
-        <span class="flow-arrow">→</span>
-        <div class="flow-step" :class="{ active: currentStep >= 7 }">
-          <div class="step-icon">⚡</div>
-          <div class="step-title">CDN</div>
-          <div class="tech-term">就近访问加速</div>
-        </div>
-        <span class="flow-arrow">→</span>
-        <div class="flow-step" :class="{ active: currentStep >= 8 }">
-          <div class="step-icon">🔄</div>
-          <div class="step-title">CI/CD</div>
-          <div class="tech-term">自动化部署流程</div>
-        </div>
-        <span class="flow-arrow">→</span>
-        <div class="flow-step" :class="{ active: currentStep >= 9 }">
-          <div class="step-icon">�</div>
-          <div class="step-title">Monitor</div>
-          <div class="tech-term">监控运行状态</div>
+      <div class="flow-section">
+        <div class="section-title">开发阶段</div>
+        <div class="service-flow">
+          <div class="flow-step" :class="{ active: currentStep >= 1 }" @mouseenter="(e) => showTooltip(e, 'git')" @mouseleave="hideTooltip">
+            <div class="step-title">Git</div>
+            <div class="tech-term">代码版本控制</div>
+          </div>
+          <span class="flow-arrow">→</span>
+          <div class="flow-step" :class="{ active: currentStep >= 2 }" @mouseenter="(e) => showTooltip(e, 'cicd')" @mouseleave="hideTooltip">
+            <div class="step-title">CI/CD</div>
+            <div class="tech-term">自动化流水线</div>
+          </div>
         </div>
       </div>
 
+      <div class="flow-section">
+        <div class="section-title">构建阶段</div>
+        <div class="service-flow">
+          <div class="flow-step" :class="{ active: currentStep >= 3 }" @mouseenter="(e) => showTooltip(e, 'test')" @mouseleave="hideTooltip">
+            <div class="step-title">Test</div>
+            <div class="tech-term">自动化测试</div>
+          </div>
+          <span class="flow-arrow">→</span>
+          <div class="flow-step" :class="{ active: currentStep >= 4 }" @mouseenter="(e) => showTooltip(e, 'build')" @mouseleave="hideTooltip">
+            <div class="step-title">Build</div>
+            <div class="tech-term">编译打包</div>
+          </div>
+          <span class="flow-arrow">→</span>
+          <div class="flow-step" :class="{ active: currentStep >= 5 }" @mouseenter="(e) => showTooltip(e, 'artifact')" @mouseleave="hideTooltip">
+            <div class="step-title">Artifact</div>
+            <div class="tech-term">构建产物存储</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flow-section">
+        <div class="section-title">部署阶段</div>
+        <div class="service-flow">
+          <div class="flow-step" :class="{ active: currentStep >= 6 }" @mouseenter="(e) => showTooltip(e, 'server')" @mouseleave="hideTooltip">
+            <div class="step-title">Server</div>
+            <div class="tech-term">服务器环境</div>
+          </div>
+          <span class="flow-arrow">→</span>
+          <div class="flow-step" :class="{ active: currentStep >= 7 }" @mouseenter="(e) => showTooltip(e, 'deploy')" @mouseleave="hideTooltip">
+            <div class="step-title">Deploy</div>
+            <div class="tech-term">部署应用</div>
+          </div>
+          <span class="flow-arrow">→</span>
+          <div class="flow-step" :class="{ active: currentStep >= 8 }" @mouseenter="(e) => showTooltip(e, 'nginx')" @mouseleave="hideTooltip">
+            <div class="step-title">Nginx</div>
+            <div class="tech-term">反向代理</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flow-section">
+        <div class="section-title">网络配置</div>
+        <div class="service-flow">
+          <div class="flow-step" :class="{ active: currentStep >= 9 }" @mouseenter="(e) => showTooltip(e, 'https')" @mouseleave="hideTooltip">
+            <div class="step-title">HTTPS</div>
+            <div class="tech-term">SSL证书</div>
+          </div>
+          <span class="flow-arrow">→</span>
+          <div class="flow-step" :class="{ active: currentStep >= 10 }" @mouseenter="(e) => showTooltip(e, 'cdn')" @mouseleave="hideTooltip">
+            <div class="step-title">CDN</div>
+            <div class="tech-term">内容分发加速</div>
+          </div>
+          <span class="flow-arrow">→</span>
+          <div class="flow-step" :class="{ active: currentStep >= 11 }" @mouseenter="(e) => showTooltip(e, 'dns')" @mouseleave="hideTooltip">
+            <div class="step-title">DNS</div>
+            <div class="tech-term">域名解析</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flow-section">
+        <div class="section-title">运维阶段</div>
+        <div class="service-flow">
+          <div class="flow-step" :class="{ active: currentStep >= 12 }" @mouseenter="(e) => showTooltip(e, 'monitor')" @mouseleave="hideTooltip">
+            <div class="step-title">Monitor</div>
+            <div class="tech-term">监控状态</div>
+          </div>
+          <span class="flow-arrow">→</span>
+          <div class="flow-step" :class="{ active: currentStep >= 13 }" @mouseenter="(e) => showTooltip(e, 'log')" @mouseleave="hideTooltip">
+            <div class="step-title">Log</div>
+            <div class="tech-term">日志收集</div>
+          </div>
+          <span class="flow-arrow">→</span>
+          <div class="flow-step" :class="{ active: currentStep >= 14 }" @mouseenter="(e) => showTooltip(e, 'alert')" @mouseleave="hideTooltip">
+            <div class="step-title">Alert</div>
+            <div class="tech-term">告警通知</div>
+          </div>
+        </div>
+      </div>
+
+      <Teleport to="body">
+        <Transition name="fade">
+          <div v-if="tooltipVisible" class="tooltip-box" :style="tooltipStyle">
+            <div class="tooltip-title">{{ tooltipContent.title }}</div>
+            <div class="tooltip-content" v-html="tooltipContent.content"></div>
+          </div>
+        </Transition>
+      </Teleport>
+
       <div class="info-box">
-        <span class="icon">💡</span>
         <strong>核心原则</strong>：小步快跑 → 先上线MVP → 逐步完善
       </div>
     </div>
@@ -72,9 +118,369 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
 
 const currentStep = ref(0)
+const tooltipVisible = ref(false)
+const tooltipStyle = reactive({
+  top: '0px',
+  left: '0px'
+})
+
+const tooltipContent = reactive({
+  title: '',
+  content: ''
+})
+
+const tooltipData = {
+  git: {
+    title: 'Git - 代码管理',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>想象一下，你写论文的时候，每次修改都Ctrl+S保存一个新文件：论文_v1.doc、论文_v2.doc、论文_v3.doc...这样你可以随时找回之前的版本。Git 就是干这个事情的，不过它是专门管代码的"另存为"。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>如果你是一个人开发，可能感觉不到它的好处。但如果是团队协作，5个人同时改一个文件，没有Git的话简直是一场灾难——你覆盖我的代码，我覆盖你的代码，最后谁也不知道哪个版本是最新的。</p>
+        <p>有了Git之后，每个人都在自己的"分支"上改东西，改完后再合并到一起。就像几个人同时装修一套房子，每个人负责不同的房间，最后统一验收合并。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p>最常用的平台有 GitHub、GitLab、Gitee（国内的，访问速度快）。你在本地写完代码后，用 <code>git add .</code> 把改动暂存起来，用 <code>git commit -m "修复了登录bug"</code> 提交本次修改，然后用 <code>git push</code> 把代码推送到云端。</p>
+        <p>下次想看看之前改了什么，用 <code>git log</code> 就能看到完整的修改历史。</p>
+      </div>
+    `
+  },
+  cicd: {
+    title: 'CI/CD - 自动化的力量',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>你可以把它想象成一个全年无休的"机器人助手"。以前你每次上线新功能，都需要手动做一堆事情：打开电脑、登录服务器、拉取最新代码、安装依赖、运行测试、打包、部署...累死人不说，还容易漏掉某个步骤。</p>
+        <p>有了CI/CD之后，你只需要把代码往GitHub上一推，机器人就自动帮你完成剩下的所有事情：拉代码 → 安装依赖 → 跑测试 → 打包构建 → 部署上线，全部自动完成，你该干嘛干嘛去。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>第一个好处是省事儿，你不用每次都手动操作了。第二个好处是安全——机器人不会忘记跑测试，不会喝多了手抖打错命令。第三个好处是快，可能原本手动需要半小时的活，机器人3分钟就干完了。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p>GitHub Actions 是最简单的选择，因为它集成在GitHub里，你只需要在项目里加一个 .github/workflows 目录，放一个配置文件就行。配置文件里写清楚：什么时候触发、要做哪些步骤。</p>
+        <p>配置文件大概长这样：代码推送后 -> 安装依赖 -> 运行测试 -> 打包 -> 部署到服务器。</p>
+      </div>
+    `
+  },
+  test: {
+    title: 'Test - 自动化测试',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>你可以理解为"考前模拟卷"。正式上线之前，先让电脑跑一遍测试用例，看看有没有bug。这就像考试前做几套模拟题，发现知识盲区赶紧补上，总比真正上考场才发现不会强。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>手动测试太累了，而且很容易漏掉一些边界情况。比如你改了一个登录功能的代码，表面上看没问题，但实际上可能把"忘记密码"功能给弄坏了。人工测试很容易忽略这种"顺带手"的改动，但电脑跑测试用例的话，所有相关功能都会被检查一遍。</p>
+        <p>而且测试跑一次就行了，下次改代码再跑一次，不用你每次都手动点点点。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p>前端项目常用 Jest 或 Vitest 来写测试。你需要先写测试用例，比如"点击登录按钮，输入正确的用户名密码，应该跳转首页"。写好之后，每次 <code>npm run test</code> 就能自动跑这些测试。</p>
+        <p>不用追求100%覆盖率，先把核心业务流程测了就行，比如用户注册、登录、下单、支付这些关键路径。</p>
+      </div>
+    `
+  },
+  build: {
+    title: 'Build - 把代码变成可运行的包',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>你写的 Vue/React 代码，浏览器根本看不懂。浏览器只认识纯HTML、CSS、JavaScript这些"原始语言"。</p>
+        <p>这就好像你写中文论文要发表到国际期刊，得先翻译成英文一样。Build 就是这个"翻译"的过程——把你写的高级代码（Vue/React），翻译成浏览器能看懂的普通代码（HTML/CSS/JS）。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>不只是翻译，Build 还会帮你做很多优化：</p>
+        <ul>
+          <li><strong>压缩</strong>：把代码里的空格、注释全删掉，变量名也改成短的，文件能小很多，用户加载就快</li>
+          <li><strong>合并</strong>：你可能写了10个JS文件，打包后变成1个大文件，减少HTTP请求</li>
+          <li><strong>混淆</strong>：代码压缩后人类基本看不懂了，也算是一种"加密"吧</li>
+          <li><strong>缓存</strong>：文件名会加一串哈希值（比如 app.abc123.js），代码变了文件名就变，浏览器就会重新下载，没变的就用缓存</li>
+        </ul>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p>运行 <code>npm run build</code>（或 <code>yarn build</code>），然后去项目根目录的 dist 文件夹里找打包好的文件。这些就是最终要上传到服务器的文件。</p>
+      </div>
+    `
+  },
+  artifact: {
+    title: 'Artifact - 构建产物存储',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>你可以理解为"成品仓库"。Build 之后产生的文件（dist目录里的那些HTML/CSS/JS），不能直接扔掉，得找个地方存起来。</p>
+        <p>这就像做好的快递包裹，不是放在配送站就行，得存进仓库里，等要发货的时候再取。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>第一，每次都重新Build太慢了，存起来下次直接用。第二，你可以给每次Build打上版本标签（比如 v1.0.0、v1.0.1），万一上线后发现有bug，可以一键回滚到上一个版本。第三，如果你有多个服务器部署，可以从仓库统一拉取，不用每个服务器都Build一次。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p>简单方案：直接把Build产物上传到阿里云OSS或AWS S3这些云存储。</p>
+        <p>高级方案：使用 Docker Registry（如果你用Docker的话）或 Nexus。这些工具可以帮你管理不同版本的构建产物，还能设置访问权限。</p>
+      </div>
+    `
+  },
+  server: {
+    title: 'Server - 租一台永远不关机的电脑',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>就是你租的一台放在专业机房的电脑，24小时不关机，网络永远接通。这东西你肯定见过——就是那些互联网公司说的"服务器"。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>总不能让你自己的电脑24小时开着吧？且不说电费，你家网络也没那么稳定，万一断网了网站就访问不了。而且你家的电脑没有公网IP，别人根本找不到你。</p>
+        <p>服务器放在专业机房，电力有备用电源，网络是千兆光纤，还有专人维护，温度湿度都控制得好好的。你只需要SSH远程登录上去管理就行。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p>国内推荐阿里云、腾讯云，新用户首年只要几十块钱。国外推荐 AWS、DigitalOcean（支持支付宝）。</p>
+        <p>配置不用太高，1核2G内存够跑个人项目了。学生的话阿里云有学生认证，更便宜。</p>
+        <p>买完服务器后，你会拿到一个IP地址（像 123.45.67.89 这样的）和密码，用 SSH 客户端（如 Termius、Xshell）登录上去就能管理了。</p>
+      </div>
+    `
+  },
+  deploy: {
+    title: 'Deploy - 把代码上传到服务器',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>就是把你本地Build好的文件，上传到服务器上，然后启动服务让网站跑起来。</p>
+        <p>这就像你开餐厅，厨房准备好了（代码写完了Build好了），得把菜端上餐桌（部署到服务器），客人才能吃到。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>代码在你本地电脑上，只有你自己能访问。要让全世界的用户都能访问，必须得部署到服务器上。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p><strong>最简单的方式</strong>：用FTP工具（如 FileZilla）手动上传文件到服务器。</p>
+        <p><strong>推荐的方式</strong>：用 Docker 部署。你需要先在服务器上安装Docker，然后写一个 Dockerfile（就像食谱一样，告诉我怎么运行你的应用），最后 <code>docker build</code> + <code>docker run</code> 就搞定。</p>
+        <p>Docker 的好处是"一次构建，到处运行"——在本地能跑，放到服务器上也一定能跑，不会出现"在我电脑上能跑啊"这种问题。</p>
+      </div>
+    `
+  },
+  nginx: {
+    title: 'Nginx - 站在门口的服务员',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>Nginx 就像是餐厅门口的前台服务员。用户来了，先找 Nginx，Nginx 再根据情况把用户分配到不同的"厨师"（你的应用）那里。</p>
+        <p>它站在服务器门口，帮你的应用挡刀干很多累活：同时接待很多用户、处理静态文件（图片/CSS/JS）、缓存响应等等。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>如果没有 Nginx，让你的应用直接面对用户，会有很多问题：</p>
+        <ul>
+          <li>一个应用只能跑一个端口，用户全挤在一起</li>
+          <li>处理静态文件很慢，拖累业务逻辑</li>
+          <li>没有负载均衡，一台服务器扛不住</li>
+        </ul>
+        <p>Nginx 就是来解决这些问题的，它可以监听80端口（HTTP默认端口），然后把请求转发到你应用的端口（比如3000）。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p>Nginx 配置文件看起来复杂，其实核心就几行：</p>
+        <pre>server {
+    listen 80;
+    server_name yourdomain.com;
+    
+    location / {
+        proxy_pass http://localhost:3000;
+    }
+    
+    location /static/ {
+        alias /var/www/static/;
+    }
+}</pre>
+        <p>意思就是：监听80端口，域名是 yourdomain.com，用户访问 / 路径就转发到本地3000端口的应用，访问 /static/ 就直接返回静态文件。</p>
+      </div>
+    `
+  },
+  https: {
+    title: 'HTTPS - 给网站装把锁',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>HTTPS 就是 HTTP + SSL/TLS，相当于在 HTTP 外面加了一层加密。简单说就是给你网站装一把"锁"，用户和服务器之间传输的数据都是加密的，第三者就算截获了也看不懂。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>没有HTTPS的话，用户在你网站输入的密码、填的个人信息，都是明文传输的，中间的任何人都能偷看到。现在浏览器很聪明，会给没有HTTPS的网站显示"不安全"，用户一看就不敢用了。</p>
+        <p>而且Google等搜索引擎也会优先收录HTTPS的网站，影响SEO。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p><strong>最省钱的方式</strong>：用 Let's Encrypt，完全免费。配合 Certbot 工具可以自动申请和续期，三四年不用管。</p>
+        <p><strong>最简单的方式</strong>：用 Cloudflare，它提供免费的HTTPS证书，而且是DNS级别的，你只需要把域名DNS迁到Cloudflare就行，证书自动搞定。</p>
+        <p>证书安装好后，Nginx 配置里加一行 <code>ssl_certificate</code> 指向证书文件，再加个 <code>listen 443 ssl</code> 就行。</p>
+      </div>
+    `
+  },
+  cdn: {
+    title: 'CDN - 让用户就近访问',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>CDN 就是"内容分发网络"。想象一下，你在全中国甚至全球各地都开了分店，用户访问时自动被引导到最近的那家店拿东西，而不是都跑你总店来。</p>
+        <p>具体来说，CDN会在各地部署"边缘节点"，把网站的静态资源（图片、CSS、JS）缓存到这些节点上。用户访问时，自动连接到离他最近的节点拿资源，速度当然就快了。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>如果没有CDN，全世界用户都从你一个服务器下载资源。美国的用户要跨越整个太平洋来加载，速度慢死了。而且你服务器带宽是有限的，人多了就卡。</p>
+        <p>有了CDN，美国用户从美国的节点拿资源，日本用户从日本的节点拿，大家都不跨海了，速度飞快，服务器压力也小了。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p><strong>最简单的方式</strong>：用 Cloudflare，注册账号，把域名DNS改成它给的DNS地址，就完事儿了。全程不需要配置服务器。</p>
+        <p>国内的话阿里云CDN、腾讯云CDN都不错，不过需要你把域名DNS改过去，还要在CDN控制台添加域名配置。</p>
+        <p>一般配置思路：CDN 域名 → 指向你服务器IP → 用户访问时CDN回源到你服务器拉取资源并缓存。</p>
+      </div>
+    `
+  },
+  dns: {
+    title: 'DNS - 域名的作用',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>DNS 就是"域名系统"，相当于一本"电话号码簿"。用户输入的是好记的域名（如 example.com），但电脑只认IP地址（如 192.168.1.1），DNS就是负责把域名翻译成IP地址的。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>你总不能告诉用户"请访问 123.45.67.89 这个IP地址"吧？既不好记也不专业。买一个域名（如 myproject.com），用户输入域名就能访问，这才是正确的姿势。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p>第一步：买域名。阿里云、腾讯云、GoDaddy 都能买，一年几十块。</p>
+        <p>第二步：配置DNS记录。最常见的是"A记录"——把域名指向服务器IP。</p>
+        <p>配置示例：在DNS控制台添加一条记录：</p>
+        <ul>
+          <li>记录类型：A</li>
+          <li>主机记录：@（或者 www）</li>
+          <li>记录值：你的服务器IP（如 123.45.67.89）</li>
+        </ul>
+        <p>第三步：等生效。DNS修改后需要几分钟到24小时全球生效，可以用 <code>ping 你的域名</code> 命令检查是否生效。</p>
+      </div>
+    `
+  },
+  monitor: {
+    title: 'Monitor - 监控网站的健康状态',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>监控就是给服务器装一个"体检仪"，实时监测各项指标：CPU使用率、内存占用、磁盘空间、网络流量、应用响应时间、错误率等等。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>服务器不会说话，它不舒服了不会主动告诉你。等用户打电话过来说"网站打不开了"，你才去处理黄花菜都凉了。</p>
+        <p>有了监控，你可以设置阈值报警：CPU超过80%提醒我、内存超过90%提醒我、响应时间超过3秒提醒我。这样你可以在问题变严重之前就发现并处理。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p><strong>最简单的方式</strong>：用 Uptime Robot。注册账号，添加你的网站URL，它会每5分钟检查一次网站是否正常。免费版本可以监控50个网站，不支持微信/邮件通知但支持短信。网站挂了会发邮件通知你。</p>
+        <p><strong>进阶方式</strong>：用阿里云监控、腾讯云监控（如果你服务器在这些云商买的话，自带监控功能）。</p>
+        <p><strong>专业方式</strong>：用 Prometheus + Grafana，可以监控各种指标并做出漂亮的可视化图表，不过配置稍微复杂一些。</p>
+      </div>
+    `
+  },
+  log: {
+    title: 'Log - 出了事上哪查原因',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>日志就是应用运行时的"日记本"，记录了程序运行过程中的各种信息：谁在什么时候访问了什么接口、返回了什么结果、有没有报错、报错信息是什么...</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>出问题时，日志就是破案的关键线索。没有日志，你只能靠"玄学"猜问题。有了日志，你可以清楚地看到：用户在几点几分访问了哪个功能，程序在哪一行报错了，错误信息是什么。</p>
+        <p>就像汽车的黑匣子——正常行驶时没人看它，但出事故了就得靠它还原真相。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p><strong>最简单的方式</strong>：把日志写到服务器的文件里（logs/access.log）。出问题时SSH登录服务器，用 <code>grep "关键词" logs/app.log</code> 搜索相关日志。</p>
+        <p><strong>进阶方式</strong>：用专业工具收集日志，比如 Loki（免费）、ELK（Elasticsearch + Logstash + Kibana，功能强大但有点复杂）、或者国内的日志服务。</p>
+        <p>建议日志里至少包含这些信息：时间戳、请求ID（traceId）、操作类型、关键参数、返回结果、错误堆栈。</p>
+      </div>
+    `
+  },
+  alert: {
+    title: 'Alert - 出问题了自动通知你',
+    content: `
+      <div class="tooltip-section">
+        <h4>这是什么东西？</h4>
+        <p>告警就是当监控系统发现问题（如服务器挂了、CPU爆了、错误率飙升），自动发消息通知你。你不用一直盯着监控面板看，它会自动叫你来处理。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>为什么要用这个？</h4>
+        <p>你不可能24小时盯着监控面板看吧？就算你可以，你睡觉的时候怎么办？告警系统就像烟雾报警器——着火了自动响，不用你一直盯着有没有烟。</p>
+      </div>
+      <div class="tooltip-section">
+        <h4>怎么用？</h4>
+        <p>最常用的方式是建一个钉钉群或企业微信群，然后添加机器人。拿到机器人Webhook地址后，配置到监控工具里就行。</p>
+        <p>告警通知渠道优先级建议：</p>
+        <ul>
+          <li><strong>紧急（网站完全挂掉）</strong>：发短信 + 打电话，必须马上知道</li>
+          <li><strong>严重（错误率飙升）</strong>：发钉钉/微信消息，看到就处理</li>
+          <li><strong>一般（CPU偏高）</strong>：发邮件汇总，一天看一次就行</li>
+        </ul>
+        <p>别什么问题都发短信把自己烦到了，设好告警级别很重要。</p>
+      </div>
+    `
+  }
+}
+
+function showTooltip(event, key) {
+  const data = tooltipData[key]
+  if (!data) return
+  
+  tooltipContent.title = data.title
+  tooltipContent.content = data.content
+  
+  const rect = event.target.getBoundingClientRect()
+  const tooltipWidth = 480
+  const tooltipMaxHeight = 550
+  const padding = 16
+  
+  let left = rect.right + padding
+  let top = rect.top
+  
+  if (left + tooltipWidth > window.innerWidth) {
+    left = rect.left - tooltipWidth - padding
+  }
+  
+  if (left < 0) {
+    left = padding
+  }
+  
+  if (top + tooltipMaxHeight > window.innerHeight) {
+    top = window.innerHeight - tooltipMaxHeight - padding
+  }
+  
+  if (top < 0) {
+    top = padding
+  }
+  
+  tooltipStyle.top = `${top}px`
+  tooltipStyle.left = `${left}px`
+  tooltipVisible.value = true
+}
+
+function hideTooltip() {
+  tooltipVisible.value = false
+}
 </script>
 
 <style scoped>
@@ -82,24 +488,23 @@ const currentStep = ref(0)
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 0.75rem;
+  padding: 1rem;
   margin: 1rem 0;
+  position: relative;
 }
 
 .demo-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.demo-header .icon {
-  font-size: 1.25rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .demo-header .title {
   font-weight: bold;
-  font-size: 1rem;
+  font-size: 1.1rem;
 }
 
 .demo-header .subtitle {
@@ -108,32 +513,33 @@ const currentStep = ref(0)
   margin-left: 0.5rem;
 }
 
-.intro-text {
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.5;
-  margin-bottom: 0.75rem;
-  padding: 0.5rem;
-  background: var(--vp-c-bg);
-  border-radius: 6px;
-}
-
-.intro-text strong {
-  color: var(--vp-c-brand-1);
-  font-weight: 500;
-}
-
 .demo-content {
   margin-bottom: 0.5rem;
 }
 
+.flow-section {
+  margin-bottom: 1rem;
+}
+
+.flow-section:last-of-type {
+  margin-bottom: 0.5rem;
+}
+
+.section-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--vp-c-brand-1);
+  margin-bottom: 0.5rem;
+  padding-left: 0.25rem;
+}
+
 .service-flow {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 0.25rem;
   overflow-x: auto;
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.25rem;
 }
 
 .flow-step {
@@ -141,17 +547,20 @@ const currentStep = ref(0)
   flex-direction: column;
   align-items: center;
   gap: 0.25rem;
-  padding: 0.5rem;
+  padding: 0.5rem 0.75rem;
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-divider);
   border-radius: 8px;
   transition: all 0.2s ease;
   flex-shrink: 0;
-  min-width: 85px;
+  min-width: 80px;
+  cursor: pointer;
 }
 
 .flow-step:hover {
   border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .flow-step.active {
@@ -159,20 +568,16 @@ const currentStep = ref(0)
   background: var(--vp-c-brand-soft);
 }
 
-.step-icon {
-  font-size: 1rem;
-}
-
 .step-title {
   font-weight: 600;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   color: var(--vp-c-text-1);
   text-align: center;
   white-space: nowrap;
 }
 
 .tech-term {
-  font-size: 0.6rem;
+  font-size: 0.65rem;
   color: var(--vp-c-text-2);
   text-align: center;
   white-space: normal;
@@ -180,21 +585,117 @@ const currentStep = ref(0)
 }
 
 .flow-arrow {
-  font-size: 1rem;
+  font-size: 0.9rem;
   color: var(--vp-c-text-3);
   flex-shrink: 0;
 }
 
 .info-box {
   background: var(--vp-c-bg-alt);
-  padding: 0.5rem;
+  padding: 0.75rem;
   border-radius: 6px;
-  font-size: 0.8rem;
+  font-size: 0.85rem;
   color: var(--vp-c-text-2);
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
 }
 
-.info-box .icon {
-  margin-right: 0.25rem;
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
+
+<style>
+.tooltip-box {
+  position: fixed;
+  max-width: 480px;
+  padding: 1.25rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+  z-index: 9999;
+}
+
+.tooltip-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--vp-c-brand-1);
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.tooltip-content {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.tooltip-section {
+  margin-bottom: 1.25rem;
+}
+
+.tooltip-section:last-child {
+  margin-bottom: 0;
+}
+
+.tooltip-section h4 {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+}
+
+.tooltip-section p {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.7;
+  margin-bottom: 0.5rem;
+}
+
+.tooltip-section ul {
+  margin: 0.5rem 0;
+  padding-left: 1.25rem;
+}
+
+.tooltip-section li {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin-bottom: 0.35rem;
+}
+
+.tooltip-section pre {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 0.75rem;
+  overflow-x: auto;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-1);
+  line-height: 1.5;
+  margin: 0.5rem 0;
+}
+
+.tooltip-section code {
+  background: var(--vp-c-bg-soft);
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  color: var(--vp-c-brand-1);
+}
+
+.tooltip-section strong {
+  color: var(--vp-c-text-1);
+  font-weight: 600;
 }
 </style>
diff --git a/docs/zh-cn/appendix/deployment.md b/docs/zh-cn/appendix/deployment.md
index b150a37..b672908 100644
--- a/docs/zh-cn/appendix/deployment.md
+++ b/docs/zh-cn/appendix/deployment.md
@@ -1,4 +1,4 @@
-# 服务上线之旅
+# 服务上线之旅：从零开始的完整指南
 
 ::: tip 🎯 核心问题
 **代码在本地跑得好好的，怎么让全世界的人都能访问？**
@@ -8,19 +8,15 @@
 
 ## 1. 为什么要"服务上线"？
 
-想象小明在家做了一桌子菜，现在要开餐厅让所有人来吃。这可不是"把菜端出去"那么简单。
+想象一下，你在自己家里做了一桌子菜，非常好吃。但问题是，只有自家人能吃到，邻居、保安、陌生人他们都尝不到。
+
+怎么办？你需要**把菜端到餐厅里**。这就是"服务上线"要做的事——把你写的代码，从个人电脑，搬到一个7×24小时永远开着的"公共电脑"上。这样任何人只要能上网，就能访问你的网站。
 
 <DeploymentOverviewDemo />
 
-**服务上线是一场"搬家+开业"的大工程**：
-1. **构建** → 打包代码成服务器能懂的格式
-2. **服务器** → 租一台永远不关机的电脑
-3. **部署** → 把代码上传到服务器
-4. **环境** → 配置 Nginx、Node.js
-5. **域名** → 配置 DNS，让用户能找到
-6. **HTTPS** → 安装证书，保护数据安全
-7. **CI/CD** → 自动化部署，解放双手
-8. **监控** → 盯控和备份，守住底线
+服务上线涉及很多环节。就像开餐厅不仅仅是端菜出去，你还需要租店面、装修、办执照、雇服务员等。开发网站也是同理。从代码到用户能访问的网站，中间隔着很多步骤。需要一步步完成构建、部署、配置网络、保证安全等工作。
+
+下面我会把整个流程拆开来讲。每个环节都掰碎、揉细。保证连完全没基础的小白也能看懂。
 
 ---
 
@@ -28,373 +24,679 @@
 
 ### 2.1 为什么要构建？
 
-浏览器只认识 HTML/CSS/JS，不认识 Vue 组件。**构建（Build）就是"打包外卖"的过程**。
+新手常问：代码写好了，为什么不能直接放到服务器上让用户访问？
+
+要回答这个问题，先搞清楚你写的代码是什么格式。你可能用 Vue、React、Express、Koa 等框架。这些框架有一个共同特点：**它们不是给浏览器或服务器直接用的**。
+
+举个例子。你写 Vue 代码时，是不是用过 `<template>`、`<script setup>` 这种标签？这种语法只有 Vue 认识。浏览器根本看不懂。浏览器只认识三种语言：HTML（网页结构）、CSS（网页样式）、JavaScript（网页逻辑）。Vue 组件语法对浏览器来说就像天书，完全无法理解。
+
+所以在把代码放到服务器之前，必须做一件重要的事：**把它翻译成浏览器能看懂的语言**。这个翻译过程叫做"构建"（Build）。
+
+### 2.2 构建具体做什么？
+
+构建不只是翻译。它还会做很多优化。让网站跑起来更快、更省资源。详细说说它具体都干了哪些活：
+
+**第一步：解析依赖**
+
+写代码时，会用到各种第三方库。比如 Vue、Vue Router、Axios、Vite 等。这些库不可能每次都让用户从 npm 下载。那样太慢了。构建工具会分析代码，把所有依赖找出来。然后把它们"打包"到一起。
+
+**第二步：编译转换**
+
+这是最核心的一步。把 Vue 组件编译成 HTML 和 JavaScript。把 SASS/LESS 编译成 CSS。把 ES6+ 新语法转换成兼容性更好的 ES5 代码。这步完成后，代码就从"开发者能看懂的格式"变成"机器能执行的格式"。
+
+**第三步：压缩混淆**
+
+压缩就是把所有空格、换行、注释删掉。把变量名从英文单词改成单个字母。比如 `userName` 变成 `a`，`calculateTotalPrice` 变成 `b`。这样文件大小大幅减小。用户下载起来就快多了。混淆后的代码人类基本看不懂。也能起到一点"保护代码"的作用。
+
+**第四步：代码分割**
+
+可能写了10个页面。每个页面有自己的代码。但用户可能只访问其中一个页面。为什么要下载其他9个页面的代码？构建工具会把代码分割成多个小块。用户访问哪个页面就下载哪个页面的代码。这就是"按需加载"。能大幅提升首次访问的速度。
+
+**第五步：生成哈希**
+
+这是非常重要的一步。但很多人会忽略。构建完成后，文件名会变成类似 `app.abc123.js`、`vendor.def456.css` 这样的格式。后面那串字母数字混合的字符串叫"哈希"。
+
+哈希的作用是：当代码有任何改动时，哈希值就会变化。浏览器就知道"这个文件变了，需要重新下载"。没变的文件，浏览器继续使用缓存。不用重复下载。这样既能保证用户看到最新代码，又能充分利用缓存提升速度。
 
 <DeploymentBuildDemo />
 
-**构建做了什么**：
-- **翻译**：Vue → HTML/CSS/JS
-- **压缩**：减小代码体积（省流量、加载快）
-- **合并**：多个文件 → 几个大包（减少请求）
-- **哈希**：文件名加指纹（`app.abc123.js`），缓存友好
+### 2.3 怎么执行构建？
+
+大多数现代前端项目都已经配好构建工具。只需要记住一个命令：
 
 ```bash
+# 如果用 npm
 npm run build
+
+# 如果用 yarn
+yarn build
+
+# 如果用 pnpm
+pnpm build
 ```
 
+运行完后，去项目根目录找一个叫 `dist` 的文件夹（有时也叫 `build` 或 `.output`）。里面就是构建好的所有文件。这些文件就是最终要上传到服务器的东西。不需要再做任何修改。直接拖到服务器上就行。
+
+### 2.4 构建产物里有什么？
+
+打开 dist 文件夹，会看到里面主要是三类文件：
+
+- **HTML文件**：通常叫 `index.html`。这是入口文件。浏览器首先加载的就是它。
+- **JS文件**：所有 JavaScript 代码。可能是1个也可能是好几个。
+- **CSS文件**：所有样式代码。可能内联在 HTML 里，也可能是单独的 CSS 文件。
+
+如果是比较复杂的后端项目（比如 Node.js），构建产物可能是一个可执行文件，或者一个 Docker 镜像。但原理是一样的：把代码变成服务器能直接运行的形式。
+
 ---
 
-## 3. 服务器：找房子
+## 3. 服务器：找一台永远不关门的"房子"
 
-### 3.1 服务器是什么？
+### 3.1 服务器到底是什么？
 
-服务器 = **一台永远不关机、连着互联网的电脑**
+很多人第一次听到"服务器"，觉得是什么高大上的神秘设备。其实没那么复杂。**服务器就是一台电脑**。一台永远不关机、一直插着网线的电脑。
+
+可能有人问：我自己家里不是有电脑吗？为什么要额外花钱租服务器？
+
+这个问题问得好。帮你分析一下：
+
+首先，你家的电脑不可能24小时开着。你要出门、要睡觉、偶尔还会死机重启。但服务器不一样。它专门用来干这个。可以365天全年无休地运行。网站随时都能访问。
+
+其次，你家的网络也不行。家用宽带的上传速度通常很慢。而且家用宽带的 IP 是动态变化的。今天是这个 IP，明天可能就变成另外一个了。根本没法用来做网站服务器。服务器用的是数据中心的高速网络。IP 固定，网速飞快。
+
+第三，你家的电脑没有"公网IP"。什么叫公网IP？就是全世界独一无二的地址。只有有这个地址，别人才能在互联网上找到你的电脑。你家电脑的 IP 通常只能在你家局域网里用。外面的人根本找不到你。服务器就不同了。它有一个固定的公网 IP。全世界的人都能通过这个 IP 找到它。
 
 <DeploymentServerDemo />
 
 ### 3.2 怎么选服务器？
 
-::: tip 💡 选型建议
-- **个人项目/学习**：1核2G，约¥100-200/年
-- **小型商业项目**：2核4G，约¥500/年
-- **中型项目**：4核8G，约¥1000+/年
-:::
+选服务器主要看三个指标：**CPU核数**、**内存大小**、**硬盘空间**。这三个指标越高，服务器性能越好，价格也越贵。
 
-| 方案 | 类比 | 优点 | 缺点 | 价格 |
-|------|------|------|------|------|
-| 虚拟主机 | 租床位 | 便宜、简单 | 性能差 | ¥50-200/年 |
-| 云服务器 | 租公寓 | 自由度高、可扩展 | 需自己配置 | ¥100-1000/年 |
-| Vercel | 租会议室 | 零配置、免费额度 | 受平台限制 | 免费/按量 |
+对于刚入门的新手，完全没必要买特别贵的配置。记住一个简单的选法：
 
-### 3.3 主流云厂商
+- **个人项目、学习练手**：1核2G内存，足够了。一个月大概几十块钱。
+- **小型商业项目**：2核4G内存。能承载每天几千到几万访问量。
+- **中型项目**：4核8G或更高。需要专业团队来运维了。
 
-| 厂商 | 特点 | 适合人群 |
-|------|------|---------|
-| 阿里云 | 国内访问快 | 国内业务 |
-| 腾讯云 | 价格亲民 | 小程序开发者 |
-| Vercel | 零配置、免费 | 前端项目 |
+还有一个要考虑的点：**地域**。如果用户主要在中国，就买国内的服务器（阿里云、腾讯云），访问速度快。如果用户主要在海外，就买国外的服务器（AWS、Google Cloud、DigitalOcean），或者买香港的服务器。速度快而且不用备案。
 
----
+### 3.3 国内还是国外？
 
-## 4. 部署：搬家
+这是个很重要的问题。很多人刚开始没想清楚。后期会遇到麻烦。
 
-### 4.1 连接服务器
+**买国内服务器**的好处是速度快、延迟低。缺点是需要备案（提交网站信息给国家相关部门审核）。通常要等一周到一个月。而且国内服务器价格相对贵一些。
 
-用 **SSH（远程连接工具）**：
+**买国外服务器**的好处是不用备案。买了就能用。价格也可能更便宜。缺点是中国大陆用户访问速度可能慢一些。如果是香港或新加坡机房会好很多。
+
+建议是：如果是个人项目、学习展示用的网站，买香港或海外的服务器。省去备案的麻烦。如果是做正规商业项目，需要长期运营，就买国内服务器。老老实实备案，后期会省很多麻烦。
+
+### 3.4 主流云厂商对比
+
+| 厂商 | 适合人群 | 特点 | 新用户价格 |
+|------|---------|------|-----------|
+| 阿里云 | 国内业务 | 市场占有率第一，生态完善 | 首年几十到一百多 |
+| 腾讯云 | 小程序、游戏 | 小程序云开发支持好 | 首年优惠力度大 |
+| 华为云 | 企业用户 | 政府、政务项目首选 | 价格偏高 |
+| DigitalOcean | 开发者 | 简单好用，价格透明 | $4/月起 |
+| Vercel | 前端项目 | 零配置，直接推送就上线 | 免费额度够用 |
+
+新手最推荐 **阿里云** 或 **腾讯云** 的学生机/新用户优惠。通常一年只需要几十块钱。性价比极高。如果做的是纯前端项目，想省事，也可以直接用 **Vercel** 或 **Netlify**。连服务器都不用买。把代码推送上去就自动部署好了。
+
+### 3.5 拿到服务器后该做什么？
+
+买完服务器后，会收到一封邮件。里面包含几个重要信息：
+
+- **IP地址**：一串类似 `123.45.67.89` 的数字。这是服务器在互联网上的门牌号。
+- **登录用户名**：通常是 `root`（管理员账号）。
+- **登录密码**：初始密码，或者是让你设置密码的链接。
+
+有了这些信息，就可以用 **SSH（Secure Shell）** 远程登录到服务器上。对它进行各种配置。SSH 就像是给服务器发的一条加密的远程控制命令。让自己电脑上就能操作远在天边的服务器。
+
+登录命令是这样的：
 
 ```bash
 ssh root@123.45.67.89
-# 输入密码后，你就在服务器上了
+# 按回车后会让你输入密码。输入正确的密码后就登录成功了。
 ```
 
-### 4.2 部署方式
+登录成功后，就进入了服务器的命令行界面。看起来和在自己电脑上开了一个终端窗口差不多。可以在这里安装软件、创建文件夹、修改配置。一切操作都和本地电脑一样。
 
-| 方式 | 优点 | 缺点 |
-|------|------|------|
-| FTP上传 | 简单直观 | 容易漏传 |
-| Git拉取 | 快、可追溯 | 需配置Git |
+---
 
-**推荐**：Git + Build Script
+## 4. 部署：把代码搬进"房子"
+
+### 4.1 部署是什么？
+
+部署就是租好了服务器（房子）之后，把代码（行李家具）搬进去。然后打开门开始营业的过程。
+
+具体来说，部署包括以下几个步骤：
+
+1. **把代码上传到服务器**：把构建产物从本地电脑传到服务器上。
+2. **安装依赖**：服务器上可能没有项目需要的各种包。需要安装。
+3. **配置环境变量**：比如数据库密码、API密钥等敏感信息。
+4. **启动服务**：让应用程序跑起来。开始监听用户的请求。
+
+这四个步骤听起来挺复杂。但其实做起来没那么难。下面会详细介绍每一步怎么做。
+
+<DeploymentServerDemo />
+
+### 4.2 怎么把代码上传到服务器？
+
+**方法一：FTP/SFTP 上传**
+
+这是最直观的方式。就像用网盘一样。把文件拖到服务器上。可以在自己电脑上下载一个叫 **FileZilla** 的免费软件。填入服务器的IP、用户名、密码。就能像管理本地文件一样管理服务器上的文件了。
+
+**方法二：Git 拉取**
+
+这是更推荐的方式。先在 GitHub、GitLab 或 Gitee 上创建一个代码仓库。把代码推送到云端。然后在服务器上用 `git clone` 命令把代码拉下来。
+
+这样好处是：后续更新代码只需要在服务器上执行 `git pull` 命令就行。不用每次都手动上传。而且代码存云端也安全。服务器重装了也不怕。
+
+**方法三：CI/CD 自动部署**
+
+这是最专业的方式。也是强烈推荐的方式。通过配置 CI/CD（持续集成/持续部署），只需要把代码推送到 GitHub。CI/CD 系统就会自动帮你完成：拉取代码 → 安装依赖 → 构建 → 部署的全过程。甚至不需要登录服务器。一切都是自动完成的。
+
+### 4.3 部署的具体步骤
+
+假设用最简单的方式——Git 手动部署。一步步演示整个过程：
+
+**第一步：连接到服务器**
 
 ```bash
-cd /var/www/my-site
-git pull origin main    # 拉取最新代码
-npm install              # 安装依赖
-npm run build            # 构建项目
-pm2 restart all         # 重启服务
+ssh root@123.45.67.89
 ```
 
-### 4.3 环境配置（Ubuntu）
+**第二步：安装必要的软件**
+
+如果是 Node.js 项目，需要先安装 Node.js：
 
-::: details 点击展开：最小化安装脚本
 ```bash
-# 更新系统
-sudo apt update && sudo apt upgrade -y
-
-# 安装 Nginx（Web服务器）
-sudo apt install -y nginx
-
-# 安装 Node.js 18
+# 以 Ubuntu 系统为例
 curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
 sudo apt install -y nodejs
+```
 
-# 安装 PM2（进程管家）
+**第三步：拉取代码**
+
+```bash
+# 创建放网站的目录
+mkdir -p /var/www/my-website
+cd /var/www/my-website
+
+# 克隆代码仓库（需要先在GitHub上创建好仓库）
+git clone https://github.com/你的用户名/你的仓库名.git .
+```
+
+**第四步：安装依赖并构建**
+
+```bash
+# 安装项目依赖
+npm install
+
+# 构建项目（生成 dist 目录）
+npm run build
+```
+
+**第五步：用 PM2 启动服务**
+
+为什么要用 PM2？它是一个进程管理工具。可以让网站在后台持续运行。就算服务器重启了也能自动启动。
+
+```bash
+# 全局安装 PM2
 sudo npm install -g pm2
 
-# 安装 Git
-sudo apt install -y git
-```
-:::
+# 启动网站（假设入口文件是 index.js）
+pm2 start index.js
 
-**Nginx 反向代理**：把 80 端口请求转发到 3000 端口
+# 设置开机自启
+pm2 startup
+pm2 save
+```
+
+**第六步：配置 Nginx 反向代理**
+
+Node.js 应用通常跑在 3000 或 8080 这样的端口上。但用户访问的是 80 端口（HTTP默认端口）。需要用 Nginx 把 80 端口的请求转发到应用端口。
+
+```bash
+# 安装 Nginx
+sudo apt install -y nginx
+
+# 创建 Nginx 配置文件
+sudo nano /etc/nginx/sites-available/my-website
+```
+
+在打开的编辑器里写入以下配置：
 
 ```nginx
 server {
     listen 80;
-    server_name example.com;
+    server_name example.com www.example.com;
 
+    # 静态文件（构建产物）直接返回
     location / {
+        root /var/www/my-website/dist;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    # API 请求转发到 Node.js 后端
+    location /api/ {
         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_set_header X-Real-IP $remote_addr;
     }
 }
 ```
 
+保存退出后，启用这个配置：
+
+```bash
+# 启用配置
+sudo ln -s /etc/nginx/sites-available/my-website /etc/nginx/sites-enabled/
+
+# 测试配置是否有错误
+sudo nginx -t
+
+# 重启 Nginx
+sudo systemctl restart nginx
+```
+
+现在访问 `http://example.com`（记得先把域名解析到这个服务器IP），应该就能看到网站了！
+
 ---
 
-## 5. 域名和 DNS：挂牌
+## 5. 域名和 DNS：给网站起个好名字
 
-### 5.1 域名是什么？
+### 5.1 为什么要买域名？
 
-- IP地址（123.45.67.89）太难记
-- 域名（example.com）好记
+有了服务器 IP，为什么还要买域名？
 
-**DNS（域名解析）** = **电话本**，把域名翻译成IP
+想想看。让你记住一串数字 `123.45.67.89` 是不是很困难？是不是很容易敲错？但让你记住 `baidu.com`、`taobao.com` 这样的名字是不是就简单多了？
+
+域名就是网站的名字。好记、专业。还能体现品牌形象。想象一下。告诉别人"访问我做的网站，IP 是 123.45.67.89"，和"访问 woshishuaige.com"，哪个更像那么回事？
 
 <DeploymentDnsDemo />
 
-### 5.2 配置步骤
+### 5.2 DNS 是什么？
 
-1. **买域名**：阿里云/腾讯云（¥50-100/年）
-2. **配置DNS**：
+好。现在买了一个域名。比如叫 `my-awesome-website.com`。但问题来了：电脑只认识 IP 地址。不认识 "my-awesome-website.com" 这种人类语言啊。
 
-| 记录类型 | 用途 | 示例 |
-|---------|------|------|
-| A记录 | 指向IP | `example.com` → `123.45.67.89` |
-| CNAME | 指向域名 | `www.example.com` → `example.com` |
+这就需要 DNS 出场了。DNS 的全称是 "Domain Name System"。翻译过来就是"域名系统"。可以把它理解成一本巨大的"电话簿"。专门负责把人类好记的域名翻译成电脑能看懂的 IP 地址。
 
-::: tip ⚠️ 注意
-- DNS生效慢：全球同步需要几分钟到几小时
-- TTL值：设置小一点（如600秒），修改后生效快
-:::
+当在浏览器里输入 `my-awesome-website.com` 并回车时。背后发生了这些事情：
+
+1. 浏览器问 DNS："hey，my-awesome-website.com 的 IP 地址是多少？"
+2. DNS 查了一下"电话簿"，告诉浏览器："它的 IP 是 123.45.67.89"
+3. 浏览器根据这个 IP 地址，找到了服务器，发出了请求
+
+整个过程通常只需要几十毫秒。用户完全感知不到。
+
+### 5.3 怎么配置 DNS？
+
+配置 DNS 通常有两个地方可以操作：
+
+**方式一：在域名购买商那里配置**
+
+在哪里买的域名，就去哪里配置 DNS 记录。最常见的记录类型是 **A 记录**：
+
+- **记录类型**：A
+- **主机记录**：通常填 `@`（代表域名本身，如 my-awesome-website.com）或者 `www`（代表 www.my-awesome-website.com）
+- **记录值**：服务器 IP 地址，如 `123.45.67.89`
+
+**方式二：使用第三方 DNS 服务**
+
+很多专业玩家不用域名商自带的 DNS。而是用 Cloudflare、阿里云 DNSPod、腾讯云 DNS 这些专业的 DNS 服务商。这些服务通常更稳定、解析速度更快。还自带 CDN、DDoS 防护等增值功能。
+
+### 5.4 DNS 生效要多久？
+
+这是很多人关心的问题。答案是：**不一定。通常几分钟到 24 小时**。
+
+DNS 修改后，全球所有的 DNS 服务器需要同步这个变更。这就像往大海里扔一颗石子。波浪需要时间才能传到远方。有些 DNS 服务器更新快，几分钟就生效了。有些比较慢，可能需要等很久。
+
+可以用以下命令检查 DNS 是否生效：
+
+```bash
+# Windows
+ping 你的域名
+
+# Mac/Linux
+ping 你的域名
+```
+
+如果 ping 得通，显示的是服务器的 IP。说明 DNS 已经生效了。
 
 ---
 
-## 6. HTTPS：安防
+## 6. HTTPS：给网站装一把"锁"
 
-### 6.1 为什么需要 HTTPS？
+### 6.1 HTTP 和 HTTPS 的区别
+
+可能注意到了。有些网站地址是 `http://` 开头的。有些是 `https://` 开头的。这个"s"很重要。它代表"安全"（Secure）。
+
+**HTTP（HyperText Transfer Protocol）** 是用来传输网页的协议。可以把它理解成运输数据的卡车。但这辆卡车是**透明的**。里面装的东西所有人都能看见。在 HTTP 网站上输入的密码、填写的个人信息。在传输过程中可能被中间的任何人偷看到。
+
+**HTTPS（HTTP Secure）** 是给这辆卡车加了一个**密封的集装箱**。还配了一把钥匙。只有发送方和接收方有钥匙。中间的人就算截获了也看不懂里面是什么东西。这就是加密传输。
 
 <DeploymentHttpsDemo />
 
-- **HTTP**：数据"裸奔"，谁都能看见
-- **HTTPS**：数据加密，黑客看见也是乱码
+### 6.2 为什么要 HTTPS？
 
-### 6.2 怎么搞定 HTTPS？
+第一个原因：**安全**。没有 HTTPS，用户在网站上输入的密码是明文传输的。但凡有点技术的人都能截获。这年头，谁敢用没有 HTTPS 的网站？
 
-用 **Let's Encrypt（免费证书）** + **Certbot（自动工具）**
+第二个原因：**浏览器警告**。现在 Chrome、Edge 这些主流浏览器都会对没有 HTTPS 的网站显示"不安全"的警告。用户一看 warning 图标。跑了都来不及。更别说注册、充值了。
+
+第三个原因：**SEO**。Google、百度这些搜索引擎都会优先收录 HTTPS 的网站。SEO 效果会更好。
+
+### 6.3 怎么获取 HTTPS 证书？
+
+以前 HTTPS 证书很贵。每年要花几百甚至几千块钱。现在好了。出了一个叫 **Let's Encrypt** 的组织。提供完全免费的 SSL/TLS 证书。而且社区有很多自动化工具帮你安装和续期。
+
+**方式一：使用 Certbot（推荐）**
+
+Certbot 是一个自动申请和配置 Let's Encrypt 证书的工具。非常简单：
 
 ```bash
 # 安装 Certbot
 sudo apt install -y certbot python3-certbot-nginx
 
-# 自动申请证书并配置 Nginx
-sudo certbot --nginx -d example.com
-
-# 证书自动续期
-sudo certbot renew --dry-run
+# 一键申请证书并配置 Nginx
+sudo certbot --nginx -d example.com -d www.example.com
 ```
 
-完成后访问网站会看到🔒小锁。
+运行过程中会问几个问题。比如邮箱（用于证书到期提醒）。回答完后证书就自动配置好了。访问网站会发现地址栏多了一个小锁🔒。
+
+证书有效期是 90 天。但 Certbot 会帮你设置定时任务自动续期。基本不用管它。
+
+**方式二：使用 Cloudflare**
+
+如果使用了 Cloudflare 的 DNS 服务。那 HTTPS 证书根本不用自己配置。Cloudflare 会自动为域名提供 HTTPS 支持。而且连 90 天续期的问题都帮你解决了。
+
+### 6.4 配置 HTTPS 后发生了什么变化？
+
+配置好 HTTPS 后，用户访问从原来的 `http://example.com` 变成了 `https://example.com`。这个变化带来了一系列的安全保障：
+
+1. **加密传输**：用户和服务器之间的所有通信都是加密的。
+2. **身份验证**：证书可以证明"我真的是这个网站"。防止钓鱼网站。
+3. **数据完整性**：能检测到数据是否被篡改。
 
 ---
 
-## 7. CI/CD：自动化
+## 7. CI/CD：让机器人帮你干活
 
 ### 7.1 什么是 CI/CD？
 
+CI/CD 是两个词的缩写：**C**ontinuous **I**ntegration（持续集成）和 **C**ontinuous **D**eployment（持续部署）。可以理解为一套帮你自动干活的机器人系统。
+
+在没有 CI/CD 的时候。每次要发布新功能。流程是这样的：
+
+1. 打开电脑，登录 GitHub
+2. 拉取最新代码
+3. 运行测试，看看有没有bug
+4. 手动构建项目
+5. 登录服务器
+6. 拉取最新代码
+7. 安装依赖
+8. 构建项目
+9. 重启服务
+
+这9个步骤。每次发布都要手动做一遍。烦不烦？而且很容易漏掉某一步。比如忘记运行测试、忘记重启服务等。
+
+有了 CI/CD 之后。流程变成了这样：
+
+1. 把代码 push 到 GitHub
+2. 喝茶坐等
+3. （机器人自动完成上面9个步骤）
+4. 网站自动更新了
+
 <DeploymentCicdDemo />
 
-- **CI（持续集成）**：每次提交自动测试
-- **CD（持续部署）**：测试通过自动部署
+这就是 CI/CD 的魅力：**只需要把代码推上去。剩下的全部自动完成**。
 
-### 7.2 GitHub Actions 示例
+### 7.2 CI/CD 的工作流程
 
-在 `.github/workflows/deploy.yml`：
+一个典型的 CI/CD 流程是这样的：
+
+**第一步：代码提交（Push）**
+
+完成了新功能的开发。把代码 push 到 GitHub。
+
+**第二步：CI（持续集成）触发**
+
+GitHub 检测到代码变动。通知 CI 系统（GitHub Actions、GitLab CI 等）开始工作。
+
+**第三步：安装依赖和测试**
+
+CI 系统会启动一台虚拟电脑。在上面：
+- 安装项目需要的各种依赖
+- 运行测试代码，确保没有 bug
+- 构建项目，生成产物
+
+如果测试失败。CI 会发邮件通知。这次部署就停了。不会把有问题的代码部署到生产环境。
+
+**第四步：CD（持续部署）执行**
+
+测试全部通过后。CI 系统会：
+- 通过 SSH 连接到服务器
+- 拉取最新代码
+- 安装依赖
+- 构建项目
+- 重启服务
+
+整个过程可能只需要几分钟。全部自动完成。
+
+### 7.3 怎么配置 GitHub Actions？
+
+GitHub Actions 是 GitHub 自带的 CI/CD 功能。不需要额外付费（免费额度足够个人项目用）。配置起来也非常简单。
+
+在项目根目录下创建 `.github/workflows/deploy.yml` 文件。写入以下配置：
 
 ```yaml
 name: Deploy to Production
 
+# 触发条件：每当 main 分支有代码推送时
 on:
   push:
     branches: [main]
 
+# 任务列表
 jobs:
+  # 部署任务
   deploy:
+    # 在什么系统上运行
     runs-on: ubuntu-latest
+    
+    # 具体步骤
     steps:
-      - uses: actions/checkout@v3
+      # 1. 检出代码
+      - name: Checkout code
+        uses: actions/checkout@v3
 
+      # 2. 安装 Node.js 环境
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: '18'
 
-      - name: Install & Build
+      # 3. 安装依赖并构建
+      - name: Install and Build
         run: |
           npm ci
           npm run build
 
-      - name: Deploy
+      # 4. 部署到服务器
+      - name: Deploy to Server
         uses: appleboy/ssh-action@master
         with:
           host: ${{ secrets.SERVER_HOST }}
-          username: root
-          key: ${{ secrets.SSH_KEY }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
           script: |
-            cd /var/www/my-site
+            cd /var/www/my-website
             git pull origin main
             npm install
             npm run build
             pm2 restart all
 ```
 
----
+这个配置文件告诉 GitHub Actions：
 
-::: details 📖 高级主题：CDN 和负载均衡
+- 当 main 分支有新代码时触发
+- 在一台 Ubuntu 电脑上执行任务
+- 先安装 Node.js 18
+- 然后安装依赖并构建项目
+- 最后通过 SSH 连接到服务器，执行一系列部署命令
 
-**CDN（内容分发网络）**：全球连锁仓库
-
-- 把图片、CSS、JS等静态资源上传到CDN
-- CDN复制到全球节点
-- 用户访问时从最近节点获取
-
-**效果**：北京用户→北京节点（10ms），纽约用户→纽约节点（15ms）
-
-**负载均衡（Load Balancer）**：餐厅领班
-
-- 看着N个服务器
-- 把客人分配到最空闲的那个
-- 某个服务器挂了，自动切换
-
-**什么时候需要**？
-- 访问量 >10000/天
-- 单台服务器 CPU/内存 >70%
-
-:::
+配置好之后。每次 `git push origin main`。GitHub 就会自动开始部署。非常方便。
 
 ---
 
-## 8. 监控和备份：守夜人
+## 8. 监控和日志：做网站的"守夜人"
 
-### 8.1 监控什么？
+### 8.1 为什么要监控？
+
+网站上线后。理论上应该 7×24 小时不间断运行。但现实世界没有这么美好。服务器可能会宕机。网络可能会抖动。代码可能会有bug。在真实的生产环境中。各种意外情况都有可能发生。
+
+如果没有监控。就只能等用户打电话告诉你"网站打不开了"。这时候往往已经晚了。用户可能已经流失了。
+
+有了监控之后。可以：
+
+- **提前发现问题**：CPU 使用率 90% 了。提前加服务器。
+- **快速定位问题**：网站慢了。查监控看是哪里瓶颈。
+- **心里有底**：每天多少人访问、访问量什么时候最高。
 
 <DeploymentMonitorDemo />
 
-| 指标 | 正常范围 |
-|------|---------|
-| CPU使用率 | <70% |
-| 内存使用率 | <80% |
-| 磁盘空间 | <80% |
-| 响应时间 | <2秒 |
-| 错误率 | <1% |
+### 8.2 监控哪些指标？
 
-### 8.2 备份策略
+最重要的监控指标就这几个：
 
-::: tip 💾 备份三要素
-1. **定期备份**：每天凌晨自动备份
-2. **多地存储**：本地 + 异地（防止单点故障）
-3. **定期恢复测试**：确保备份能恢复
-:::
+| 指标 | 正常范围 | 超过怎么办 |
+|------|---------|-----------|
+| CPU 使用率 | < 70% | 升级服务器配置或优化代码 |
+| 内存使用率 | < 80% | 检查是否有内存泄漏 |
+| 磁盘使用率 | < 80% | 清理日志或无用文件 |
+| 网站可达性 | 100% | 检查服务是否正常运行 |
+| 响应时间 | < 2 秒 | 优化数据库查询或加缓存 |
+| 错误率 | < 1% | 查看错误日志定位问题 |
+
+### 8.3 怎么配置监控？
+
+**最简单的方案：Uptime Robot**
+
+注册 uptimerobot.com。添加网站URL。它会每 5 分钟自动检查一次网站是否正常。网站挂了会发邮件通知你。免费版本可以监控 50 个网站。对个人项目来说完全够用。
+
+**进阶方案：阿里云/腾讯云监控**
+
+如果服务器是在阿里云或腾讯云买的。它们自带监控功能。配置一下阈值报警就行。
+
+**专业方案：Prometheus + Grafana**
+
+这两个是监控领域的"瑞士军刀"。功能非常强大。可以监控任何能想到的指标。还能做出漂亮的可视化图表。不过配置起来比较复杂。适合有一定经验的开发者。
+
+### 8.4 日志：出了问题怎么查？
+
+监控告诉你"网站出问题了"。但具体是什么问题、为什么出问题。需要靠**日志**来定位。
+
+日志就是程序运行时的"日记本"。记录了程序运行过程中的点点滴滴：
+
+- 哪个用户在什么时候访问了什么页面
+- 数据库查询花了多长时间
+- 有没有报错，错误信息是什么
+
+**最基础的日志用法**
+
+在服务器上查看应用日志：
 
 ```bash
-# 每天自动备份数据库
-0 2 * * * /usr/bin/mysqldump -u root -p密码 my_db > /backup/db_$(date +\%Y\%m\%d).sql
+# 查看 PM2 的日志
+pm2 logs
 
-# 保留最近7天的备份
-find /backup -name "db_*.sql" -mtime +7 -delete
+# 查看 Nginx 的访问日志
+tail -f /var/log/nginx/access.log
 
-# 自动上传到云存储
-/usr/bin/ossutil cp /backup/db_$(date +\%Y\%m\%d).sql oss://my-backup/
+# 查看 Nginx 的错误日志
+tail -f /var/log/nginx/error.log
 ```
 
----
+**进阶的日志方案**
 
-## 9. 常见问题速查
+如果项目比较复杂。推荐使用专业的日志收集工具：
 
-| 现象 | 可能原因 | 怎么办 |
-|------|---------|--------|
-| 网站打不开 | 域名没解析？服务器挂了？ | `ping 域名`看通不通<br>`ssh`连不上就是服务器挂了 |
-| 404 Not Found | Nginx配置错了？路径不对？ | `nginx -t`检查配置 |
-| 502 Bad Gateway | 后端服务挂了？端口没开？ | `pm2 list`看服务状态 |
-| HTTPS证书报错 | 证书过期？域名不匹配？ | `certbot renew`续期 |
-| 更新不生效 | 浏览器缓存？CDN缓存？ | Ctrl+F5强制刷新<br>去CDN控制台"刷新缓存" |
-| 很慢 | 性能不够？CDN没配置？ | 查监控看CPU/内存<br>静态资源上CDN |
+- **Loki**：免费开源。和 Prometheus 一家的。
+- **ELK（Elasticsearch + Logstash + Kibana）**：功能强大。但配置复杂。
+- **Sentry**：专门用于收集应用错误的工具。能自动收集报错信息。
+
+### 8.5 告警：出问题怎么第一时间知道？
+
+监控告诉你有问题。但如果没有盯着监控面板看，怎么办？这就需要**告警**了。
+
+告警就是当监控系统检测到异常时。自动通过短信、微信、钉钉、邮件等方式通知你。可以设置不同的告警级别：
+
+- **紧急（网站完全挂掉）**：发短信+打电话。必须马上知道。
+- **严重（错误率飙升）**：发钉钉/微信消息。看到就处理。
+- **一般（CPU 偏高）**：发邮件汇总。一天看一次就行。
+
+告警配置的核心原则是：**分级告警，别把自己烦死**。如果什么鸡毛蒜皮的小事都给你发短信。用不了多久你就会把告警关掉。
 
 ---
 
-## 10. 上线前检查清单
+## 9. 常见问题速查表
 
-::: details ✅ 基础检查
-- [ ] 代码已构建（`npm run build`）
-- [ ] 服务器环境配置完成（Nginx + Node.js）
-- [ ] 域名解析正确（能ping通）
-- [ ] HTTPS证书正常（有🔒小锁）
-:::
-
-::: details 🔒 安全检查
-- [ ] 数据库密码不是弱密码
-- [ ] 敏感信息没写在代码里
-- [ ] 开启了防火墙（只开必要端口）
-- [ ] 配置了SQL注入防护
-:::
-
-::: details 🛡️ 运维检查
-- [ ] 监控告警配置完成
-- [ ] 日志正常记录
-- [ ] 自动备份已设置
-- [ ] CI/CD流程测试通过
-:::
+| 问题现象 | 可能原因 | 解决方法 |
+|---------|---------|---------|
+| 网站打不开 | 域名没解析 / 服务器挂了 / Nginx 没启动 | `ping 域名` 看通不通；`pm2 list` 看服务状态；`systemctl status nginx` 看 Nginx |
+| 打开是空白页面 | 构建产物路径不对 / 静态文件没正确配置 | 检查 Nginx 的 root 路径是否指向 dist 目录 |
+| 404 页面找不到 | 路由没正确配置 / 路径拼写错误 | Nginx 配置里加上 `try_files $uri $uri/ /index.html` |
+| 502 Bad Gateway | 后端服务挂了 / 端口没开 | `pm2 list` 看进程是否在运行；检查端口是否正确 |
+| 403 Forbidden | 权限不对 / 索引目录没开 | 检查文件权限 `chmod -R 755`；Nginx 配置加上 `autoindex on` |
+| HTTPS 证书过期 | 证书到期没续期 | `certbot renew` 手动续期；检查自动续期定时任务 |
+| 更新后看不到变化 | 浏览器缓存 / CDN 缓存 | Ctrl+Shift+R 强制刷新；去 CDN 控制台"刷新缓存" |
+| 网站打开很慢 | 带宽不够 / 没开缓存 / 没配置 CDN | 升级服务器带宽；配置 Redis 缓存；接入 CDN |
+| 数据库连不上 | 数据库没启动 / 密码错了 / 权限问题 | 检查数据库服务状态；核对配置里的连接信息 |
 
 ---
 
 ## 总结
 
+服务上线是一个系统性的大工程。涉及从代码构建到服务器部署、从网络配置到安全防护、从监控告警到日志分析的方方面面。对于初学者来说。不需要一开始就追求完美。先把最小可用版本（MVP）跑起来。然后在此基础上逐步完善。
+
+整个流程的核心要点可以归纳为以下几点：
+
 ### 核心流程
 
-1. **构建** → 代码打包成浏览器懂的格式
-2. **部署** → 代码放到服务器上
-3. **配置** → Nginx、域名、HTTPS
-4. **优化** → CDN、负载均衡（高级）
-5. **自动化** → CI/CD解放双手
-6. **保障** → 监控和备份守住底线
+1. **构建** → 用 `npm run build` 把代码变成浏览器能看懂的 HTML/CSS/JS
+2. **部署** → 把构建产物上传到服务器。用 Nginx 配置反向代理。
+3. **域名** → 购买域名并配置 DNS 解析到服务器 IP
+4. **HTTPS** → 用 Let's Encrypt 申请免费证书。保护数据传输安全。
+5. **CI/CD** → 配置自动化部署。代码 push 后自动上线。
+6. **监控** → 配置监控和告警。出问题第一时间知道。
 
-### 关键原则
+### 学习路线建议
 
-| 原则 | 说明 |
-|------|------|
-| **小步快跑** | 先上线MVP，再逐步完善 |
-| **自动化优先** | 能自动的别手动，减少人为失误 |
-| **监控先行** | 先建监控，再上功能 |
-| **备份为王** | 数据无价，备份是最后防线 |
-| **安全第一** | HTTPS、防火墙、弱密码检查，一个都不能少 |
-
-### 学习路线
-
-**入门（第1天）**：用 Vercel 免费部署静态网页
-
-**进阶（第1周）**：租云服务器、手动部署 Node.js 应用、配置域名和 HTTPS
-
-**实战（第2-4周）**：搭建完整 CI/CD 流程、配置 CDN、建立监控和备份
-
-**深入（持续）**：学习 Docker 容器化、Kubernetes 集群、微服务架构
+- **第1天**：用 Vercel/Netlify 部署一个静态网页。体验一下"代码变成网站"的感觉。
+- **第1周**：租一台云服务器。手动部署一个 Node.js 项目。配置域名和 HTTPS。
+- **第2-4周**：配置完整的 CI/CD 流程。建立监控和告警体系。
+- **持续学习**：学习 Docker 容器化、学习 Kubernetes 集群、学习微服务架构。
 
 ---
 
 ## 名词速查表
 
-| 名词 | 英文 | 人话解释 |
-|------|------|---------|
-| 部署 | Deployment | 把代码放到服务器上让人能访问 |
-| 构建 | Build | 把源代码翻译打包成浏览器懂的格式 |
-| 服务器 | Server | 一台永远不关机、连着互联网的电脑 |
-| 域名 | Domain Name | 网站的好记名字（如 baidu.com） |
-| DNS | Domain Name System | 域名解析系统，把域名翻译成IP |
-| HTTP/HTTPS | HyperText Transfer Protocol | 网页传输协议（HTTP不安全，HTTPS加密） |
-| Nginx | Engine X | 高性能Web服务器（门童） |
-| 反向代理 | Reverse Proxy | 转发请求到后端服务 |
-| SSH | Secure Shell | 远程连接服务器的工具 |
-| CDN | Content Delivery Network | 内容分发网络，全球加速 |
-| CI/CD | Continuous Integration/Deployment | 持续集成/持续部署（自动化） |
-| 监控 | Monitoring | 盯着服务器看有没有问题 |
-| 备份 | Backup | 备份数据，防丢失 |
+| 名词 | 英文 | 用人话解释 |
+|------|------|-----------|
+| 构建 | Build | 把源代码翻译打包成浏览器能执行的格式 |
+| 部署 | Deploy | 把代码放到服务器上让用户能访问 |
+| 服务器 | Server | 7×24小时不关机、联网的电脑 |
+| 域名 | Domain | 网站的好记名字（如 baidu.com） |
+| DNS | Domain Name System | 把域名翻译成 IP 地址的"电话簿" |
+| HTTP | HyperText Transfer Protocol | 网页传输协议（不安全，明文传输） |
+| HTTPS | HTTP Secure | 加密传输的网页协议（安全） |
+| Nginx | Engine X | 高性能 Web 服务器。做反向代理的。 |
+| 反向代理 | Reverse Proxy | 站在门口的服务员。把请求转发给后端。 |
+| SSH | Secure Shell | 远程登录服务器的加密工具 |
+| CDN | Content Delivery Network | 全球分布的服务器网络。加快访问速度。 |
+| CI/CD | Continuous Integration/Deployment | 自动化流水线。代码 push 后自动测试部署。 |
+| SSL/TLS | Secure Sockets Layer / Transport Layer Security | 加密协议。给 HTTPS 提供安全保障。 |
+| PM2 | Process Manager 2 | Node.js 进程管理器。让应用持续运行。 |