TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
yorn
2025-07-25 09:49:36 +08:00
parent 3dab54d551
commit ccd5cdf71e
29 changed files with 2444 additions and 1035 deletions
Download Patch File Download Diff File Expand all files Collapse all files
NGINX-CONFIG-ANALYSIS.md
+429
View File
@@ -0,0 +1,429 @@
# Nginx配置分析与优化建议
## 原始配置分析
### 当前配置文件：`nginx.conf`
```nginx
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. **缺少客户端标识机制**
**问题**：所有端口代理到同一个后端，但没有传递客户端标识信息
**影响**：应用无法区分来自不同端口的请求，无法实现多客户端配置切换
**解决方案**：
```nginx
# 添加客户端标识变量和头部
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中硬编码后端地址
**影响**：无法实现负载均衡、健康检查、连接池等高级功能
**解决方案**：
```nginx
upstream vite_dev_server {
server 172.16.0.34:5173;
keepalive 32; # 连接池
}
```
#### 3. **缺少开发环境特殊配置**
**问题**：没有配置WebSocket支持，影响Vite热重载功能
**影响**：开发时热重载可能不工作
**解决方案**：
```nginx
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
```
### 🟡 重要问题
#### 4. **缺少日志配置**
**问题**：没有配置访问日志和错误日志
**影响**：无法监控和调试请求
**解决方案**：
```nginx
access_log /var/log/nginx/client-a-access.log;
error_log /var/log/nginx/client-a-error.log warn;
```
#### 5. **缺少超时配置**
**问题**：使用默认超时设置，可能导致请求超时
**影响**：长时间请求可能被意外中断
**解决方案**：
```nginx
proxy_connect_timeout 30s;
proxy_send_timeout 30s;
proxy_read_timeout 30s;
```
#### 6. **缺少缓冲控制**
**问题**：默认启用代理缓冲，影响实时性
**影响**：开发环境下可能影响实时更新
**解决方案**：
```nginx
proxy_buffering off;
proxy_cache off;
proxy_request_buffering off;
```
### 🟢 改进建议
#### 7. **缺少健康检查端点**
**建议**：添加健康检查端点便于监控
**好处**：可以快速检测服务状态
**实现**：
```nginx
location /health {
access_log off;
return 200 "Client A (Port 5174) - OK\n";
add_header Content-Type text/plain;
}
```
#### 8. **缺少CORS配置**
**建议**：添加CORS头部支持跨域请求
**好处**：支持前端开发时的跨域请求
**实现**：
```nginx
add_header Access-Control-Allow-Origin * always;
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
```
#### 9. **缺少文件上传大小限制**
**建议**：设置合理的文件上传大小限制
**好处**：防止大文件攻击，提高安全性
**实现**：
```nginx
client_max_body_size 100M;
```
#### 10. **缺少安全头部**
**建议**：添加基本的安全头部
**好处**：提高应用安全性
**实现**：
```nginx
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变量和请求头传递客户端信息
```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;
}
}
```
**应用端接收**：
```typescript
// 在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. 上游服务器配置优化
**连接池配置**：
```nginx
upstream vite_dev_server {
server 172.16.0.34:5173;
keepalive 32; # 保持32个长连接
keepalive_requests 100; # 每个连接最多处理100个请求
keepalive_timeout 60s; # 连接空闲60秒后关闭
}
```
**健康检查**（需要nginx-plus或第三方模块）：
```nginx
upstream vite_dev_server {
server 172.16.0.34:5173 max_fails=3 fail_timeout=30s;
# 3次失败后标记为不可用，30秒后重试
}
```
### 3. 开发环境特殊配置
**WebSocket支持**：
```nginx
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请求特殊处理**：
```nginx
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. 日志配置优化
**自定义日志格式**：
```nginx
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;
```
**日志轮转配置**：
```bash
# /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. 性能优化配置
**缓存配置**：
```nginx
# 静态资源缓存
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;
}
```
**压缩配置**：
```nginx
# 在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. 安全配置
**基础安全头部**：
```nginx
# 开发环境相对宽松的安全配置
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;
```
**请求限制**：
```nginx
# 限制请求频率（可选，开发环境通常不需要）
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;
}
```
## 配置模板对比
### 原始配置（简化版）
```nginx
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;
}
}
```
### 优化后配置（完整版）
```nginx
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;
}
}
```
## 实施优先级
### 🔴 高优先级（必须实施）
1. **客户端标识传递** - 核心功能需求
2. **WebSocket支持** - 开发体验必需
3. **上游服务器配置** - 性能和可维护性
### 🟡 中优先级（建议实施）
4. **日志配置** - 监控和调试
5. **超时配置** - 稳定性
6. **健康检查** - 运维便利
### 🟢 低优先级（可选实施）
7. **CORS配置** - 开发便利
8. **安全头部** - 安全加固
9. **缓存配置** - 性能优化
## 测试验证
### 功能测试
```bash
# 1. 测试客户端标识传递
curl -H "Accept: application/json" http://localhost:5174/api/config
# 2. 测试健康检查
curl http://localhost:5174/health
# 3. 测试WebSocket（需要浏览器）
# 访问 http://localhost:5174 并检查开发者工具中的WebSocket连接
```
### 性能测试
```bash
# 使用ab进行简单压力测试
ab -n 1000 -c 10 http://localhost:5174/
# 使用wrk进行更详细的测试
wrk -t12 -c400 -d30s http://localhost:5174/
```
### 日志验证
```bash
# 检查日志是否正确记录客户端信息
sudo tail -f /var/log/nginx/client-a-access.log | grep client_id
```
## 总结
原始nginx配置虽然能够实现基本的反向代理功能，但缺少多客户端支持的关键特性。通过以上优化，可以实现：
1. **完整的多客户端支持** - 通过客户端标识传递
2. **更好的开发体验** - WebSocket和热重载支持
3. **增强的监控能力** - 详细的日志记录
4. **提升的性能表现** - 连接池和缓存优化
5. **基础的安全保障** - 安全头部和请求限制
这些改进为在Ubuntu环境中测试多客户端功能提供了完整的基础设施支持。