跳到主要内容

Nginx深度实践

Nginx 是前端工程师与服务器之间最近的接触面。每个前端项目部署到生产，几乎绕不开它：反向代理、静态资源服务、HTTPS、SPA 路由、限流、压缩。

这一章覆盖什么​

  • Nginx 进程模型，为什么它能扛 10 万并发
  • 反向代理、负载均衡、健康检查
  • SPA history 路由、HTML5 fallback
  • HTTPS、HTTP/2、HTTP/3 配置基线
  • 限流、防盗链、IP 白名单
  • 性能调优（worker、buffer、gzip、cache）
  • 真实生产故障案例

文档清单​

文档解决的问题
Nginx 架构与进程模型master/worker、epoll、为什么不像 Node 一样单线程
反向代理与负载均衡proxy_pass、upstream、轮询/权重/ip_hash、健康检查
静态资源服务与缓存策略sendfile、gzip、brotli、expires、ETag
SPA 路由与 History fallbacktry_files、404 兜底、子目录部署
HTTPS 配置与 HTTP/2 优化TLS 配置、HSTS、HTTP/2、HTTP/3
限流-防盗链-访问控制limit_req、Referer、IP 白名单、auth
日志分析与性能调优log_format、worker、buffer、tune-up
生产故障案例集502/504、连接耗尽、配置 reload 失败、内存涨

学习顺序​

按编号读。架构 → 反代 → 静态 → SPA → HTTPS → 限流 → 调优 → 故障，是从机制到实战的递进。

速查表​

# 静态资源最小配置
server {
    listen 80;
    server_name example.com;
    root /var/www/dist;
    index index.html;

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

    location ~* \.(js|css|png|jpg|svg|woff2?)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

# 反向代理最小配置
location /api/ {
    proxy_pass http://127.0.0.1:3000/;
    proxy_http_version 1.1;
    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;
}