全栈进阶指南

皮肤切换

序章 ​

Nginx 实操：从 0 到 1 构建生产级 Web 服务器与反向代理 ​

第一阶段：重新理解 Nginx 的本质 ​

  • Nginx 不是 Apache，它是"事件驱动 + 异步非阻塞"的高性能服务器
    基于 epoll（Linux）或 kqueue（BSD），C10K 问题的终极解决方案
  • 核心角色：静态服务器、反向代理、负载均衡、SSL 终端
  • 配置即代码：nginx.conf 是声明式配置，语法类似 C
  • 模块化设计：http、stream、mail 模块，支持动态加载
  • 为什么全栈工程师必须精通 Nginx？
    它是前端（静态资源）、后端（API 代理）、运维（负载均衡）的交汇点

第二阶段：深入配置结构与 server 块 ​

配置文件结构 ​

nginx
# 主配置：全局指令
worker_processes  auto;
error_log  /var/log/nginx/error.log;
pid        /var/run/nginx.pid;

# 事件模块：控制连接处理
events {
    worker_connections  1024;
    use epoll;  # Linux 高性能事件模型
}

# HTTP 模块：Web 服务核心
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    # Gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript;

    # 上游服务器组（负载均衡）
    upstream backend {
        server 127.0.0.1:3001;
        server 127.0.0.1:3002;
        # 负载均衡策略：round-robin, least_conn, ip_hash
    }

    # 服务器块（虚拟主机）
    server {
        listen 80;
        server_name example.com www.example.com;

        # 根路径：静态文件服务
        location / {
            root /var/www/html;
            index index.html;
        }

        # API 代理
        location /api/ {
            proxy_pass http://backend/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }

        # 前端路由 history 模式
        location /app/ {
            root /var/www/app;
            try_files $uri $uri/ /app/index.html;
        }
    }
}

server 块与虚拟主机 ​

  • listen 80 vs listen 443 ssl：HTTP vs HTTPS
  • server_name：基于域名的虚拟主机
    example.com、*.example.com、正则 ~^www\d+\.example\.com$
  • default_server：捕获未匹配的请求

第三阶段：掌握 location 匹配与代理规则 ​

location 匹配优先级 ​

  1. = ：精确匹配（最高优先级）
    location = / → 仅匹配 /
  2. ^~ ：前缀匹配，且不继续正则
    location ^~ /static/ → 匹配 /static/ 开头，且不检查正则
  3. ~ ：区分大小写的正则匹配
    location ~ \.php$
  4. ~* ：不区分大小写的正则匹配
    location ~* \.(jpg|png|gif)$
  5. 无修饰符：普通前缀匹配（最低优先级）
    location /api/

关键：location /api/ vs location /api
前者只匹配 /api/xxx，后者会匹配 /api 和 /apixxx，极易引发路由冲突！

proxy_pass 代理规则 ​

  • URI 处理：proxy_pass 后的 URL 是否带 / 决定是否替换路径
    • location /api/ { proxy_pass http://backend; } → /api/user → http://backend/api/user
    • location /api/ { proxy_pass http://backend/; } → /api/user → http://backend/user
  • proxy_set_header：传递客户端真实信息
    • Host $host：保留原始 Host
    • X-Real-IP $remote_addr：传递真实 IP
    • X-Forwarded-For $proxy_add_x_forwarded_for：记录代理链
  • 超时与缓冲：
    nginx
    proxy_connect_timeout 30s;
proxy_send_timeout 30s;
proxy_read_timeout 30s;
proxy_buffering on;

第四阶段：穿透 HTTPS 与安全配置 ​

SSL/TLS 配置 ​

nginx
server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/privkey.pem;

    # 安全协议与加密套件
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;

    # HSTS：强制 HTTPS
    add_header Strict-Transport-Security "max-age=31536000" always;
}

HTTP/2 与性能 ​

  • listen 443 ssl http2：启用 HTTP/2
    多路复用、头部压缩、服务器推送
  • 必须 HTTPS：HTTP/2 over TLS

安全加固 ​

  • 禁用 Server 信息：server_tokens off;
  • 防点击劫持：add_header X-Frame-Options DENY;
  • XSS 防护：add_header X-Content-Type-Options nosniff;
  • CORS：add_header Access-Control-Allow-Origin *;（谨慎使用）

第五阶段：生产级负载均衡与缓存 ​

upstream 负载均衡 ​

nginx
upstream backend {
    # 轮询（默认）
    server 192.168.1.10:3000;
    server 192.168.1.11:3000;

    # 最少连接
    # least_conn;

    # IP 哈希（会话保持）
    # ip_hash;

    # 加权轮询
    # server 192.168.1.10:3000 weight=3;
}

缓存配置 ​

  • 静态资源缓存：
    nginx
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}
  • 反向代理缓存：
    nginx
    proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m max_size=10g;

