feat: 实现动态详情页面和性能优化

- 添加案例、新闻、产品详情页面的E2E测试 - 优化详情页面的客户端组件和页面逻辑 - 添加高性能Docker配置和Nginx配置 - 更新API服务和常量配置 - 添加性能优化文档和任务进度更新 - 修复ESLint错误和类型问题
2026-03-26 12:53:58 +08:00
parent 498bb3a3c8
commit 14448af731
18 changed files with 2244 additions and 913 deletions
@@ -0,0 +1,246 @@
+# 高并发性能优化方案
+
+## 问题分析
+
+根据性能测试结果，系统在200 VUs并发时出现崩溃，主要问题包括：
+- 单实例无法处理高并发请求
+- 缺乏负载均衡机制
+- 没有缓存策略
+- 资源限制导致内存溢出
+
+## 解决方案
+
+### 1. 多实例部署 + 负载均衡
+
+#### Docker Compose 部署方案
+
+使用 `docker-compose.high-perf.yml` 启动3个应用实例：
+
+```bash
+# 构建并启动高性能配置
+docker-compose -f docker-compose.high-perf.yml up -d --build
+
+# 查看服务状态
+docker-compose -f docker-compose.high-perf.yml ps
+
+# 查看日志
+docker-compose -f docker-compose.high-perf.yml logs -f
+```
+
+#### PM2 部署方案
+
+使用 PM2 管理多个应用实例：
+
+```bash
+# 安装 PM2
+npm install -g pm2
+
+# 启动多实例
+pm2 start ecosystem.config.js
+
+# 查看状态
+pm2 status
+
+# 查看日志
+pm2 logs
+
+# 重启服务
+pm2 restart all
+
+# 停止服务
+pm2 stop all
+```
+
+### 2. Nginx 负载均衡配置
+
+#### 主要特性
+
+1. **负载均衡算法**：`least_conn` - 最少连接数
+2. **健康检查**：自动检测实例健康状态
+3. **故障转移**：实例故障时自动切换
+4. **缓存策略**：静态资源和API响应缓存
+5. **限流保护**：防止DDoS攻击
+6. **连接优化**：提高并发处理能力
+
+#### 配置说明
+
+- **upstream backend**：3个应用实例的负载均衡池
+- **proxy_cache**：响应缓存，减少后端压力
+- **limit_req**：请求限流，保护后端
+- **gzip**：响应压缩，减少带宽占用
+
+### 3. 性能优化配置
+
+#### Next.js 配置优化
+
+已配置的性能优化：
+- ✅ 图片优化（AVIF/WebP格式）
+- ✅ 静态资源缓存
+- ✅ Gzip压缩
+- ✅ 包导入优化
+- ✅ 生产模式移除console
+
+#### 数据库优化
+
+建议添加：
+```typescript
+// 连接池配置
+const dbConfig = {
+  max: 20,              // 最大连接数
+  min: 5,               // 最小连接数
+  idle: 10000,          // 空闲连接超时
+  acquire: 30000,        // 获取连接超时
+}
+```
+
+#### 缓存策略
+
+建议添加 Redis 缓存：
+```bash
+# 添加 Redis 到 docker-compose
+redis:
+  image: redis:alpine
+  container_name: novalon-redis
+  ports:
+    - "6379:6379"
+  volumes:
+    - redis-data:/data
+  networks:
+    - novalon-network
+```
+
+### 4. 监控和告警
+
+#### 健康检查
+
+所有实例都配置了健康检查：
+- 检查端点：`/api/health`
+- 检查间隔：30秒
+- 超时时间：10秒
+- 重试次数：3次
+
+#### 性能监控
+
+建议配置：
+1. **Sentry** - 错误监控
+2. **UptimeRobot** - 可用性监控
+3. **Next.js Analytics** - 性能监控
+4. **Prometheus + Grafana** - 指标监控
+
+## 部署步骤
+
+### 开发环境测试
+
+```bash
+# 1. 构建应用
+npm run build
+
+# 2. 启动多实例（开发环境）
+docker-compose -f docker-compose.high-perf.yml up -d
+
+# 3. 运行性能测试
+npm run test:performance
+
+# 4. 查看结果
+cat performance/load-test-summary.json
+```
+
+### 生产环境部署
+
+```bash
+# 1. 配置环境变量
+cp .env.example .env.production
+# 编辑 .env.production 文件
+
+# 2. 配置SSL证书（如需要）
+mkdir -p ssl
+# 将证书文件放入 ssl 目录
+
+# 3. 启动生产环境
+docker-compose -f docker-compose.high-perf.yml up -d --build
+
+# 4. 配置域名DNS
+# 将域名指向服务器IP
+
+# 5. 配置防火墙
+# 开放端口 80, 443
+```
+
+## 性能指标目标
+
+| 指标 | 当前 | 目标 | 改进措施 |
+|------|------|------|----------|
+| 并发用户数 | 50 VUs | 500+ VUs | 多实例 + 负载均衡 |
+| 响应时间 (P95) | <500ms | <200ms | 缓存 + CDN |
+| 错误率 | <1% | <0.1% | 健康检查 + 故障转移 |
+| 可用性 | 99% | 99.9% | 多实例 + 自动重启 |
+
+## 故障排查
+
+### 实例崩溃
+
+```bash
+# 查看实例日志
+docker-compose -f docker-compose.high-perf.yml logs app1
+
+# 查看资源使用
+docker stats novalon-app-1
+
+# 重启单个实例
+docker-compose -f docker-compose.high-perf.yml restart app1
+```
+
+### 性能下降
+
+```bash
+# 检查Nginx状态
+docker exec novalon-nginx nginx -t
+
+# 查看Nginx日志
+docker exec novalon-nginx cat /var/log/nginx/access.log
+
+# 检查缓存状态
+docker exec novalon-nginx ls -lh /var/cache/nginx
+```
+
+### 内存溢出
+
+```bash
+# 查看内存使用
+docker stats --no-stream
+
+# 增加内存限制
+# 编辑 docker-compose.high-perf.yml
+# 调整 deploy.resources.limits.memory
+
+# 重启服务
+docker-compose -f docker-compose.high-perf.yml up -d
+```
+
+## 成本估算
+
+### 单实例部署
+- 服务器：2核4G
+- 月成本：约 ¥200-300
+- 并发能力：50 VUs
+
+### 多实例部署（推荐）
+- 服务器：4核8G
+- 月成本：约 ¥400-600
+- 并发能力：500+ VUs
+- 可用性：99.9%
+
+## 下一步优化
+
+1. **CDN加速**：使用CloudFlare或阿里云CDN
+2. **数据库优化**：添加Redis缓存层
+3. **自动扩缩容**：根据负载自动调整实例数量
+4. **容器编排**：迁移到Kubernetes
+5. **性能监控**：配置完整的监控告警系统
+
+## 参考资料
+
+- [Next.js Production Best Practices](https://nextjs.org/docs/deployment)
+- [Nginx Load Balancing](https://docs.nginx.com/nginx/admin-guide/load-balancer/)
+- [PM2 Cluster Mode](https://pm2.keymetrics.io/docs/usage/cluster-mode/)
+- [Docker Compose Production](https://docs.docker.com/compose/production/)