refactor(docs): simplify deployment demo components
This commit is contained in:
+178
-370
@@ -1,373 +1,216 @@
|
||||
# 服务上线之旅:从代码到用户眼中的网页
|
||||
# 服务上线之旅
|
||||
|
||||
> **学习指南**:本章节带你完整体验"一个服务上线"的全过程。我们不讲复杂的运维术语,而是通过小明的咖啡店网站上线故事,让你看懂代码是怎么变成用户能访问的网站的。
|
||||
::: tip 🎯 核心问题
|
||||
**代码在本地跑得好好的,怎么让全世界的人都能访问?**
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 0. 引言:小明的咖啡店网站要上线了
|
||||
## 1. 为什么要"服务上线"?
|
||||
|
||||
小明是个前端开发,他用 Vue 写了一个漂亮的咖啡店网站:可以看菜单、在线下单、查看订单状态。
|
||||
|
||||
网站在**小明的电脑上**跑得好好的,但是问题来了:
|
||||
|
||||
> **怎么让全世界的人都能访问这个网站?**
|
||||
|
||||
这就像小明在家做了一桌子菜,现在要开餐厅让所有人来吃。这可不是简单地"把菜端出去"那么简单,他要经历一整套完整的流程。
|
||||
想象小明在家做了一桌子菜,现在要开餐厅让所有人来吃。这可不是"把菜端出去"那么简单。
|
||||
|
||||
<DeploymentOverviewDemo />
|
||||
|
||||
**服务上线就是一场"搬家+开业"的大工程**:
|
||||
|
||||
1. **打包行李** → 把代码打包成服务器能懂的格式
|
||||
2. **找房子** → 选择服务器(云服务器/VPS)
|
||||
3. **搬家** → 把代码部署到服务器
|
||||
4. **装修** → 配置运行环境
|
||||
5. **挂牌** → 配置域名和DNS
|
||||
6. **安防** → 安装HTTPS证书
|
||||
7. **招服务员** → 配置负载均衡
|
||||
8. **开分店** → 配置CDN加速
|
||||
9. **自动化** → 建立CI/CD流程
|
||||
10. **守夜人** → 监控和备份
|
||||
|
||||
让我们跟着小明,一步一步完成这场"上线之旅"!
|
||||
**服务上线是一场"搬家+开业"的大工程**:
|
||||
1. **构建** → 打包代码成服务器能懂的格式
|
||||
2. **服务器** → 租一台永远不关机的电脑
|
||||
3. **部署** → 把代码上传到服务器
|
||||
4. **环境** → 配置 Nginx、Node.js
|
||||
5. **域名** → 配置 DNS,让用户能找到
|
||||
6. **HTTPS** → 安装证书,保护数据安全
|
||||
7. **CI/CD** → 自动化部署,解放双手
|
||||
8. **监控** → 盯控和备份,守住底线
|
||||
|
||||
---
|
||||
|
||||
## 1. 打包行李:把代码变成"可携带的包裹"
|
||||
## 2. 构建:把代码变成"可携带的包裹"
|
||||
|
||||
小明的网站代码在他电脑上是这样散落的:
|
||||
### 2.1 为什么要构建?
|
||||
|
||||
```
|
||||
my-coffee-shop/
|
||||
├── src/ # 源代码
|
||||
│ ├── App.vue # Vue 组件
|
||||
│ ├── main.js # 入口文件
|
||||
│ └── assets/ # 图片、样式
|
||||
├── package.json # 依赖清单
|
||||
└── vite.config.js # 构建配置
|
||||
```
|
||||
|
||||
这些源代码浏览器**看不懂**。浏览器只认识:
|
||||
- HTML 文件(网页骨架)
|
||||
- CSS 文件(网页样式)
|
||||
- JS 文件(网页逻辑)
|
||||
|
||||
### 1.1 为什么要"构建"?
|
||||
|
||||
想象小明做了一桌子菜,现在要打包外卖:
|
||||
浏览器只认识 HTML/CSS/JS,不认识 Vue 组件。**构建(Build)就是"打包外卖"的过程**。
|
||||
|
||||
<DeploymentBuildDemo />
|
||||
|
||||
**构建(Build)就是"打包外卖"的过程**:
|
||||
|
||||
1. **翻译**:把 Vue 组件翻译成浏览器懂的 HTML/CSS/JS
|
||||
2. **压缩**:把代码体积缩小(省流量、加载快)
|
||||
3. **合并**:把几十个小文件合成几个大包(减少请求)
|
||||
4. **哈希**:给文件名加上指纹(`app.abc123.js`),浏览器缓存友好
|
||||
|
||||
运行构建命令:
|
||||
**构建做了什么**:
|
||||
- **翻译**:Vue → HTML/CSS/JS
|
||||
- **压缩**:减小代码体积(省流量、加载快)
|
||||
- **合并**:多个文件 → 几个大包(减少请求)
|
||||
- **哈希**:文件名加指纹(`app.abc123.js`),缓存友好
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
构建完成后会生成一个 `dist` 文件夹:
|
||||
|
||||
```
|
||||
dist/
|
||||
├── index.html # 主页面
|
||||
├── assets/
|
||||
│ ├── app.abc123.js # 打包后的JS(278KB)
|
||||
│ ├── app.abc123.css # 打包后的CSS(45KB)
|
||||
│ └── logo.789xyz.png # 优化后的图片
|
||||
```
|
||||
|
||||
这个 `dist` 文件夹,就是小明的"行李箱",里面装着所有要搬去服务器的东西。
|
||||
|
||||
---
|
||||
|
||||
## 2. 找房子:选择服务器
|
||||
## 3. 服务器:找房子
|
||||
|
||||
代码打包好了,现在要找个"房子"住。这个房子就是**服务器**。
|
||||
|
||||
### 2.1 服务器是什么?
|
||||
### 3.1 服务器是什么?
|
||||
|
||||
服务器 = **一台永远不关机、连着互联网的电脑**
|
||||
|
||||
<DeploymentServerDemo />
|
||||
|
||||
### 2.2 怎么选服务器?
|
||||
### 3.2 怎么选服务器?
|
||||
|
||||
小明有几个选择:
|
||||
::: tip 💡 选型建议
|
||||
- **个人项目/学习**:1核2G,约¥100-200/年
|
||||
- **小型商业项目**:2核4G,约¥500/年
|
||||
- **中型项目**:4核8G,约¥1000+/年
|
||||
:::
|
||||
|
||||
| 方案 | 类比 | 优点 | 缺点 | 价格 |
|
||||
|------|------|------|------|------|
|
||||
| **虚拟主机** | 租个床位 | 便宜、简单 | 性能差、不能随便装软件 | ¥50-200/年 |
|
||||
| **云服务器** | 租整套公寓 | 自由度高、可扩展 | 需要自己配置 | ¥100-1000/年 |
|
||||
| **容器服务** | 租豪华酒店 | 自动化管理 | 价格高 | ¥500+/月 |
|
||||
| **Serverless** | 租用会议室 | 用多少付多少 | 冷启动慢 | 按量计费 |
|
||||
| 虚拟主机 | 租床位 | 便宜、简单 | 性能差 | ¥50-200/年 |
|
||||
| 云服务器 | 租公寓 | 自由度高、可扩展 | 需自己配置 | ¥100-1000/年 |
|
||||
| Vercel | 租会议室 | 零配置、免费额度 | 受平台限制 | 免费/按量 |
|
||||
|
||||
**小明的选择**:云服务器(2核4G,约¥500/年)
|
||||
|
||||
选配置的误区:
|
||||
|
||||
- ❌ **太小了**:1核1G,跑个Hello World还行,稍微多点人就卡死
|
||||
- ❌ **太大了**:一上来就8核16G,每天10个访问,纯属浪费
|
||||
- ✅ **刚刚好**:2核4G起步,不够了再升级(云服务器支持弹性伸缩)
|
||||
|
||||
### 2.3 主流云厂商
|
||||
### 3.3 主流云厂商
|
||||
|
||||
| 厂商 | 特点 | 适合人群 |
|
||||
|------|------|---------|
|
||||
| **阿里云** | 国内访问快、文档多 | 国内业务首选 |
|
||||
| **腾讯云** | 价格亲民、微信生态 | 小程序开发者 |
|
||||
| **AWS** | 全球覆盖、功能最强 | 国际业务 |
|
||||
| **Vercel** | 免费额度、零配置 | 前端项目快速上线 |
|
||||
| 阿里云 | 国内访问快 | 国内业务 |
|
||||
| 腾讯云 | 价格亲民 | 小程序开发者 |
|
||||
| Vercel | 零配置、免费 | 前端项目 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 搬家:把代码放到服务器上
|
||||
## 4. 部署:搬家
|
||||
|
||||
服务器租好了,现在要把代码"搬"过去。
|
||||
### 4.1 连接服务器
|
||||
|
||||
### 3.1 怎么连接服务器?
|
||||
|
||||
服务器在遥远的机房,怎么操作?用 **SSH(远程连接工具)**:
|
||||
用 **SSH(远程连接工具)**:
|
||||
|
||||
```bash
|
||||
# 连接到服务器
|
||||
ssh root@123.45.67.89
|
||||
|
||||
# 输入密码后,你就"进入"服务器了
|
||||
# 后面敲的命令,都是在服务器上执行
|
||||
# 输入密码后,你就在服务器上了
|
||||
```
|
||||
|
||||
<DeploymentSSHDemo />
|
||||
### 4.2 部署方式
|
||||
|
||||
### 3.2 部署方式对比
|
||||
| 方式 | 优点 | 缺点 |
|
||||
|------|------|------|
|
||||
| FTP上传 | 简单直观 | 容易漏传 |
|
||||
| Git拉取 | 快、可追溯 | 需配置Git |
|
||||
|
||||
| 方式 | 类比 | 优点 | 缺点 |
|
||||
|------|------|------|------|
|
||||
| **FTP上传** | 自己扛箱子搬家 | 简单直观 | 容易漏传文件、慢 |
|
||||
| **Git拉取** | 让快递公司送货 | 快、可追溯 | 需要配置Git |
|
||||
| **Docker容器** | 用搬家集装箱 | 环境一致、易迁移 | 需要学习Docker |
|
||||
|
||||
**推荐方式**:Git + Build Script
|
||||
|
||||
小明用 Git 把代码推送到 GitHub,然后让服务器自己拉取最新代码:
|
||||
**推荐**:Git + Build Script
|
||||
|
||||
```bash
|
||||
# 服务器上执行的脚本
|
||||
cd /var/www/coffee-shop
|
||||
git pull origin main # 拉取最新代码
|
||||
npm install # 安装依赖
|
||||
npm run build # 构建项目
|
||||
pm2 restart all # 重启服务
|
||||
cd /var/www/my-site
|
||||
git pull origin main # 拉取最新代码
|
||||
npm install # 安装依赖
|
||||
npm run build # 构建项目
|
||||
pm2 restart all # 重启服务
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 装修:配置运行环境
|
||||
|
||||
代码搬过去了,但是服务器还只是个"空房子",需要"装修"才能住人。
|
||||
|
||||
### 4.1 需要装什么?
|
||||
|
||||
<DeploymentEnvironmentDemo />
|
||||
|
||||
**最小化安装脚本**(Ubuntu系统):
|
||||
### 4.3 环境配置(Ubuntu)
|
||||
|
||||
::: details 点击展开:最小化安装脚本
|
||||
```bash
|
||||
# 1. 更新系统
|
||||
# 更新系统
|
||||
sudo apt update && sudo apt upgrade -y
|
||||
|
||||
# 2. 安装 Nginx(Web服务器,负责接待客人)
|
||||
# 安装 Nginx(Web服务器)
|
||||
sudo apt install -y nginx
|
||||
|
||||
# 3. 安装 Node.js(运行JavaScript代码)
|
||||
# 安装 Node.js 18
|
||||
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
|
||||
sudo apt install -y nodejs
|
||||
|
||||
# 4. 安装 PM2(进程管家,防止程序崩溃)
|
||||
# 安装 PM2(进程管家)
|
||||
sudo npm install -g pm2
|
||||
|
||||
# 5. 安装 Git(拉代码用)
|
||||
# 安装 Git
|
||||
sudo apt install -y git
|
||||
```
|
||||
:::
|
||||
|
||||
### 4.2 Nginx 反向代理是什么?
|
||||
|
||||
小明的程序跑在 `3000` 端口,但用户习惯访问 `80`(HTTP)或 `443`(HTTPS)端口。
|
||||
|
||||
**Nginx 就像个"门童"**:
|
||||
- 守在 80/443 端口接待客人
|
||||
- 把请求转给后端的 3000 端口
|
||||
- 把结果返回给用户
|
||||
|
||||
<DeploymentNginxDemo />
|
||||
|
||||
**Nginx 配置示例**:
|
||||
**Nginx 反向代理**:把 80 端口请求转发到 3000 端口
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name coffee.example.com;
|
||||
server_name 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. 域名和 DNS:挂牌
|
||||
|
||||
### 5.1 域名是什么?
|
||||
|
||||
域名 = **网站的门牌号**
|
||||
|
||||
- IP地址(123.45.67.89)太难记
|
||||
- 域名(coffee.example.com)好记
|
||||
- 域名(example.com)好记
|
||||
|
||||
**DNS(域名解析)** = **电话本**,负责把域名翻译成IP
|
||||
**DNS(域名解析)** = **电话本**,把域名翻译成IP
|
||||
|
||||
<DeploymentDnsDemo />
|
||||
|
||||
### 5.2 域名配置步骤
|
||||
### 5.2 配置步骤
|
||||
|
||||
1. **买域名**:在阿里云/腾讯云/Namecheap购买(¥50-100/年)
|
||||
2. **配置DNS记录**:告诉世界"我的网站在这个IP"
|
||||
|
||||
常用记录类型:
|
||||
1. **买域名**:阿里云/腾讯云(¥50-100/年)
|
||||
2. **配置DNS**:
|
||||
|
||||
| 记录类型 | 用途 | 示例 |
|
||||
|---------|------|------|
|
||||
| **A记录** | 直接指向IP | `coffee.example.com` → `123.45.67.89` |
|
||||
| **CNAME** | 指向另一个域名 | `www.coffee.example.com` → `coffee.example.com` |
|
||||
| A记录 | 指向IP | `example.com` → `123.45.67.89` |
|
||||
| CNAME | 指向域名 | `www.example.com` → `example.com` |
|
||||
|
||||
**注意事项**:
|
||||
- ⏰ DNS生效慢:全球同步需要几分钟到几小时
|
||||
- 📝 TTL值:设置小一点(如600秒),修改后生效快
|
||||
::: tip ⚠️ 注意
|
||||
- DNS生效慢:全球同步需要几分钟到几小时
|
||||
- TTL值:设置小一点(如600秒),修改后生效快
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 6. 安防:安装 HTTPS 证书
|
||||
|
||||
房子好了,牌子挂了,现在要装门锁,保证安全。
|
||||
## 6. HTTPS:安防
|
||||
|
||||
### 6.1 为什么需要 HTTPS?
|
||||
|
||||
<DeploymentHttpsDemo />
|
||||
|
||||
**HTTP 的问题**:数据"裸奔",谁都能看见
|
||||
|
||||
**HTTPS 的好处**:数据加密,黑客看见也是乱码
|
||||
- **HTTP**:数据"裸奔",谁都能看见
|
||||
- **HTTPS**:数据加密,黑客看见也是乱码
|
||||
|
||||
### 6.2 怎么搞定 HTTPS?
|
||||
|
||||
不用花钱买证书!用 **Let's Encrypt(免费证书)** + **Certbot(自动工具)**
|
||||
用 **Let's Encrypt(免费证书)** + **Certbot(自动工具)**
|
||||
|
||||
```bash
|
||||
# 1. 安装 Certbot
|
||||
# 安装 Certbot
|
||||
sudo apt install -y certbot python3-certbot-nginx
|
||||
|
||||
# 2. 自动申请证书并配置 Nginx
|
||||
sudo certbot --nginx -d coffee.example.com
|
||||
# 自动申请证书并配置 Nginx
|
||||
sudo certbot --nginx -d example.com
|
||||
|
||||
# 3. 证书自动续期(Certbot会自动设置)
|
||||
# 证书自动续期
|
||||
sudo certbot renew --dry-run
|
||||
```
|
||||
|
||||
完成后,访问网站会看到小锁🔒,HTTPS 就搞定了!
|
||||
完成后访问网站会看到🔒小锁。
|
||||
|
||||
---
|
||||
|
||||
## 7. 招服务员:负载均衡
|
||||
## 7. CI/CD:自动化
|
||||
|
||||
小明的咖啡店火了,一个人接待不过来,怎么办?招更多服务员!
|
||||
|
||||
### 7.1 什么是负载均衡?
|
||||
|
||||
<DeploymentLbDemo />
|
||||
|
||||
**负载均衡器(Load Balancer)** = **餐厅领班**
|
||||
|
||||
- 看着后面N个服务器(服务员)
|
||||
- 把客人分配到最空闲的那个
|
||||
- 某个服务器挂了,自动把流量分给其他的
|
||||
|
||||
### 7.2 什么时候需要负载均衡?
|
||||
|
||||
| 访问量 | 服务器配置 | 是否需要LB |
|
||||
|--------|-----------|-----------|
|
||||
| <100/天 | 1核2G | ❌ 不需要 |
|
||||
| 1000-10000/天 | 2核4G | ❌ 不需要 |
|
||||
| >10000/天 | 4核8G | ✅ 建议配置 |
|
||||
|
||||
---
|
||||
|
||||
## 8. 开分店:CDN 加速
|
||||
|
||||
小明在全国都有客人,北京的服务器响应纽约的请求太慢了。怎么办?开分店!
|
||||
|
||||
### 8.1 什么是 CDN?
|
||||
|
||||
**CDN(内容分发网络)** = **全球连锁仓库**
|
||||
|
||||
<DeploymentCdnDemo />
|
||||
|
||||
**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?
|
||||
### 7.1 什么是 CI/CD?
|
||||
|
||||
<DeploymentCicdDemo />
|
||||
|
||||
**CI(持续集成)** = 自动化测试
|
||||
- **CI(持续集成)**:每次提交自动测试
|
||||
- **CD(持续部署)**:测试通过自动部署
|
||||
|
||||
- 每次提交代码自动运行测试
|
||||
- 保证代码质量
|
||||
### 7.2 GitHub Actions 示例
|
||||
|
||||
**CD(持续部署)** = 自动化上线
|
||||
|
||||
- 代码通过测试后自动部署
|
||||
- 一键上线,安全可靠
|
||||
|
||||
### 9.2 怎么实现 CI/CD?
|
||||
|
||||
**推荐:GitHub Actions**
|
||||
|
||||
在项目根目录创建 `.github/workflows/deploy.yml`:
|
||||
在 `.github/workflows/deploy.yml`:
|
||||
|
||||
```yaml
|
||||
name: Deploy to Production
|
||||
@@ -387,186 +230,154 @@ jobs:
|
||||
with:
|
||||
node-version: '18'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
- name: Install & Build
|
||||
run: |
|
||||
npm ci
|
||||
npm run build
|
||||
|
||||
- name: Build
|
||||
run: npm run build
|
||||
|
||||
- name: Deploy to server
|
||||
- name: Deploy
|
||||
uses: appleboy/ssh-action@master
|
||||
with:
|
||||
host: ${{ secrets.SERVER_HOST }}
|
||||
username: root
|
||||
key: ${{ secrets.SSH_KEY }}
|
||||
script: |
|
||||
cd /var/www/coffee-shop
|
||||
cd /var/www/my-site
|
||||
git pull origin main
|
||||
npm install
|
||||
npm run build
|
||||
pm2 restart all
|
||||
```
|
||||
|
||||
**工作流程**:
|
||||
1. 小明提交代码到 GitHub
|
||||
2. GitHub Actions 自动触发
|
||||
3. 自动构建 + 自动部署
|
||||
4. 几分钟后,新版本就上线了!
|
||||
---
|
||||
|
||||
::: details 📖 高级主题:CDN 和负载均衡
|
||||
|
||||
**CDN(内容分发网络)**:全球连锁仓库
|
||||
|
||||
- 把图片、CSS、JS等静态资源上传到CDN
|
||||
- CDN复制到全球节点
|
||||
- 用户访问时从最近节点获取
|
||||
|
||||
**效果**:北京用户→北京节点(10ms),纽约用户→纽约节点(15ms)
|
||||
|
||||
**负载均衡(Load Balancer)**:餐厅领班
|
||||
|
||||
- 看着N个服务器
|
||||
- 把客人分配到最空闲的那个
|
||||
- 某个服务器挂了,自动切换
|
||||
|
||||
**什么时候需要**?
|
||||
- 访问量 >10000/天
|
||||
- 单台服务器 CPU/内存 >70%
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 10. 守夜人:监控和备份
|
||||
## 8. 监控和备份:守夜人
|
||||
|
||||
网站上线了,但工作还没完。就像开店后需要保安和账房,网站也需要**监控**和**备份**。
|
||||
|
||||
### 10.1 监控:当个好管家
|
||||
### 8.1 监控什么?
|
||||
|
||||
<DeploymentMonitorDemo />
|
||||
|
||||
**需要监控什么?**
|
||||
| 指标 | 正常范围 |
|
||||
|------|---------|
|
||||
| CPU使用率 | <70% |
|
||||
| 内存使用率 | <80% |
|
||||
| 磁盘空间 | <80% |
|
||||
| 响应时间 | <2秒 |
|
||||
| 错误率 | <1% |
|
||||
|
||||
| 指标 | 说明 | 正常范围 |
|
||||
|------|------|---------|
|
||||
| **CPU使用率** | 服务器"脑子"有多忙 | <70% |
|
||||
| **内存使用率** | 服务器"记忆"占多少 | <80% |
|
||||
| **磁盘空间** | 硬盘还剩多少 | <80% |
|
||||
| **响应时间** | 网页加载多慢 | <2秒 |
|
||||
| **错误率** | 有多少请求失败 | <1% |
|
||||
### 8.2 备份策略
|
||||
|
||||
**监控工具推荐**:
|
||||
- **基础监控**:云厂商自带的监控(阿里云云监控/腾讯云云监控)
|
||||
- **APM监控**:New Relic / Datadog(收费,功能强大)
|
||||
- **开源方案**:Prometheus + Grafana(免费,需自建)
|
||||
|
||||
### 10.2 备份:最后的安全网
|
||||
|
||||
**数据是无价的**!一定要定期备份。
|
||||
|
||||
<DeploymentBackupDemo />
|
||||
|
||||
**备份三要素**:
|
||||
|
||||
1. **定期备份**:每天凌晨自动备份(用户访问少的时候)
|
||||
::: tip 💾 备份三要素
|
||||
1. **定期备份**:每天凌晨自动备份
|
||||
2. **多地存储**:本地 + 异地(防止单点故障)
|
||||
3. **定期恢复测试**:备份了要确保能恢复
|
||||
|
||||
**备份策略**:
|
||||
3. **定期恢复测试**:确保备份能恢复
|
||||
:::
|
||||
|
||||
```bash
|
||||
# 每天自动备份数据库
|
||||
0 2 * * * /usr/bin/mysqldump -u root -p密码 coffee_shop > /backup/db_$(date +\%Y\%m\%d).sql
|
||||
0 2 * * * /usr/bin/mysqldump -u root -p密码 my_db > /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/
|
||||
# 自动上传到云存储
|
||||
/usr/bin/ossutil cp /backup/db_$(date +\%Y\%m\%d).sql oss://my-backup/
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 11. 故障排查:遇到问题怎么办?
|
||||
|
||||
网站出问题了,别慌,按这个流程排查:
|
||||
|
||||
### 11.1 排查流程图
|
||||
|
||||
<DeploymentTroubleshootDemo />
|
||||
|
||||
### 11.2 常见问题速查表
|
||||
## 9. 常见问题速查
|
||||
|
||||
| 现象 | 可能原因 | 怎么办 |
|
||||
|------|---------|--------|
|
||||
| **网站打不开** | 域名没解析?服务器挂了? | `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 |
|
||||
| 网站打不开 | 域名没解析?服务器挂了? | `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 |
|
||||
|
||||
---
|
||||
|
||||
## 12. 上线前最后检查
|
||||
## 10. 上线前检查清单
|
||||
|
||||
小明终于要正式开业了!在按下"发布"按钮前,再检查一遍:
|
||||
|
||||
<DeploymentChecklistDemo />
|
||||
|
||||
### 最终检查清单
|
||||
|
||||
**基础检查**:
|
||||
- [ ] 代码已经构建(`npm run build`)
|
||||
::: details ✅ 基础检查
|
||||
- [ ] 代码已构建(`npm run build`)
|
||||
- [ ] 服务器环境配置完成(Nginx + Node.js)
|
||||
- [ ] 域名解析正确(能ping通)
|
||||
- [ ] HTTPS证书正常(有🔒小锁)
|
||||
:::
|
||||
|
||||
**性能检查**:
|
||||
- [ ] 首屏加载时间 <2秒
|
||||
- [ ] 图片已经压缩优化
|
||||
- [ ] CDN配置完成
|
||||
- [ ] 开启了Gzip压缩
|
||||
|
||||
**安全检查**:
|
||||
::: details 🔒 安全检查
|
||||
- [ ] 数据库密码不是弱密码
|
||||
- [ ] 敏感信息没写在代码里
|
||||
- [ ] 开启了防火墙(只开必要的端口)
|
||||
- [ ] 开启了防火墙(只开必要端口)
|
||||
- [ ] 配置了SQL注入防护
|
||||
:::
|
||||
|
||||
**运维检查**:
|
||||
::: details 🛡️ 运维检查
|
||||
- [ ] 监控告警配置完成
|
||||
- [ ] 日志正常记录
|
||||
- [ ] 自动备份已设置
|
||||
- [ ] CI/CD流程测试通过
|
||||
|
||||
**应急预案**:
|
||||
- [ ] 准备了回滚方案
|
||||
- [ ] 有故障联系机制
|
||||
- [ ] 备份恢复测试通过
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 13. 总结:服务上线的关键点
|
||||
|
||||
小明的咖啡店网站终于上线了!让我们回顾一下整个过程:
|
||||
## 总结
|
||||
|
||||
### 核心流程
|
||||
|
||||
1. **构建**:把代码打包成浏览器懂的格式
|
||||
2. **部署**:把代码放到服务器上
|
||||
3. **配置**:Nginx、域名、HTTPS
|
||||
4. **优化**:CDN、负载均衡
|
||||
5. **自动化**:CI/CD解放双手
|
||||
6. **保障**:监控和备份守住底线
|
||||
1. **构建** → 代码打包成浏览器懂的格式
|
||||
2. **部署** → 代码放到服务器上
|
||||
3. **配置** → Nginx、域名、HTTPS
|
||||
4. **优化** → CDN、负载均衡(高级)
|
||||
5. **自动化** → CI/CD解放双手
|
||||
6. **保障** → 监控和备份守住底线
|
||||
|
||||
### 关键原则
|
||||
|
||||
| 原则 | 说明 |
|
||||
|------|------|
|
||||
| **小步快跑** | 先上线MVP(最小可用产品),再逐步完善 |
|
||||
| **小步快跑** | 先上线MVP,再逐步完善 |
|
||||
| **自动化优先** | 能自动的别手动,减少人为失误 |
|
||||
| **监控先行** | 先建监控,再上功能 |
|
||||
| **备份为王** | 数据无价,备份是最后的防线 |
|
||||
| **备份为王** | 数据无价,备份是最后防线 |
|
||||
| **安全第一** | HTTPS、防火墙、弱密码检查,一个都不能少 |
|
||||
|
||||
### 学习路线
|
||||
|
||||
**入门**(第1天):
|
||||
- 用 Vercel/Netlify 免费部署一个静态网页
|
||||
**入门(第1天)**:用 Vercel 免费部署静态网页
|
||||
|
||||
**进阶**(第1周):
|
||||
- 租一台云服务器
|
||||
- 手动部署一个 Node.js 应用
|
||||
- 配置域名和 HTTPS
|
||||
**进阶(第1周)**:租云服务器、手动部署 Node.js 应用、配置域名和 HTTPS
|
||||
|
||||
**实战**(第2-4周):
|
||||
- 搭建完整的 CI/CD 流程
|
||||
- 配置 CDN 加速
|
||||
- 建立监控和备份体系
|
||||
**实战(第2-4周)**:搭建完整 CI/CD 流程、配置 CDN、建立监控和备份
|
||||
|
||||
**深入**(持续):
|
||||
- 学习 Docker 容器化部署
|
||||
- 研究 Kubernetes 集群管理
|
||||
- 探索微服务架构
|
||||
**深入(持续)**:学习 Docker 容器化、Kubernetes 集群、微服务架构
|
||||
|
||||
---
|
||||
|
||||
@@ -574,19 +385,16 @@ find /backup -name "db_*.sql" -mtime +7 -delete
|
||||
|
||||
| 名词 | 英文 | 人话解释 |
|
||||
|------|------|---------|
|
||||
| **部署** | 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 | 复份数据,防丢失 |
|
||||
| 部署 | 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 | 备份数据,防丢失 |
|
||||
|
||||
Reference in New Issue
Block a user