location /api/ {
    proxy_cache my_cache;
    proxy_cache_valid 200 302 10m;
    proxy_pass http://backend;
}

gzip 压缩优化 ​

  • gzip on;：启用压缩
  • gzip_types：指定压缩 MIME 类型
    text/plain, application/json, text/css, application/javascript
  • gzip_static on;：优先使用预压缩的 .gz 文件
    构建时生成 app.js.gz，节省 CPU

第六阶段：前端应用与 try_files ​

SPA 前端路由支持 ​

nginx
location / {
    root /var/www/spa;
    try_files $uri $uri/ /index.html;
}
  • try_files 执行逻辑：
    1. 尝试 $uri（如 /about）
    2. 尝试 $uri/（如 /about/）
    3. 最后回退到 /index.html，由前端路由接管
  • 注意： 必须放在 location /，避免与 API 路由冲突

Docker 集成 ​

Dockerfile
FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY dist/ /usr/share/nginx/html
EXPOSE 80

第七阶段：性能调优与故障排查 ​

性能调优 ​

  • worker_processes auto;：CPU 核心数
  • worker_connections 1024;：每个 worker 的最大连接数
  • multi_accept on;：一次接受多个连接
  • sendfile on;：零拷贝传输文件
  • tcp_nopush on;：优化 TCP 传输

日志分析 ​

  • access_log：访问日志，用于分析流量、来源
  • error_log：错误日志，定位 502、504 等问题
  • log_format：自定义日志格式，添加 $request_time、$upstream_response_time

故障排查 ​

  • nginx -t：测试配置文件语法
  • nginx -s reload：平滑重启
  • 502 Bad Gateway：后端服务未启动或 proxy_pass 地址错误
  • 413 Request Entity Too Large：client_max_body_size 限制

本专栏不教你"怎么用 nginx 部署静态网站"，而是带你理解：
从 location 优先级到 proxy_pass URI 替换，从 gzip_static 到 worker_processes，这一路上穿越了多少层网络、性能与安全的抽象。
我们追问：
"如果你不能解释 location /api/ 为何比 location /api 更安全，你真的懂 Nginx 的路径匹配吗？"

✅ 设计亮点： ​

  1. 极致贴合你的风格：标题如《"location /api/ vs location /api：路径匹配的致命区别"》《"proxy_pass 的 URI 替换规则"》延续你"质疑常识、深挖本质"的实操风。
  2. 穿透全链路：从配置结构 → location → 代理 → HTTPS → 负载均衡 → 性能调优，层层深入。
  3. 生产级实战导向：涵盖 SPA 支持、gzip 优化、try_files、故障排查等真实痛点。
  4. 适合全栈 & DevOps 工程师：既适合想深入 Nginx 原理的人，也适合负责部署的开发者。

专栏已完成，以下是各章节内容：

  • Part01.md: 深入理解 Nginx：高性能 Web 服务器的核心机制
  • Part02.md: 深入理解 Nginx 配置结构与 server 块
  • Part03.md: 深入理解 Nginx location 匹配规则与代理配置
  • Part04.md: 深入理解 Nginx HTTPS 配置与安全加固
  • Part05.md: 深入理解 Nginx 负载均衡与高可用架构
  • Part06.md: 深入理解 Nginx 缓存机制与性能优化
  • Part07.md: 深入理解 Nginx 与前端应用集成

现在你可以选择任意一章深入了解，或者让我继续为你创作其他技术专栏。

Copyright © 2025 梁欢的前后端技术笔记 鲁ICP备2025190626号