部署 · 未来

Web 部署实践课
系统初始化序列：启动

Web Deployment Masterclass

Web 部署实战

讲述人毕京林

日期 2026年1月9日

互联网是怎么运作的?

🌍

Domain

example.com

📡

DNS Server

1.1.1.1

💻

IP Address

93.184.216.34

🔐

Port

443 (HTTPS)

🚀 主流 Web 服务器对比

从静态文件到动态代理，选择合适的 Web 服务器是部署的第一步

市场份额 → 性能/资源 → 上手体验

点击圆点切换高亮

Nginx

高性能反向代理

0

并发连接

0

内存占用 (MB)

⚡ 事件驱动架构，高并发性能极佳

🔄 反向代理与负载均衡原生支持

📦 配置简洁，资源占用极低

⚠️ 动态模块需重新编译

静态站点反向代理 API 网关

Apache

老牌全能服务器

0

并发连接

0

内存占用 (MB)

🔧 模块丰富，.htaccess 灵活配置

📚 文档完善，社区生态成熟

🐘 与 PHP 集成最佳 (mod_php)

⚠️ 高并发下内存与 CPU 占用较高

PHP 应用传统 CMS 共享主机

Caddy

现代化自动化服务器

0

并发连接

0

内存占用 (MB)

🔐 HTTPS 自动化，零配置 SSL

⚙️ 配置极简，人类可读

🆕 HTTP/3 原生支持

⚠️ 生态相对年轻，企业案例较少

个人博客快速原型微服务

性能对比可视化

综合能力雷达图

资源占用对比

💡 为什么今天以 Nginx 为例？

01
行业标准
全球 TOP 1000 网站中超过 40% 使用 Nginx，包括 Netflix、Dropbox、Airbnb
02
个人友好
极低的资源占用，1GB 内存的 VPS 即可稳定运行，配置清晰易懂
03
学习价值高
掌握 Nginx = 掌握反向代理、负载均衡、SSL 配置等核心概念

🌐 HTTP 请求-响应原理

📤 HTTP 请求

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Chrome/120

📥 HTTP 响应

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234

💻

客户端

发起请求

📨 GET /index.html

📩 200 OK + HTML

🖥️

Nginx 服务器

:80 / :443

📥

1. 接收请求

解析 TCP 连接，读取 HTTP 头

🔍

2. 匹配路由

location / → root /var/www

📂

3. 读取文件

/var/www/html/index.html

📤

4. 构建响应

添加状态码、Content-Type

🚀

5. 发送响应

写入 TCP 缓冲区

💡 HTTP 是无状态的请求-响应协议

🔄 每个请求独立处理，互不影响

⚡ Nginx 高效处理静态文件请求

📁 静态文件托管原理

用户请求 URL

https:// example.com /css/style.css

Nginx 路由

nginx.conf

location / {
    root /var/www/html;
}

路径拼接

实际文件路径

/var/www/html / css/style.css

试试输入不同路径：

https://example.com

📂 root 指令详解

server {
    listen 80;
    server_name example.com;
    
    # 文件根目录
    root /var/www/html;
    
    # 默认首页
    index index.html index.htm;
}

root 定义网站文件的根目录

index 访问目录时默认返回的文件

🔗 路径映射规则

最终路径 =

root + URL路径

/var/www/html + /css/style.css

= /var/www/html/css/style.css

⚠️ 404 错误产生原因

! 文件在磁盘上不存在
! root 路径配置错误
! 文件权限不足（403）

🔀 反向代理 - 多域名多端口转发

选择访问域名：

🌐

客户端请求

GET /users HTTP/1.1 Host: api.example.com

→

⚡ Nginx 路由决策

api.example.com → :3000

blog.example.com → :4000

app.example.com → :5000

→

⚙️

API Server

localhost:3000

📝

Blog Server

localhost:4000

📱

App Server

localhost:5000

📄 nginx.conf

