14 KiB
部署与上线
💡 学习指南:开发完成只是第一步,让应用真正服务于用户还需要部署和上线。本章节将带你了解域名、服务器、CDN 等核心概念,并掌握现代 Web 应用的部署流程。
0. 部署架构概览
让我们先通过可视化演示,了解现代 Web 应用的部署架构:
1. 域名 (Domain Name)
1.1 什么是域名?
域名 是互联网上识别和定位计算机的层次结构式字符标识。
域名组成:
www.example.com
│ │ │
│ │ └─ 顶级域名 (TLD)
│ └─────── 二级域名
└─────────── 三级域名 (子域名)
常见顶级域名:
| 类型 | 域名 | 用途 |
|---|---|---|
| 通用 | .com |
商业机构 |
| 通用 | .org |
非营利组织 |
| 通用 | .net |
网络服务 |
| 国家 | .cn |
中国 |
| 国家 | .us |
美国 |
| 国家 | .jp |
日本 |
| 新通用 | .io |
科技初创 |
| 新通用 | .ai |
人工智能 |
1.2 域名注册
注册流程:
-
选择域名
- 简短易记
- 避免特殊字符
- 选择合适的后缀
-
选择注册商
- 国外:GoDaddy、Namecheap、Google Domains
- 国内:阿里云、腾讯云、Cloudflare
-
注册域名
- 查询可用性
- 添加到购物车
- 填写信息并支付
-
配置 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 缓存
# 清除 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):
# 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 配置:
# /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;
}
}
启用配置:
# 创建软链接
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 免费证书:
# 安装 Certbot
sudo apt install certbot python3-certbot-nginx
# 获取证书
sudo certbot --nginx -d example.com -d www.example.com
# 自动续期
sudo certbot renew --dry-run
配置示例:
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 配置步骤:
-
添加站点
- 输入域名
- 选择免费计划
- 扫描 DNS 记录
-
切换域名服务器
- Cloudflare 提供两个 NS 记录
- 在域名注册商处修改
- 等待生效(2-24 小时)
-
配置缓存规则
- 缓存静态资源(CSS、JS、图片)
- 不缓存 HTML 和 API
- 设置缓存时间
-
开启 HTTPS
- Full 模式(推荐)
- 自动 SSL 证书
- 强制 HTTPS
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 响应:根据业务设置缓存时间
- 用户特定内容:不缓存
缓存清除:
# 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:
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
构建和运行:
# 构建镜像
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:
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 示例:
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 日志管理
应用日志:
# PM2 日志
pm2 logs myapp
# Nginx 日志
tail -f /var/log/nginx/access.log
tail -f /var/log/nginx/error.log
日志分析:
# 统计访问量
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 性能监控
系统监控:
# CPU 使用率
top
# 内存使用
free -h
# 磁盘使用
df -h
# 网络流量
iftop
应用监控工具:
- PM2:进程管理和监控
- New Relic:应用性能监控
- Datadog:基础设施监控
- Prometheus + Grafana:开源监控方案
5.3 自动备份
数据库备份脚本:
#!/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"
定时任务:
# 添加到 crontab
crontab -e
# 每天凌晨 2 点执行备份
0 2 * * * /path/to/backup.sh
6. 常见问题
6.1 网站无法访问
排查步骤:
-
检查域名
nslookup example.com ping example.com -
检查服务器
ping 1.2.3.4 -
检查 Web 服务
systemctl status nginx -
检查防火墙
sudo ufw status
6.2 HTTPS 不生效
常见原因:
- 证书过期:续期证书
- 配置错误:检查 Nginx 配置
- 端口未开放:开放 443 端口
- DNS 未生效:等待 DNS 传播
6.3 CDN 缓存问题
解决方法:
# 清除 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
- 设置监控
- 配置备份
- 性能优化
掌握部署与上线,你的应用就能真正服务于用户。现在就开始部署你的第一个项目吧!