test-repo/docs/zh-cn/appendix/deployment.md

服务上线之旅：从代码到用户眼中的网页

学习指南：本章节带你完整体验"一个服务上线"的全过程。我们不讲复杂的运维术语，而是通过小明的咖啡店网站上线故事，让你看懂代码是怎么变成用户能访问的网站的。

---

0. 引言：小明的咖啡店网站要上线了

小明是个前端开发，他用 Vue 写了一个漂亮的咖啡店网站：可以看菜单、在线下单、查看订单状态。

网站在小明的电脑上跑得好好的，但是问题来了：

怎么让全世界的人都能访问这个网站？

这就像小明在家做了一桌子菜，现在要开餐厅让所有人来吃。这可不是简单地"把菜端出去"那么简单，他要经历一整套完整的流程。

服务上线就是一场"搬家+开业"的大工程：

1. 打包行李 → 把代码打包成服务器能懂的格式
2. 找房子 → 选择服务器（云服务器/VPS）
3. 搬家 → 把代码部署到服务器
4. 装修 → 配置运行环境
5. 挂牌 → 配置域名和DNS
6. 安防 → 安装HTTPS证书
7. 招服务员 → 配置负载均衡
8. 开分店 → 配置CDN加速
9. 自动化 → 建立CI/CD流程
10. 守夜人 → 监控和备份

让我们跟着小明，一步一步完成这场"上线之旅"！

---

1. 打包行李：把代码变成"可携带的包裹"

小明的网站代码在他电脑上是这样散落的：

my-coffee-shop/
├── src/              # 源代码
│   ├── App.vue      # Vue 组件
│   ├── main.js      # 入口文件
│   └── assets/      # 图片、样式
├── package.json     # 依赖清单
└── vite.config.js   # 构建配置

这些源代码浏览器看不懂。浏览器只认识：

• HTML 文件（网页骨架）
• CSS 文件（网页样式）
• JS 文件（网页逻辑）

1.1 为什么要"构建"？

想象小明做了一桌子菜，现在要打包外卖：

构建（Build）就是"打包外卖"的过程：

1. 翻译：把 Vue 组件翻译成浏览器懂的 HTML/CSS/JS
2. 压缩：把代码体积缩小（省流量、加载快）
3. 合并：把几十个小文件合成几个大包（减少请求）
4. 哈希：给文件名加上指纹（app.abc123.js），浏览器缓存友好

运行构建命令：

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 服务器是什么？

服务器 = 一台永远不关机、连着互联网的电脑

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（远程连接工具）：

# 连接到服务器
ssh root@123.45.67.89

# 输入密码后，你就"进入"服务器了
# 后面敲的命令，都是在服务器上执行

3.2 部署方式对比

方式	类比	优点	缺点
FTP上传	自己扛箱子搬家	简单直观	容易漏传文件、慢
Git拉取	让快递公司送货	快、可追溯	需要配置Git
Docker容器	用搬家集装箱	环境一致、易迁移	需要学习Docker

推荐方式：Git + Build Script

小明用 Git 把代码推送到 GitHub，然后让服务器自己拉取最新代码：

# 服务器上执行的脚本
cd /var/www/coffee-shop
git pull origin main          # 拉取最新代码
npm install                   # 安装依赖
npm run build                 # 构建项目
pm2 restart all               # 重启服务

---

4. 装修：配置运行环境

代码搬过去了，但是服务器还只是个"空房子"，需要"装修"才能住人。

4.1 需要装什么？

最小化安装脚本（Ubuntu系统）：

# 1. 更新系统
sudo apt update && sudo apt upgrade -y

# 2. 安装 Nginx（Web服务器，负责接待客人）
sudo apt install -y nginx

# 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 install -g pm2

# 5. 安装 Git（拉代码用）
sudo apt install -y git

4.2 Nginx 反向代理是什么？

小明的程序跑在 3000 端口，但用户习惯访问 80（HTTP）或 443（HTTPS）端口。

Nginx 就像个"门童"：

• 守在 80/443 端口接待客人
• 把请求转给后端的 3000 端口
• 把结果返回给用户

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;
    }
}

---

5. 挂牌：配置域名和 DNS

房子装修好了，现在要挂个牌子，让客人能找到你。这个牌子就是域名。

5.1 域名是什么？

域名 = 网站的门牌号

• IP地址（123.45.67.89）太难记
• 域名（coffee.example.com）好记

DNS（域名解析） = 电话本，负责把域名翻译成IP

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秒），修改后生效快

---

6. 安防：安装 HTTPS 证书

