sanbuphy
401 lines
10 KiB
Markdown
401 lines
10 KiB
Markdown
# 服务上线之旅
|
||
|
||
::: tip 🎯 核心问题
|
||
**代码在本地跑得好好的，怎么让全世界的人都能访问？**
|
||
:::
|
||
|
||
---
|
||
|
||
## 1. 为什么要"服务上线"？
|
||
|
||
想象小明在家做了一桌子菜，现在要开餐厅让所有人来吃。这可不是"把菜端出去"那么简单。
|
||
|
||
<DeploymentOverviewDemo />
|
||
|
||
**服务上线是一场"搬家+开业"的大工程**：
|
||
1. **构建** → 打包代码成服务器能懂的格式
|
||
2. **服务器** → 租一台永远不关机的电脑
|
||
3. **部署** → 把代码上传到服务器
|
||
4. **环境** → 配置 Nginx、Node.js
|
||
5. **域名** → 配置 DNS，让用户能找到
|
||
6. **HTTPS** → 安装证书，保护数据安全
|
||
7. **CI/CD** → 自动化部署，解放双手
|
||
8. **监控** → 盯控和备份，守住底线
|
||
|
||
---
|
||
|
||
## 2. 构建：把代码变成"可携带的包裹"
|
||
|
||
### 2.1 为什么要构建？
|
||
|
||
浏览器只认识 HTML/CSS/JS，不认识 Vue 组件。**构建（Build）就是"打包外卖"的过程**。
|
||
|
||
<DeploymentBuildDemo />
|
||
|
||
**构建做了什么**：
|
||
- **翻译**：Vue → HTML/CSS/JS
|
||
- **压缩**：减小代码体积（省流量、加载快）
|
||
- **合并**：多个文件 → 几个大包（减少请求）
|
||
- **哈希**：文件名加指纹（`app.abc123.js`），缓存友好
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 服务器：找房子
|
||
|
||
### 3.1 服务器是什么？
|
||
|
||
服务器 = **一台永远不关机、连着互联网的电脑**
|
||
|
||
<DeploymentServerDemo />
|
||
|
||
### 3.2 怎么选服务器？
|
||
|
||
::: tip 💡 选型建议
|
||
- **个人项目/学习**：1核2G，约¥100-200/年
|
||
- **小型商业项目**：2核4G，约¥500/年
|
||
- **中型项目**：4核8G，约¥1000+/年
|
||
:::
|
||
|
||
| 方案 | 类比 | 优点 | 缺点 | 价格 |
|
||
|------|------|------|------|------|
|
||
| 虚拟主机 | 租床位 | 便宜、简单 | 性能差 | ¥50-200/年 |
|
||
| 云服务器 | 租公寓 | 自由度高、可扩展 | 需自己配置 | ¥100-1000/年 |
|
||
| Vercel | 租会议室 | 零配置、免费额度 | 受平台限制 | 免费/按量 |
|
||
|
||
### 3.3 主流云厂商
|
||
|
||
| 厂商 | 特点 | 适合人群 |
|
||
|------|------|---------|
|
||
| 阿里云 | 国内访问快 | 国内业务 |
|
||
| 腾讯云 | 价格亲民 | 小程序开发者 |
|
||
| Vercel | 零配置、免费 | 前端项目 |
|
||
|
||
---
|
||
|
||
## 4. 部署：搬家
|
||
|
||
### 4.1 连接服务器
|
||
|
||
用 **SSH（远程连接工具）**：
|
||
|
||
```bash
|
||
ssh root@123.45.67.89
|
||
# 输入密码后，你就在服务器上了
|
||
```
|
||
|
||
### 4.2 部署方式
|
||
|
||
| 方式 | 优点 | 缺点 |
|
||
|------|------|------|
|
||
| FTP上传 | 简单直观 | 容易漏传 |
|
||
| Git拉取 | 快、可追溯 | 需配置Git |
|
||
|
||
**推荐**：Git + Build Script
|
||
|
||
```bash
|
||
cd /var/www/my-site
|
||
git pull origin main # 拉取最新代码
|
||
npm install # 安装依赖
|
||
npm run build # 构建项目
|
||
pm2 restart all # 重启服务
|
||
```
|
||
|
||
### 4.3 环境配置（Ubuntu）
|
||
|
||
::: details 点击展开：最小化安装脚本
|
||
```bash
|
||
# 更新系统
|
||
sudo apt update && sudo apt upgrade -y
|
||
|
||
# 安装 Nginx（Web服务器）
|
||
sudo apt install -y nginx
|
||
|
||
# 安装 Node.js 18
|
||
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
|
||
sudo apt install -y nodejs
|
||
|
||
# 安装 PM2（进程管家）
|
||
sudo npm install -g pm2
|
||
|
||
# 安装 Git
|
||
sudo apt install -y git
|
||
```
|
||
:::
|
||
|
||
**Nginx 反向代理**：把 80 端口请求转发到 3000 端口
|
||
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name example.com;
|
||
|
||
location / {
|
||
proxy_pass http://localhost:3000;
|
||
proxy_http_version 1.1;
|
||
proxy_set_header Host $host;
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 5. 域名和 DNS：挂牌
|
||
|
||
### 5.1 域名是什么？
|
||
|
||
- IP地址（123.45.67.89）太难记
|
||
- 域名（example.com）好记
|
||
|
||
**DNS（域名解析）** = **电话本**，把域名翻译成IP
|
||
|
||
<DeploymentDnsDemo />
|
||
|
||
### 5.2 配置步骤
|
||
|
||
1. **买域名**：阿里云/腾讯云（¥50-100/年）
|
||
2. **配置DNS**：
|
||
|
||
| 记录类型 | 用途 | 示例 |
|
||
|---------|------|------|
|
||
| A记录 | 指向IP | `example.com` → `123.45.67.89` |
|
||
| CNAME | 指向域名 | `www.example.com` → `example.com` |
|
||
|
||
::: tip ⚠️ 注意
|
||
- DNS生效慢：全球同步需要几分钟到几小时
|
||
- TTL值：设置小一点（如600秒），修改后生效快
|
||
:::
|
||
|
||
---
|
||
|
||
## 6. HTTPS：安防
|
||
|
||
### 6.1 为什么需要 HTTPS？
|
||
|
||
<DeploymentHttpsDemo />
|
||
|
||
- **HTTP**：数据"裸奔"，谁都能看见
|
||
- **HTTPS**：数据加密，黑客看见也是乱码
|
||
|
||
### 6.2 怎么搞定 HTTPS？
|
||
|
||
用 **Let's Encrypt（免费证书）** + **Certbot（自动工具）**
|
||
|
||
```bash
|
||
# 安装 Certbot
|
||
sudo apt install -y certbot python3-certbot-nginx
|
||
|
||
# 自动申请证书并配置 Nginx
|
||
sudo certbot --nginx -d example.com
|
||
|
||
# 证书自动续期
|
||
sudo certbot renew --dry-run
|
||
```
|
||
|
||
完成后访问网站会看到🔒小锁。
|
||
|
||
---
|
||
|
||
## 7. CI/CD：自动化
|
||
|
||
### 7.1 什么是 CI/CD？
|
||
|
||
<DeploymentCicdDemo />
|
||
|
||
- **CI（持续集成）**：每次提交自动测试
|
||
- **CD（持续部署）**：测试通过自动部署
|
||
|
||
### 7.2 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 & Build
|
||
run: |
|
||
npm ci
|
||
npm run build
|
||
|
||
- name: Deploy
|
||
uses: appleboy/ssh-action@master
|
||
with:
|
||
host: ${{ secrets.SERVER_HOST }}
|
||
username: root
|
||
key: ${{ secrets.SSH_KEY }}
|
||
script: |
|
||
cd /var/www/my-site
|
||
git pull origin main
|
||
npm install
|
||
npm run build
|
||
pm2 restart all
|
||
```
|
||
|
||
---
|
||
|
||
::: details 📖 高级主题：CDN 和负载均衡
|
||
|
||
**CDN（内容分发网络）**：全球连锁仓库
|
||
|
||
- 把图片、CSS、JS等静态资源上传到CDN
|
||
- CDN复制到全球节点
|
||
- 用户访问时从最近节点获取
|
||
|
||
**效果**：北京用户→北京节点（10ms），纽约用户→纽约节点（15ms）
|
||
|
||
**负载均衡（Load Balancer）**：餐厅领班
|
||
|
||
- 看着N个服务器
|
||
- 把客人分配到最空闲的那个
|
||
- 某个服务器挂了，自动切换
|
||
|
||
**什么时候需要**？
|
||
- 访问量 >10000/天
|
||
- 单台服务器 CPU/内存 >70%
|
||
|
||
:::
|
||
|
||
---
|
||
|
||
## 8. 监控和备份：守夜人
|
||
|
||
### 8.1 监控什么？
|
||
|
||
<DeploymentMonitorDemo />
|
||
|
||
| 指标 | 正常范围 |
|
||
|------|---------|
|
||
| CPU使用率 | <70% |
|
||
| 内存使用率 | <80% |
|
||
| 磁盘空间 | <80% |
|
||
| 响应时间 | <2秒 |
|
||
| 错误率 | <1% |
|
||
|
||
### 8.2 备份策略
|
||
|
||
::: tip 💾 备份三要素
|
||
1. **定期备份**：每天凌晨自动备份
|
||
2. **多地存储**：本地 + 异地（防止单点故障）
|
||
3. **定期恢复测试**：确保备份能恢复
|
||
:::
|
||
|
||
```bash
|
||
# 每天自动备份数据库
|
||
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
|
||
|
||
# 自动上传到云存储
|
||
/usr/bin/ossutil cp /backup/db_$(date +\%Y\%m\%d).sql oss://my-backup/
|
||
```
|
||
|
||
---
|
||
|
||
## 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 |
|
||
|
||
---
|
||
|
||
## 10. 上线前检查清单
|
||
|
||
::: details ✅ 基础检查
|
||
- [ ] 代码已构建（`npm run build`）
|
||
- [ ] 服务器环境配置完成（Nginx + Node.js）
|
||
- [ ] 域名解析正确（能ping通）
|
||
- [ ] HTTPS证书正常（有🔒小锁）
|
||
:::
|
||
|
||
::: details 🔒 安全检查
|
||
- [ ] 数据库密码不是弱密码
|
||
- [ ] 敏感信息没写在代码里
|
||
- [ ] 开启了防火墙（只开必要端口）
|
||
- [ ] 配置了SQL注入防护
|
||
:::
|
||
|
||
::: details 🛡️ 运维检查
|
||
- [ ] 监控告警配置完成
|
||
- [ ] 日志正常记录
|
||
- [ ] 自动备份已设置
|
||
- [ ] CI/CD流程测试通过
|
||
:::
|
||
|
||
---
|
||
|
||
## 总结
|
||
|
||
### 核心流程
|
||
|
||
1. **构建** → 代码打包成浏览器懂的格式
|
||
2. **部署** → 代码放到服务器上
|
||
3. **配置** → Nginx、域名、HTTPS
|
||
4. **优化** → CDN、负载均衡（高级）
|
||
5. **自动化** → CI/CD解放双手
|
||
6. **保障** → 监控和备份守住底线
|
||
|
||
### 关键原则
|
||
|
||
| 原则 | 说明 |
|
||
|------|------|
|
||
| **小步快跑** | 先上线MVP，再逐步完善 |
|
||
| **自动化优先** | 能自动的别手动，减少人为失误 |
|
||
| **监控先行** | 先建监控，再上功能 |
|
||
| **备份为王** | 数据无价，备份是最后防线 |
|
||
| **安全第一** | HTTPS、防火墙、弱密码检查，一个都不能少 |
|
||
|
||
### 学习路线
|
||
|
||
**入门（第1天）**：用 Vercel 免费部署静态网页
|
||
|
||
**进阶（第1周）**：租云服务器、手动部署 Node.js 应用、配置域名和 HTTPS
|
||
|
||
**实战（第2-4周）**：搭建完整 CI/CD 流程、配置 CDN、建立监控和备份
|
||
|
||
**深入（持续）**：学习 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 | 备份数据，防丢失 |
|