杂技 @Codex 2026·07·03 ·

nginx前端web服务器反向代理负载均衡

杂技 Codex 2026·07·03

Nginx 及 Web 服务器技术指南

[!info] Nginx（发音为”engine-x”）是一款高性能的 HTTP 和反向代理 Web 服务器，以其高并发、低内存消耗、模块化架构而闻名。对于前端开发者来说，Nginx 是部署静态资源、配置反向代理、实现负载均衡、处理 HTTPS 的首选工具。

一、Web 服务器技术概览

1.1 主流 Web 服务器对比

graph TB
    subgraph "Web 服务器生态"
        A[Web服务器] --> B[Nginx<br/>高性能反向代理]
        A --> C[Apache<br/>老牌稳定]
        A --> D[Caddy<br/>现代化自动HTTPS]
        A --> E[Node.js<br/>后端运行时]
        A --> F[Traefik<br/>云原生边缘路由]
        A --> G[HAProxy<br/>专业负载均衡]
    end
    
    B --> B1[静态资源服务]
    B --> B2[反向代理]
    B --> B3[负载均衡]
    B --> B4[缓存/限流]
    
    C --> C1[.htaccess支持]
    C --> C2[模块丰富]
    C --> C3[Prefork/Worker]
    
    D --> D1[自动HTTPS]
    D --> D2[配置简洁]
    D --> D3[HTTP/3默认]
    
    E --> E1[SSR应用]
    E --> E2[API服务]
    E --> E3[开发服务器]

1.2 技术选型对比表

服务器	并发能力	内存占用	配置难度	适用场景	特点
Nginx	极高（万级并发）	极低（MB级）	中等	静态资源、反向代理、负载均衡	事件驱动、高稳定、生态成熟
Apache	中等（千级并发）	较高	低（.htaccess灵活）	共享主机、动态内容	进程/线程模型、模块多
Caddy	高	低	极低	个人项目、自动HTTPS	Go编写、自动证书、配置简单
Traefik	高	中等	中等	微服务、K8s、Docker	自动服务发现、动态配置
HAProxy	极高	低	较高	TCP/HTTP负载均衡	专业级负载均衡、健康检查
Node.js (Express/Koa)	中（需配合）	中	低	SSR、BFF、API服务	JavaScript全栈、开发友好

1.3 前端部署典型架构

graph LR
    Client[用户浏览器] --> CDN[CDN<br/>静态资源加速]
    Client --> Nginx[Nginx<br/>反向代理/入口]
    CDN --> Nginx
    Nginx --> FE[静态资源<br/>HTML/CSS/JS]
    Nginx --> Api1[API服务1<br/>Node/Go/Java]
    Nginx --> Api2[API服务2<br/>Node/Go/Java]
    Nginx --> Cache[Redis缓存]
    Api1 --> DB[(数据库)]
    Api2 --> DB
    
    style Nginx fill:#88ccff,stroke:#333,stroke-width:2px
    style CDN fill:#ffcc88
    style FE fill:#88ff88

二、Nginx 核心概念

2.1 Nginx 架构

graph TB
    subgraph "Nginx 进程模型"
        Master[Master进程<br/>管理配置/平滑升级]
        Master --> Worker1[Worker进程1<br/>处理连接]
        Master --> Worker2[Worker进程2<br/>处理连接]
        Master --> Worker3[Worker进程3<br/>处理连接]
        Master --> Worker4[Worker进程4<br/>处理连接]
    end
    
    Worker1 --> Conn1[连接1<br/>事件驱动]
    Worker1 --> Conn2[连接2<br/>异步非阻塞]
    Worker1 --> Conn3[连接3<br/>epoll/kqueue]
    
    Cache[Nginx缓存<br/>proxy_cache]
    Log[访问日志/错误日志]
    
    style Master fill:#ff8888
    style Worker1 fill:#88ff88
    style Worker2 fill:#88ff88
    style Worker3 fill:#88ff88
    style Worker4 fill:#88ff88

2.2 核心概念说明

概念	说明
Master 进程	负责读取配置、管理 Worker 进程、平滑重启、日志重新打开
Worker 进程	实际处理网络请求，采用事件驱动模型，通常配置为 CPU 核心数
指令（Directive）	Nginx 配置的基本单位，分为简单指令和块指令
上下文（Context）	块指令形成的配置作用域，如 `http`、`server`、`location`
模块（Module）	Nginx 的功能扩展单元，分为核心模块、标准模块、第三方模块

2.3 配置文件结构

Nginx 配置文件是层级化的结构：

# 全局块 - 全局配置
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

# events 块 - 网络连接配置
events {
    worker_connections 10240;
    use epoll;
    multi_accept on;
}