房子好了，牌子挂了，现在要装门锁，保证安全。

6.1 为什么需要 HTTPS？

HTTP 的问题：数据"裸奔"，谁都能看见

HTTPS 的好处：数据加密，黑客看见也是乱码

6.2 怎么搞定 HTTPS？

不用花钱买证书！用 Let's Encrypt（免费证书） + Certbot（自动工具）

# 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 就搞定了！

---

7. 招服务员：负载均衡

小明的咖啡店火了，一个人接待不过来，怎么办？招更多服务员！

7.1 什么是负载均衡？

负载均衡器（Load Balancer） = 餐厅领班

• 看着后面N个服务器（服务员）
• 把客人分配到最空闲的那个
• 某个服务器挂了，自动把流量分给其他的

7.2 什么时候需要负载均衡？

访问量	服务器配置	是否需要LB
<100/天	1核2G	❌ 不需要
1000-10000/天	2核4G	❌ 不需要
>10000/天	4核8G	✅ 建议配置

---

8. 开分店：CDN 加速

小明在全国都有客人，北京的服务器响应纽约的请求太慢了。怎么办？开分店！

8.1 什么是 CDN？

CDN（内容分发网络） = 全球连锁仓库

CDN 的工作原理：

1. 你把图片、CSS、JS等"不变的东西"上传到CDN
2. CDN把这些文件复制到全球各地的节点
3. 用户访问时，CDN自动从最近的节点给文件

效果：

• 北京用户 → 北京节点（10ms）
• 纽约用户 → 纽约节点（15ms）
• 伦敦用户 → 伦敦节点（20ms）

8.2 怎么配置CDN？

1. 开通CDN服务：阿里云CDN/腾讯云CDN/Cloudflare
2. 添加域名：填写你的网站域名
3. 配置源站：告诉CDN你的服务器IP
4. 刷新缓存：文件更新后，手动刷新CDN缓存

---

9. 自动化：建立 CI/CD 流程

每次更新代码都要手动SSH到服务器、拉代码、构建、重启，太累！自动化吧！

9.1 什么是 CI/CD？

CI（持续集成） = 自动化测试

• 每次提交代码自动运行测试
• 保证代码质量

CD（持续部署） = 自动化上线

• 代码通过测试后自动部署
• 一键上线，安全可靠

9.2 怎么实现 CI/CD？

推荐：GitHub Actions

在项目根目录创建 .github/workflows/deploy.yml：

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. 几分钟后，新版本就上线了！

---

10. 守夜人：监控和备份

网站上线了，但工作还没完。就像开店后需要保安和账房，网站也需要监控和备份。

10.1 监控：当个好管家

需要监控什么？

指标	说明	正常范围
CPU使用率	服务器"脑子"有多忙	<70%
内存使用率	服务器"记忆"占多少	<80%
磁盘空间	硬盘还剩多少	<80%
响应时间	网页加载多慢	<2秒
错误率	有多少请求失败	<1%

监控工具推荐：

• 基础监控：云厂商自带的监控（阿里云云监控/腾讯云云监控）
• APM监控：New Relic / Datadog（收费，功能强大）
• 开源方案：Prometheus + Grafana（免费，需自建）

10.2 备份：最后的安全网

数据是无价的！一定要定期备份。

备份三要素：

1. 定期备份：每天凌晨自动备份（用户访问少的时候）
2. 多地存储：本地 + 异地（防止单点故障）
3. 定期恢复测试：备份了要确保能恢复

备份策略：

# 每天自动备份数据库
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/

---

11. 故障排查：遇到问题怎么办？

网站出问题了，别慌，按这个流程排查：

11.1 排查流程图

11.2 常见问题速查表

现象	可能原因	怎么办
网站打不开	域名没解析？服务器挂了？	ping 域名 看通不通 ssh 连不上就是服务器挂了
404 Not Found	Nginx配置错了？文件路径不对？	检查 nginx -t 配置 看看 root 路径对不对
502 Bad Gateway	后端服务挂了？端口没开？	pm2 list 看服务在不在 netstat -tlnp 看端口监听
HTTPS证书报错	证书过期了？域名不匹配？	certbot renew 续期 检查证书域名是否正确
更新不生效	浏览器缓存？CDN缓存？	Ctrl+F5 强制刷新 去CDN控制台"刷新缓存"
很慢	服务器性能不够？CDN没配置？	查监控看CPU/内存 静态资源上CDN

---

12. 上线前最后检查

小明终于要正式开业了！在按下"发布"按钮前，再检查一遍：

最终检查清单

基础检查：

• 代码已经构建（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	复份数据，防丢失