TanWenyan/leaudit-platform-frontend

Fork 0

Files

T

LiangShiyong ccd5cdf71e 修复系统概览数据不准确的查询。修复交叉评查意见列表的数量查询。优化全局消息提示的层级。优化提交意见进行局部更新。

2025-07-25 09:49:36 +08:00

11 KiB

Raw Blame History

Nginx配置分析与优化建议

原始配置分析

当前配置文件：`nginx.conf`

server {
    listen 5174;
    server_name localhost;
    
    location / {
        proxy_pass http://172.16.0.34:5173;
        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;
    }
}
# ... 其他三个相同的server块

问题识别与分析

🔴 严重问题

1. 缺少客户端标识机制

问题：所有端口代理到同一个后端，但没有传递客户端标识信息影响：应用无法区分来自不同端口的请求，无法实现多客户端配置切换 解决方案：

# 添加客户端标识变量和头部
set $client_id "client-a";  # 每个server块设置不同的client_id
proxy_set_header X-Client-ID $client_id;
proxy_set_header X-Original-Port $server_port;

2. 缺少上游服务器配置

问题：直接在proxy_pass中硬编码后端地址影响：无法实现负载均衡、健康检查、连接池等高级功能 解决方案：

upstream vite_dev_server {
    server 172.16.0.34:5173;
    keepalive 32;  # 连接池
}

3. 缺少开发环境特殊配置

问题：没有配置WebSocket支持，影响Vite热重载功能影响：开发时热重载可能不工作 解决方案：

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;

🟡 重要问题

4. 缺少日志配置

问题：没有配置访问日志和错误日志影响：无法监控和调试请求 解决方案：

access_log /var/log/nginx/client-a-access.log;
error_log /var/log/nginx/client-a-error.log warn;

5. 缺少超时配置

问题：使用默认超时设置，可能导致请求超时影响：长时间请求可能被意外中断 解决方案：

proxy_connect_timeout 30s;
proxy_send_timeout 30s;
proxy_read_timeout 30s;

6. 缺少缓冲控制

问题：默认启用代理缓冲，影响实时性影响：开发环境下可能影响实时更新 解决方案：

proxy_buffering off;
proxy_cache off;
proxy_request_buffering off;

🟢 改进建议

7. 缺少健康检查端点

建议：添加健康检查端点便于监控好处：可以快速检测服务状态实现：

location /health {
    access_log off;
    return 200 "Client A (Port 5174) - OK\n";
    add_header Content-Type text/plain;
}

8. 缺少CORS配置

建议：添加CORS头部支持跨域请求好处：支持前端开发时的跨域请求实现：

add_header Access-Control-Allow-Origin * always;
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;

9. 缺少文件上传大小限制

建议：设置合理的文件上传大小限制好处：防止大文件攻击，提高安全性实现：

client_max_body_size 100M;

10. 缺少安全头部

建议：添加基本的安全头部好处：提高应用安全性实现：

add_header X-Frame-Options SAMEORIGIN always;
add_header X-Content-Type-Options nosniff always;
add_header X-XSS-Protection "1; mode=block" always;

详细优化方案

1. 客户端标识传递机制

原理：通过Nginx变量和请求头传递客户端信息

server {
    listen 5174;
    set $client_id "client-a";  # 设置客户端标识
    
    location / {
        proxy_pass http://vite_dev_server;
        # 传递客户端标识
        proxy_set_header X-Client-ID $client_id;
        proxy_set_header X-Original-Port $server_port;
        proxy_set_header X-Forwarded-Port $server_port;
    }
}

应用端接收：

// 在Remix loader或action中
export const loader: LoaderFunction = async ({ request }) => {
  const clientId = request.headers.get('X-Client-ID') || 'main';
  const config = getConfigForClient(clientId);
  return json({ config });
};

2. 上游服务器配置优化

连接池配置：

upstream vite_dev_server {
    server 172.16.0.34:5173;
    keepalive 32;           # 保持32个长连接
    keepalive_requests 100; # 每个连接最多处理100个请求
    keepalive_timeout 60s;  # 连接空闲60秒后关闭
}

健康检查（需要nginx-plus或第三方模块）：

upstream vite_dev_server {
    server 172.16.0.34:5173 max_fails=3 fail_timeout=30s;
    # 3次失败后标记为不可用，30秒后重试
}

3. 开发环境特殊配置

WebSocket支持：

location / {
    proxy_pass http://vite_dev_server;
    
    # WebSocket支持（Vite HMR必需）
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_http_version 1.1;
    
    # 禁用缓冲以支持实时更新
    proxy_buffering off;
    proxy_cache off;
    proxy_request_buffering off;
}

API请求特殊处理：