# http 块 - HTTP 相关配置
http {
    # http 全局块
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;
    
    # 上游服务器配置（负载均衡）
    upstream backend {
        server 127.0.0.1:3000 weight=5;
        server 127.0.0.1:3001 weight=3;
    }
    
    # server 块 - 虚拟主机配置
    server {
        listen 80;
        server_name example.com;
        
        # location 块 - 请求路由配置
        location / {
            root /usr/share/nginx/html;
            index index.html;
        }
        
        location /api/ {
            proxy_pass http://backend;
        }
    }
}

三、前端开发常用配置

3.1 静态资源服务（SPA 应用）

这是前端部署最常用的配置，支持 Vue/React Router 的 history 模式：

server {
    listen 80;
    server_name your-domain.com;
    root /usr/share/nginx/html;
    index index.html;

    # 开启 gzip 压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_comp_level 6;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/xml+rss
        application/json
        image/svg+xml;

    # 静态资源缓存策略
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|webp|avif)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }

    # HTML 文件不缓存或短缓存
    location ~* \.html$ {
        expires -1;
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }

    # 关键：支持 history 路由模式，所有路由返回 index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 安全相关 headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
}

3.2 HTTPS 配置（HTTP/2 + SSL）

server {
    listen 80;
    server_name your-domain.com;
    # HTTP 重定向到 HTTPS
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name your-domain.com;
    
    # SSL 证书配置
    ssl_certificate /etc/nginx/ssl/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/privkey.pem;
    
    # SSL 安全配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 1d;
    ssl_session_tickets off;
    
    # HSTS (强制 HTTPS)
    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
    
    # OCSP Stapling
    ssl_stapling on;
    ssl_stapling_verify on;
    
    root /usr/share/nginx/html;
    index index.html;
    
    # ... 其余配置同上
}

3.3 反向代理配置

前端开发中常用反向代理解决跨域问题或转发 API 请求：

server {
    listen 80;
    server_name localhost;
    
    # 前端静态资源
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
    
    # API 请求反向代理到后端服务
    location /api/ {
        # 注意：proxy_pass 末尾加 / 会去掉 /api/ 前缀
        proxy_pass http://127.0.0.1:3000/;
        
        # 传递客户端真实信息
        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;
        
        # WebSocket 支持
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        
        # 超时配置
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }
    
    # 多个后端服务示例
    location /auth/ {
        proxy_pass http://auth-service:4000/;
    }
    
    location /payment/ {
        proxy_pass http://payment-service:5000/;
    }
}

3.4 负载均衡配置

当后端有多个服务实例时，配置负载均衡：

