feat: save current work to dev branch

2026-01-15 20:10:19 +08:00
parent c9e7ece75d
commit c8567ce23f
76 changed files with 28352 additions and 6 deletions
@@ -0,0 +1,722 @@
+# 部署与上线
+
+> 💡 **学习指南**：开发完成只是第一步，让应用真正服务于用户还需要部署和上线。本章节将带你了解域名、服务器、CDN 等核心概念，并掌握现代 Web 应用的部署流程。
+
+## 0. 部署架构概览
+
+让我们先通过可视化演示，了解现代 Web 应用的部署架构：
+
+<DeploymentArchitecture />
+
+## 1. 域名 (Domain Name)
+
+### 1.1 什么是域名？
+
+**域名** 是互联网上识别和定位计算机的层次结构式字符标识。
+
+**域名组成**：
+
+```
+www.example.com
+│   │     │
+│   │     └─ 顶级域名 (TLD)
+│   └─────── 二级域名
+└─────────── 三级域名 (子域名)
+```
+
+**常见顶级域名**：
+
+| 类型 | 域名 | 用途 |
+|------|------|------|
+| 通用 | `.com` | 商业机构 |
+| 通用 | `.org` | 非营利组织 |
+| 通用 | `.net` | 网络服务 |
+| 国家 | `.cn` | 中国 |
+| 国家 | `.us` | 美国 |
+| 国家 | `.jp` | 日本 |
+| 新通用 | `.io` | 科技初创 |
+| 新通用 | `.ai` | 人工智能 |
+
+### 1.2 域名注册
+
+**注册流程**：
+
+1. **选择域名**
+   - 简短易记
+   - 避免特殊字符
+   - 选择合适的后缀
+
+2. **选择注册商**
+   - **国外**：GoDaddy、Namecheap、Google Domains
+   - **国内**：阿里云、腾讯云、Cloudflare
+
+3. **注册域名**
+   - 查询可用性
+   - 添加到购物车
+   - 填写信息并支付
+
+4. **配置 DNS**
+   - 设置域名服务器
+   - 添加 DNS 记录
+
+**价格参考**：
+- `.com`：$10-15/年
+- `.cn`：￥30-50/年
+- `.io`：$30-50/年
+
+### 1.3 DNS 解析
+
+**DNS 记录类型**：
+
+**A 记录**（地址记录）：
+```
+example.com    A    1.2.3.4
+www.example.com A    1.2.3.4
+```
+
+**CNAME 记录**（别名记录）：
+```
+www.example.com    CNAME    example.com
+blog.example.com   CNAME    example.wordpress.com
+```
+
+**MX 记录**（邮件服务器）：
+```
+example.com    MX    10 mail.example.com
+```
+
+**TXT 记录**（文本记录）：
+```
+example.com    TXT    "v=spf1 include:_spf.google.com ~all"
+```
+
+**配置示例**（阿里云 DNS）：
+
+| 主机记录 | 记录类型 | 记录值 | TTL |
+|----------|----------|--------|-----|
+| @ | A | 1.2.3.4 | 600 |
+| www | A | 1.2.3.4 | 600 |
+| @ | CNAME | example.com | 600 |
+
+### 1.4 域名生效时间
+
+- **全球生效**：24-48 小时
+- **本地生效**：修改后几分钟
+- **加速生效**：清除本地 DNS 缓存
+
+```bash
+# 清除 DNS 缓存
+# Windows
+ipconfig /flushdns
+
+# macOS
+sudo dscacheutil -flushcache
+
+# Linux
+sudo systemd-resolve --flush-caches
+```
+
+## 2. 服务器 (Server)
+
+### 2.1 什么是服务器？
+
+**服务器** 是提供计算服务的设备，响应客户端的请求。
+
+**服务器类型**：
+
+**物理服务器**：
+- 整机独享
+- 性能强大
+- 价格昂贵
+- 需要运维
+
+**虚拟专用服务器 (VPS)**：
+- 虚拟化技术
+- 独立环境
+- 价格适中
+- 常见选择
+
+**云服务器**：
+- 弹性扩展
+- 按需付费
+- 高可用性
+- 易于管理
+
+**容器服务器**：
+- 轻量级
+- 快速部署
+- 易于迁移
+- 现代化
+
+### 2.2 主流云服务商
+
+**国际**：
+
+| 服务商 | 产品 | 优势 | 价格 |
+|--------|------|------|------|
+| AWS | EC2 | 功能全面、稳定 | $5-100/月 |
+| Google Cloud | Compute Engine | 技术先进 | $6-100/月 |
+| DigitalOcean | Droplet | 简单易用 | $4-48/月 |
+| Linode | Linode | 性价比高 | $5-80/月 |
+| Vultr | Vultr | 全球节点 | $2.5-40/月 |
+
+**国内**：
+
+| 服务商 | 产品 | 优势 | 价格 |
+|--------|------|------|------|
+| 阿里云 | ECS | 功能完善 | ￥60-500/月 |
+| 腾讯云 | CVM | 稳定可靠 | ￥50-400/月 |
+| 华为云 | ECS | 企业级 | ￥50-300/月 |
+
+### 2.3 服务器选择
+
+**根据流量选择**：
+
+- **个人博客**：1核1G，$5/月
+- **小型应用**：1核2G，$10/月
+- **中型应用**：2核4G，$20/月
+- **大型应用**：4核8G，$40/月
+
+**根据地区选择**：
+
+- **目标用户在国内**：阿里云、腾讯云
+- **目标用户在国外**：AWS、DigitalOcean
+- **全球用户**：Cloudflare + 多节点
+
+### 2.4 服务器配置
+
+**基础配置**（Ubuntu）：
+
+```bash
+# 1. 更新系统
+sudo apt update
+sudo apt upgrade -y
+
+# 2. 安装必要软件
+sudo apt install -y nginx git curl
+
+# 3. 安装 Node.js
+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. 配置防火墙
+sudo ufw allow OpenSSH
+sudo ufw allow 'Nginx Full'
+sudo ufw enable
+```
+
+**Nginx 配置**：
+
+```nginx
+# /etc/nginx/sites-available/example.com
+server {
+    listen 80;
+    server_name example.com www.example.com;
+
+    root /var/www/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ =404;
+    }
+
+    # API 代理
+    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_cache_bypass $http_upgrade;
+    }
+}
+```
+
+**启用配置**：
+
+```bash
+# 创建软链接
+sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
+
+# 测试配置
+sudo nginx -t
+
+# 重启 Nginx
+sudo systemctl restart nginx
+```
+
+### 2.5 SSL 证书
+
+**使用 Let's Encrypt 免费证书**：
+
+```bash
+# 安装 Certbot
+sudo apt install certbot python3-certbot-nginx
+
+# 获取证书
+sudo certbot --nginx -d example.com -d www.example.com
+
+# 自动续期
+sudo certbot renew --dry-run
+```
+
+**配置示例**：
+
+```nginx
+server {
+    listen 443 ssl;
+    server_name example.com www.example.com;
+
+    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
+
+    # SSL 配置
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers HIGH:!aNULL:!MD5;
+}
+
+# HTTP 重定向到 HTTPS
+server {
+    listen 80;
+    server_name example.com www.example.com;
+    return 301 https://$host$request_uri;
+}
+```
+
+## 3. CDN (内容分发网络)
+
+### 3.1 什么是 CDN？
+
+**CDN (Content Delivery Network)** 内容分发网络，通过将内容缓存到全球各地的边缘节点，让用户就近访问。
+
+**CDN 工作原理**：
+
+```
+用户请求 → DNS 解析 → 就近 CDN 节点
+                        ↓
+                   缓存命中？返回内容
+                        ↓ 否
+                   回源获取 → 缓存并返回
+```
+
+### 3.2 CDN 的优势
+
+**加速访问**：
+- 就近节点响应快
+- 减少网络延迟
+- 提升用户体验
+
+**减轻源站压力**：
+- 静态资源由 CDN 承载
+- 减少源站带宽
+- 降低服务器负载
+
+**提高可用性**：
+- 节点故障自动切换
+- 防御 DDoS 攻击
+- 提高容灾能力
+
+**节省成本**：
+- CDN 流量费用低
+- 减少源站带宽成本
+
+### 3.3 主流 CDN 服务商
+
+**国际**：
+
+| 服务商 | 免费额度 | 付费价格 | 特点 |
+|--------|----------|----------|------|
+| Cloudflare | 无限制 | $0-20/月 | 全球节点、免费 SSL |
+| AWS CloudFront | 1TB/年 | $0.085/GB | 功能强大 |
+| Google Cloud CDN | 无 | $0.08/GB | 全球网络 |
+| BunnyCDN | 1TB/月 | $1/TB | 性价比高 |
+
+**国内**：
+
+| 服务商 | 价格 | 特点 |
+|--------|------|------|
+| 阿里云 CDN | ￥0.24/GB | 节点多、稳定 |
+| 腾讯云 CDN | ￥0.21/GB | 价格优惠 |
+| 七牛云 | ￥0.29/GB | 存储集成 |
+
+### 3.4 CDN 配置
+
+**Cloudflare 配置步骤**：
+
+1. **添加站点**
+   - 输入域名
+   - 选择免费计划
+   - 扫描 DNS 记录
+
+2. **切换域名服务器**
+   - Cloudflare 提供两个 NS 记录
+   - 在域名注册商处修改
+   - 等待生效（2-24 小时）
+
+3. **配置缓存规则**
+   - 缓存静态资源（CSS、JS、图片）
+   - 不缓存 HTML 和 API
+   - 设置缓存时间
+
+4. **开启 HTTPS**
+   - Full 模式（推荐）
+   - 自动 SSL 证书
+   - 强制 HTTPS
+
+**Nginx 缓存配置**：
+
+```nginx
+# 设置缓存头部
+location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
+    expires 1y;
+    add_header Cache-Control "public, immutable";
+}
+
+location / {
+    add_header Cache-Control "no-cache";
+}
+```
+
+### 3.5 CDN 最佳实践
+
+**缓存策略**：
+
+- **静态资源**：图片、CSS、JS → 长期缓存（1 年）
+- **HTML 文件**：短期缓存或不缓存
+- **API 响应**：根据业务设置缓存时间
+- **用户特定内容**：不缓存
+
+**缓存清除**：
+
+```bash
+# Cloudflare API
+curl -X POST "https://api.cloudflare.com/client/v4/zones/zone_id/purge_cache" \
+  -H "Authorization: Bearer token" \
+  -H "Content-Type: application/json" \
+  --data '{"files":["https://example.com/style.css"]}'
+```
+
+## 4. 部署流程
+
+### 4.1 部署方式
+
+**传统部署**：
+- 手动上传代码
+- SSH 登录服务器
+- 执行部署脚本
+- 重启服务
+
+**CI/CD 部署**：
+- 代码推送到 Git
+- 自动触发构建
+- 自动运行测试
+- 自动部署到服务器
+
+**容器化部署**：
+- Docker 打包应用
+- 推送到镜像仓库
+- 服务器拉取镜像
+- 运行容器
+
+### 4.2 Docker 部署
+
+**Dockerfile**：
+
+```dockerfile
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci --only=production
+
+COPY . .
+RUN npm run build
+
+EXPOSE 3000
+
+CMD ["npm", "start"]
+```
+
+**构建和运行**：
+
+```bash
+# 构建镜像
+docker build -t myapp:1.0 .
+
+# 运行容器
+docker run -d -p 3000:3000 --name myapp myapp:1.0
+
+# 查看日志
+docker logs -f myapp
+
+# 停止容器
+docker stop myapp
+```
+
+**Docker Compose**：
+
+```yaml
+version: '3.8'
+
+services:
+  web:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+    restart: always
+
+  nginx:
+    image: nginx:alpine
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf
+      - ./ssl:/etc/nginx/ssl
+    depends_on:
+      - web
+    restart: always
+```
+
+### 4.3 CI/CD 配置
+
+**GitHub Actions 示例**：
+
+```yaml
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to server
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USERNAME }}
+          key: ${{ secrets.SSH_KEY }}
+          script: |
+            cd /var/www/myapp
+            git pull
+            npm ci --production
+            npm run build
+            pm2 restart myapp
+```
+
+## 5. 监控和运维
+
+### 5.1 日志管理
+
+**应用日志**：
+
+```bash
+# PM2 日志
+pm2 logs myapp
+
+# Nginx 日志
+tail -f /var/log/nginx/access.log
+tail -f /var/log/nginx/error.log
+```
+
+**日志分析**：
+
+```bash
+# 统计访问量
+awk '{print $1}' /var/log/nginx/access.log | sort | uniq -c | sort -rn | head -10
+
+# 统计状态码
+awk '{print $9}' /var/log/nginx/access.log | sort | uniq -c | sort -rn
+```
+
+### 5.2 性能监控
+
+**系统监控**：
+
+```bash
+# CPU 使用率
+top
+
+# 内存使用
+free -h
+
+# 磁盘使用
+df -h
+
+# 网络流量
+iftop
+```
+
+**应用监控工具**：
+
+- **PM2**：进程管理和监控
+- **New Relic**：应用性能监控
+- **Datadog**：基础设施监控
+- **Prometheus + Grafana**：开源监控方案
+
+### 5.3 自动备份
+
+**数据库备份脚本**：
+
+```bash
+#!/bin/bash
+# backup.sh
+
+DATE=$(date +%Y%m%d_%H%M%S)
+BACKUP_DIR="/var/backups"
+DB_NAME="myapp"
+DB_USER="root"
+DB_PASS="password"
+
+# 备份数据库
+mysqldump -u $DB_USER -p$DB_PASS $DB_NAME > $BACKUP_DIR/db_$DATE.sql
+
+# 压缩备份
+gzip $BACKUP_DIR/db_$DATE.sql
+
+# 删除 7 天前的备份
+find $BACKUP_DIR -name "db_*.sql.gz" -mtime +7 -delete
+
+echo "Backup completed: db_$DATE.sql.gz"
+```
+
+**定时任务**：
+
+```bash
+# 添加到 crontab
+crontab -e
+
+# 每天凌晨 2 点执行备份
+0 2 * * * /path/to/backup.sh
+```
+
+## 6. 常见问题
+
+### 6.1 网站无法访问
+
+**排查步骤**：
+
+1. **检查域名**
+   ```bash
+   nslookup example.com
+   ping example.com
+   ```
+
+2. **检查服务器**
+   ```bash
+   ping 1.2.3.4
+   ```
+
+3. **检查 Web 服务**
+   ```bash
+   systemctl status nginx
+   ```
+
+4. **检查防火墙**
+   ```bash
+   sudo ufw status
+   ```
+
+### 6.2 HTTPS 不生效
+
+**常见原因**：
+
+- 证书过期：续期证书
+- 配置错误：检查 Nginx 配置
+- 端口未开放：开放 443 端口
+- DNS 未生效：等待 DNS 传播
+
+### 6.3 CDN 缓存问题
+
+**解决方法**：
+
+```bash
+# 清除 Cloudflare 缓存
+# Dashboard → Caching → Purge Everything
+
+# 或使用 API
+curl -X POST "https://api.cloudflare.com/client/v4/zones/zone_id/purge_cache" \
+  -H "Authorization: Bearer token" \
+  --data '{"purge_everything":true}'
+```
+
+## 7. 成本优化
+
+### 7.1 服务器成本
+
+**优化策略**：
+
+- 按需选择配置，避免浪费
+- 使用预留实例（长期项目）
+- 选择合适的计费方式
+- 定期清理不用的资源
+
+### 7.2 带宽成本
+
+**优化策略**：
+
+- 使用 CDN 减少源站带宽
+- 启用压缩（Gzip、Brotli）
+- 优化图片大小和格式
+- 使用懒加载
+
+### 7.3 存储成本
+
+**优化策略**：
+
+- 定期清理日志文件
+- 使用对象存储（OSS、S3）
+- 压缩静态资源
+- 删除不必要的备份
+
+## 8. 总结
+
+部署与上线核心要点：
+
+- 🌐 **域名**：网站的入口，选择好记的域名
+- 🖥️ **服务器**：应用运行的基础，选择合适的配置
+- 📡 **CDN**：加速访问，减轻源站压力
+- 🔐 **HTTPS**：安全传输，必备配置
+- 🚀 **CI/CD**：自动化部署，提高效率
+- 📊 **监控**：及时发现问题，保证稳定
+
+**部署清单**：
+
+- [ ] 注册域名
+- [ ] 购买服务器
+- [ ] 配置 DNS 解析
+- [ ] 安装 Web 服务器
+- [ ] 部署应用代码
+- [ ] 配置 SSL 证书
+- [ ] 启用 CDN
+- [ ] 设置监控
+- [ ] 配置备份
+- [ ] 性能优化
+
+掌握部署与上线，你的应用就能真正服务于用户。现在就开始部署你的第一个项目吧！