# api.example.com → :3000
server {
    listen 80;
    server_name api.example.com;
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

🎯 Nginx 根据 Host 头匹配 server_name

🔄 不同域名转发到不同后端端口

🔒 后端服务只监听 localhost，无法直接访问

🛤️ 前后端路由分离原理

输入请求路径：

https://example.com

location /api/ → proxy_pass :3000 ⚙️ 后端API

location / → try_files ... /index.html 📄 前端SPA

匹配结果

点击"匹配"查看结果

🔧 完整配置示例

server {
    listen 80;
    server_name example.com;
    
    # 后端 API 路由
    location /api/ {
        proxy_pass http://localhost:3000;
    }
    
    # 前端 SPA 路由
    location / {
        root /var/www/dist;
        try_files $uri $uri/ /index.html;
    }
}

🔍 try_files 工作原理

1. 尝试 $uri (原始路径)

2. 尝试 $uri/ (作为目录)

3. 返回 /index.html (SPA入口)

💡 这就是为什么 SPA 刷新页面不会 404！

⚖️ 负载均衡 - 请求分发策略

选择策略：

并发数： 5

🌐

客户端请求

⚖️ Nginx 负载均衡

Round Robin

依次轮询分发到每台服务器

🖥️

Server 1

192.168.1.10:3000

0

🖥️

Server 2

192.168.1.11:3000

0

🖥️

Server 3

192.168.1.12:3000

0

🖥️

Server 4

192.168.1.13:3000

0

🖥️

Server 5

192.168.1.14:3000

0

🖥️

Server 6

192.168.1.15:3000

0

🔄 Round Robin

按顺序轮询，请求依次分发到每台服务器，适合服务器配置相同的场景

📊 Least Connections

优先分发到连接数最少的服务器，适合请求处理时间不均的场景

🔢 IP Hash

根据客户端IP哈希分配，同一IP始终访问同一服务器，保持会话一致性

upstream backend {
    # least_conn;  # 或 ip_hash;
    server 192.168.1.10:3000;
    server 192.168.1.11:3000;
    ...
}

🔗 三种访问方式原理

1

IP:Port 直连

http://192.168.1.100:8080

开发环境

2

HTTP 域名访问

http://example.com (明文)

生产可用

3

HTTPS 加密访问

https://example.com (加密)

推荐方式

🔢 IP:Port 直连

# 开发服务器监听
python -m http.server 8080
node app.js  # 监听 3000

⚠️ 仅限内网测试，无域名、无加密

🌍 HTTP 域名访问

server {
    listen 80;
    server_name example.com;
}

⚠️ 数据明文传输，易被窃听

🔒 HTTPS 加密访问

server {
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/...;
}

✅ 加密传输，身份验证，推荐使用

🔐 TLS 握手 - 安全通信建立过程

💻 客户端 (浏览器)

随机数-

预主密钥-

→

① Client Hello

支持的加密套件列表 + 随机数

←

② Server Hello

选定套件 + 随机数 + 证书

→

③ Key Exchange

用公钥加密的预主密钥

↔

④ Finished

握手完成，使用会话密钥加密

🖥️ 服务器 (Nginx)

随机数-

会话密钥-

📜 SSL 证书

🔓

等待建立安全连接...

🏆 Let's Encrypt 免费证书

有效期: 90天自动续期: Certbot

sudo certbot --nginx -d example.com

加密套件

TLS_AES_256_GCM_SHA384

256-bit 加密

实战时间

接下来 5 步，在真实服务器上完成部署闭环：从代码、静态资源，到 Nginx、Cloudflare 与 SSL。

LIVE DEPLOY · ON STAGE

10 分钟走完一条生产级流水线

确保 SSH、Python 依赖、Nginx、Cloudflare、Certbot 都能顺畅切换，演示节奏一气呵成。

Git / rsync Python venv systemd Nginx · :80 Cloudflare Certbot

SSH 登录

ssh deploy@prod.lab

项目目录

/srv/apps/intro

静态根目录

/var/www/html/home

演示目标：上线一个 Python Web 服务 + 静态首页，Cloudflare 完成解析，最后以 Certbot 启用 HTTPS。

01 💻

同步代码到服务器

确保最新提交已推送并同步至演示机，保留回滚点。

git pull origin main
rsync -av --delete dist/ deploy@prod.lab:/srv/apps/intro

确认凭证缓存，避免现场输入错误
rsync 增量推送，节约等待时间

02 📦

部署静态与 Python 服务

静态资源进入 /var/www/html/home，后端使用 venv + systemd 常驻。

# 部署静态文件
sudo cp -r static/* /var/www/html/home/

# 创建虚拟环境并安装依赖
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt

# 编写 systemd service 配置
sudo nano /etc/systemd/system/intro.service

intro.service 完整配置：

[Unit]
Description=Intro Web Service
After=network.target

[Service]
Type=simple
User=deploy
WorkingDirectory=/srv/apps/intro
Environment="PATH=/srv/apps/intro/venv/bin"
ExecStart=/srv/apps/intro/venv/bin/python main.py
Restart=always
RestartSec=3

[Install]
WantedBy=multi-user.target

启动服务：sudo systemctl daemon-reload && sudo systemctl start intro.service
查看日志：journalctl -u intro.service -f

03 🌐

配置 Nginx · 80 端口

一份 server 块同时服务静态首页，并将 /api 反代到 Python 进程。

server {
    listen 80;
    server_name demo.gislab.dev;

    root /var/www/html/home;
    index index.html;
    access_log /var/log/nginx/intro_access.log;
    error_log /var/log/nginx/intro_error.log warn;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_connect_timeout 5s;
        proxy_read_timeout 30s;
    }
}

sudo nginx -t && sudo systemctl reload nginx
用 curl -I 验证缓存头与 200 状态

04 ☁️

Cloudflare DNS

现场展示记录创建，解释灰云 / 橙云差异，确保 TTL 足够短。

类型: A
名称: demo
目标: 203.0.113.42
代理: Proxied · TTL: Auto

dig @1.1.1.1 demo.gislab.dev 验证生效
开启「Always Online」前说明缓存策略

05 🔐

Certbot 启用 HTTPS

安装 Nginx 插件，自动写入 server 块并生成定时续期。

sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d demo.gislab.dev

certbot certificates 查看有效期
systemctl list-timers *certbot* 验证续期任务