http {
    # 轮询（默认）
    upstream backend_servers {
        server 192.168.1.10:3000;
        server 192.168.1.11:3000;
        server 192.168.1.12:3000;
    }
    
    # 加权轮询
    upstream backend_weighted {
        server 192.168.1.10:3000 weight=5;  # 权重高，处理更多请求
        server 192.168.1.11:3000 weight=3;
        server 192.168.1.12:3000 weight=2;
    }
    
    # IP 哈希（同一用户始终访问同一服务器）
    upstream backend_ip_hash {
        ip_hash;
        server 192.168.1.10:3000;
        server 192.168.1.11:3000;
    }
    
    # least_conn - 最少连接数
    upstream backend_least_conn {
        least_conn;
        server 192.168.1.10:3000;
        server 192.168.1.11:3000;
    }
    
    server {
        listen 80;
        
        location /api/ {
            proxy_pass http://backend_servers;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }
}

四、Nginx 进阶功能

4.1 缓存配置

http {
    # 缓存路径配置
    proxy_cache_path /var/cache/nginx
                     levels=1:2
                     keys_zone=my_cache:10m
                     max_size=10g
                     inactive=60m
                     use_temp_path=off;
    
    server {
        location /api/ {
            proxy_pass http://backend;
            
            # 启用缓存
            proxy_cache my_cache;
            proxy_cache_key "$scheme$request_method$host$request_uri";
            proxy_cache_valid 200 302 10m;  # 200/302 响应缓存10分钟
            proxy_cache_valid 404 1m;        # 404 缓存1分钟
            proxy_cache_valid any 5m;        # 其他缓存5分钟
            
            # 后台更新缓存（不阻塞用户请求）
            proxy_cache_background_update on;
            proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
            
            add_header X-Cache-Status $upstream_cache_status;  # 调试：HIT/MISS/EXPIRED
        }
    }
}

4.2 限流配置

http {
    # 限制请求频率（基于IP）
    limit_req_zone $binary_remote_addr zone=req_limit:10m rate=10r/s;  # 每秒10个请求
    
    # 限制并发连接数
    limit_conn_zone $binary_remote_addr zone=conn_limit:10m;
    
    server {
        location /api/ {
            limit_req zone=req_limit burst=20 nodelay;  # 突发20个请求，不延迟
            limit_conn conn_limit 5;  # 单IP最多5个并发连接
            
            # 限流返回状态码
            limit_req_status 429;
            limit_conn_status 429;
            
            proxy_pass http://backend;
        }
    }
}

4.3 跨域配置

location /api/ {
    # 跨域配置
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
    add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization";
    add_header Access-Control-Expose-Headers "Content-Length,Content-Range";
    
    # OPTIONS 预检请求直接返回
    if ($request_method = OPTIONS) {
        return 204;
    }
    
    proxy_pass http://backend;
}

4.4 配置 WebSocket 代理

location /ws/ {
    proxy_pass http://websocket-server:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    
    # WebSocket 长连接超时设置
    proxy_read_timeout 86400s;  # 24小时
    proxy_send_timeout 86400s;
}

五、类似技术：Caddy

5.1 Caddy 简介

Caddy 是一款现代化的 Web 服务器，使用 Go 编写，最大特点是默认自动 HTTPS。

5.2 Caddyfile 配置示例

Caddy 使用更简洁的 Caddyfile 语法：

# 静态站点 + 自动 HTTPS
your-domain.com {
    root * /usr/share/caddy/html
    encode gzip zstd
    file_server
    
    # SPA 路由支持
    try_files {path} /index.html
    
    # 静态资源缓存
    @static {
        file
        path *.js *.css *.png *.jpg *.jpeg *.gif *.ico *.svg *.woff *.woff2
    }
    header @static Cache-Control "public, max-age=31536000, immutable"
}

# 反向代理
api.your-domain.com {
    reverse_proxy localhost:3000 {
        header_up X-Real-IP {remote_host}
        header_up X-Forwarded-For {remote_host}
    }
}

# 本地开发配置
localhost:8080 {
    root * ./dist
    file_server
    try_files {path} /index.html
}

5.3 Nginx vs Caddy 对比

特性	Nginx	Caddy
自动 HTTPS	需要手动配置（Certbot）	默认自动申请和续期证书
配置语法	相对复杂	简洁易读
性能	极高	高（略低于 Nginx）
内存占用	极低	低（略高于 Nginx）
HTTP/3	需要额外配置	默认支持
生态系统	非常成熟	发展中
学习曲线	较陡	平缓
适用场景	生产环境、高并发	个人项目、快速部署

六、Docker 中使用 Nginx

6.1 前端项目典型 Dockerfile（Nginx 部署）

# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 生产阶段（Nginx）
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

6.2 docker-compose 配置示例

version: '3.8'

services:
  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
      - ./dist:/usr/share/nginx/html
      - ./ssl:/etc/nginx/ssl
      - nginx_logs:/var/log/nginx
    restart: unless-stopped
    depends_on:
      - backend

  backend:
    build: ./backend
    expose:
      - "3000"
    restart: unless-stopped

volumes:
  nginx_logs:

七、Nginx 常用命令

7.1 基础命令

# 启动 Nginx
nginx
nginx -c /path/to/nginx.conf  # 指定配置文件启动

# 停止 Nginx
nginx -s stop    # 快速停止
nginx -s quit    # 优雅停止（处理完当前请求再退出）

# 重新加载配置（平滑重启，不中断服务）
nginx -s reload

# 重新打开日志文件
nginx -s reopen

# 测试配置文件语法
nginx -t
nginx -t -c /path/to/nginx.conf

# 查看 Nginx 版本和编译参数
nginx -v
nginx -V

7.2 Docker 环境下的命令

# 启动容器
docker run -d -p 80:80 -v $(pwd)/nginx.conf:/etc/nginx/conf.d/default.conf --name my-nginx nginx:alpine

# 重载配置（容器内）
docker exec my-nginx nginx -s reload

# 测试配置（容器内）
docker exec my-nginx nginx -t

# 查看日志
docker logs my-nginx
docker logs -f my-nginx  # 实时跟踪

八、常见问题排查

8.1 排查流程

flowchart TD
    A[出现问题] --> B{检查Nginx状态}
    B -->|未运行| C[启动Nginx<br/>检查错误日志]
    B -->|运行中| D{检查配置语法}
    D -->|语法错误| E[修正配置<br/>nginx -t测试]
    D -->|语法正确| F{查看错误日志}
    F --> G{检查端口/权限}
    G -->|端口占用| H[更换端口或停止占用进程]
    G -->|权限问题| I[调整文件权限/用户]
    G -->|其他| J[检查后端服务/防火墙/SELinux]
    E --> K[nginx -s reload]
    C --> L[问题解决?]
    H --> L
    I --> L
    J --> L
    K --> L{问题解决?}
    L -->|是| M[完成]
    L -->|否| F

8.2 常见问题与解决方案

[!warning] 403 Forbidden

检查文件/目录权限：Nginx 用户需要有读取权限

检查目录是否有 index 文件

检查 SELinux 状态（getenforce）

检查 autoindex 是否开启（目录列表）

[!warning] 502 Bad Gateway

后端服务未启动或端口错误

检查 proxy_pass 地址是否正确

后端服务响应超时

检查防火墙是否允许通信

[!warning] 404 Not Found（SPA 刷新问题）

未配置 try_files $uri $uri/ /index.html;

root 路径配置错误

构建产物未正确挂载/复制

[!warning] 跨域问题

未正确配置 Access-Control-Allow-Origin 等 headers

OPTIONS 预检请求未处理

注意 add_header 继承问题

[!warning] 静态资源缓存不更新

构建时文件名没有 hash（如 app.abc123.js）

HTML 文件缓存时间过长

使用 Cache-Control: immutable 时需确保文件名带 hash

8.3 日志查看

# 访问日志 - 查看所有请求
tail -f /var/log/nginx/access.log

# 错误日志 - 查看错误详情
tail -f /var/log/nginx/error.log

# 查看特定状态码的请求
awk '$9 == 500 {print}' /var/log/nginx/access.log

# 统计访问最多的 IP
awk '{print $1}' /var/log/nginx/access.log | sort | uniq -c | sort -rn | head -20

# 查看响应时间超过 1 秒的请求
awk '$NF > 1 {print $7, $NF}' /var/log/nginx/access.log

九、最佳实践

9.1 性能优化

Worker 进程数：设置为 worker_processes auto;（等于 CPU 核心数）
启用 sendfile：sendfile on; 减少内核态到用户态拷贝
开启 tcp_nopush/tcp_nodelay：优化数据包发送
Gzip 压缩：压缩文本资源，减少传输体积
静态资源缓存：合理设置 expires 和 Cache-Control
长连接：适当设置 keepalive_timeout
使用 epoll：Linux 下使用高效事件模型

9.2 安全最佳实践

始终使用 HTTPS：HTTP 重定向到 HTTPS，使用 TLSv1.2+
隐藏 Nginx 版本号：server_tokens off;
设置安全 Headers：X-Frame-Options, X-Content-Type-Options, CSP 等
限制请求大小：client_max_body_size 防止大文件攻击
配置限流：防止 DDoS 和暴力破解
禁止访问隐藏文件：如 .git、.env
使用非 root 用户运行：在 Docker 中注意权限

# 禁止访问隐藏文件和敏感文件
location ~ /\. {
    deny all;
    access_log off;
    log_not_found off;
}

location ~ ~$ {
    deny all;
    access_log off;
}

9.3 前端部署检查清单

十、其他相关技术

10.1 前端开发服务器对比

工具	用途	特点
Vite Dev Server	开发环境	极速 HMR、ESM 原生支持
Webpack Dev Server	开发环境	功能全面、生态成熟
http-server	快速静态预览	零配置、命令行启动
serve	快速静态预览	Vercel 出品、简单易用
Nginx	生产环境	高性能、稳定、功能全
Caddy	生产/开发	自动 HTTPS、配置简单

10.2 快速本地预览

# 使用 npx 快速启动静态服务器（无需安装）
npx http-server ./dist -p 8080 -c-1  # -c-1 禁用缓存
npx serve ./dist
npx vite preview  # Vite 项目预览构建产物

Nginx 及 Web 服务器技术指南

Nginx 及 Web 服务器技术指南

一、Web 服务器技术概览

1.1 主流 Web 服务器对比

1.2 技术选型对比表

1.3 前端部署典型架构

二、Nginx 核心概念

2.1 Nginx 架构

2.2 核心概念说明

2.3 配置文件结构

三、前端开发常用配置

3.1 静态资源服务（SPA 应用）

3.2 HTTPS 配置（HTTP/2 + SSL）

3.3 反向代理配置

3.4 负载均衡配置

四、Nginx 进阶功能

4.1 缓存配置

4.2 限流配置

4.3 跨域配置

4.4 配置 WebSocket 代理

五、类似技术：Caddy

5.1 Caddy 简介

5.2 Caddyfile 配置示例

5.3 Nginx vs Caddy 对比

六、Docker 中使用 Nginx

6.1 前端项目典型 Dockerfile（Nginx 部署）

6.2 docker-compose 配置示例

七、Nginx 常用命令

7.1 基础命令

7.2 Docker 环境下的命令

八、常见问题排查

8.1 排查流程

8.2 常见问题与解决方案

8.3 日志查看

九、最佳实践

9.1 性能优化

9.2 安全最佳实践

9.3 前端部署检查清单

十、其他相关技术

10.1 前端开发服务器对比

10.2 快速本地预览

相关链接