location /api/ {
    proxy_pass http://vite_dev_server;
    
    # API请求不需要WebSocket支持
    proxy_set_header X-Client-ID $client_id;
    
    # API请求超时配置
    proxy_connect_timeout 10s;
    proxy_send_timeout 60s;
    proxy_read_timeout 60s;
}

4. 日志配置优化

自定义日志格式：

log_format client_access '$remote_addr - $remote_user [$time_local] '
                        '"$request" $status $body_bytes_sent '
                        '"$http_referer" "$http_user_agent" '
                        'client_id="$client_id" original_port="$server_port" '
                        'response_time=$request_time';

access_log /var/log/nginx/client-a-access.log client_access;

日志轮转配置：

# /etc/logrotate.d/nginx-clients
/var/log/nginx/client-*-access.log {
    daily
    missingok
    rotate 52
    compress
    delaycompress
    notifempty
    create 644 www-data www-data
    postrotate
        systemctl reload nginx
    endscript
}

5. 性能优化配置

缓存配置：

# 静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    proxy_pass http://vite_dev_server;
    proxy_cache_valid 200 1h;
    add_header X-Cache-Status $upstream_cache_status;
}

压缩配置：

# 在http块中
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types
    text/plain
    text/css
    application/json
    application/javascript
    text/xml
    application/xml
    application/xml+rss
    text/javascript;

6. 安全配置

基础安全头部：

# 开发环境相对宽松的安全配置
add_header X-Frame-Options SAMEORIGIN always;
add_header X-Content-Type-Options nosniff always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;

请求限制：

# 限制请求频率（可选，开发环境通常不需要）
limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;

location /api/ {
    limit_req zone=api burst=20 nodelay;
    proxy_pass http://vite_dev_server;
}

配置模板对比

原始配置（简化版）

server {
    listen 5174;
    server_name localhost;
    location / {
        proxy_pass http://172.16.0.34:5173;
        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;
    }
}

优化后配置（完整版）

upstream vite_dev_server {
    server 172.16.0.34:5173;
    keepalive 32;
}

log_format client_access '$remote_addr - $remote_user [$time_local] '
                        '"$request" $status $body_bytes_sent '
                        'client_id="$client_id" port="$server_port"';

server {
    listen 5174;
    server_name localhost 127.0.0.1;
    
    set $client_id "client-a";
    
    access_log /var/log/nginx/client-a-access.log client_access;
    error_log /var/log/nginx/client-a-error.log warn;
    
    location / {
        proxy_pass http://vite_dev_server;
        
        # 基础代理头部
        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_set_header X-Client-ID $client_id;
        proxy_set_header X-Original-Port $server_port;
        
        # WebSocket支持
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        
        # 超时配置
        proxy_connect_timeout 30s;
        proxy_send_timeout 30s;
        proxy_read_timeout 30s;
        
        # 缓冲控制
        proxy_buffering off;
        proxy_cache off;
        
        # 文件上传限制
        client_max_body_size 100M;
    }
    
    location /health {
        access_log off;
        return 200 "Client A - OK";
        add_header Content-Type text/plain;
    }
}

实施优先级

🔴 高优先级（必须实施）

客户端标识传递 - 核心功能需求
WebSocket支持 - 开发体验必需
上游服务器配置 - 性能和可维护性

🟡 中优先级（建议实施）

日志配置 - 监控和调试
超时配置 - 稳定性
健康检查 - 运维便利

🟢 低优先级（可选实施）

CORS配置 - 开发便利
安全头部 - 安全加固
缓存配置 - 性能优化

测试验证

功能测试

# 1. 测试客户端标识传递
curl -H "Accept: application/json" http://localhost:5174/api/config

# 2. 测试健康检查
curl http://localhost:5174/health

# 3. 测试WebSocket（需要浏览器）
# 访问 http://localhost:5174 并检查开发者工具中的WebSocket连接

性能测试

# 使用ab进行简单压力测试
ab -n 1000 -c 10 http://localhost:5174/

# 使用wrk进行更详细的测试
wrk -t12 -c400 -d30s http://localhost:5174/

日志验证

# 检查日志是否正确记录客户端信息
sudo tail -f /var/log/nginx/client-a-access.log | grep client_id

总结

原始nginx配置虽然能够实现基本的反向代理功能，但缺少多客户端支持的关键特性。通过以上优化，可以实现：

完整的多客户端支持 - 通过客户端标识传递
更好的开发体验 - WebSocket和热重载支持
增强的监控能力 - 详细的日志记录
提升的性能表现 - 连接池和缓存优化
基础的安全保障 - 安全头部和请求限制

这些改进为在Ubuntu环境中测试多客户端功能提供了完整的基础设施支持。

11 KiB Raw Blame History Unescape Escape