bug修复

2025-10-26 23:26:30 +08:00
parent 85e910fac9
commit df818578e5
20 changed files with 2008 additions and 98 deletions
@@ -0,0 +1,191 @@
+# Emotion Museum 前端部署完成说明
+
+## ✅ 部署状态
+
+前端应用已成功部署到服务器 `101.200.208.45`，可通过以下地址访问：
+
+- **本地访问**: `http://127.0.0.1/emotion-museum/`
+- **服务器访问**: `http://101.200.208.45/emotion-museum/`
+- **外网访问**: 需要配置防火墙规则
+
+## 📁 部署目录结构
+
+```
+/data/www/emotion-museum/          # 前端应用根目录
+├── index.html                      # 主页面
+└── assets/                         # 静态资源目录
+    ├── *.js                        # JavaScript 文件
+    ├── *.css                       # CSS 文件
+    └── ...                         # 其他资源
+```
+
+## 🔧 Nginx 配置
+
+**配置文件位置**: `/www/server/panel/vhost/nginx/emotion-museum.conf`
+
+### 主要配置内容
+
+1. **前端应用路由** (`/emotion-museum`)
+   - 使用 `alias` 指向 `/data/www/emotion-museum`
+   - 支持 Vue Router history 模式
+   - 所有非文件请求重定向到 `index.html`
+
+2. **缓存策略**
+   - HTML 文件: 不缓存（Cache-Control: no-cache）
+   - 静态资源（JS/CSS/图片等）: 缓存 1 年
+
+3. **API 代理** (`/api`)
+   - 代理到后端服务 `http://127.0.0.1:19089`
+   - 设置正确的代理头信息
+
+4. **WebSocket 代理** (`/ws`)
+   - 支持 WebSocket 升级
+   - 使用 `$connection_upgrade` 变量处理连接
+   - 超时时间设置为 7 天
+
+## 📦 部署脚本
+
+**脚本位置**: `web/deploy.sh`
+
+### 使用方法
+
+```bash
+# 1. 构建前端
+cd web
+npm run build
+
+# 2. 部署到服务器
+bash deploy.sh
+```
+
+### 脚本功能
+
+- 检查 `dist` 目录是否存在
+- 上传 `index.html` 到服务器
+- 上传 `assets` 目录到服务器
+- 上传测试文件（如果存在）
+
+## 🔄 更新流程
+
+每次更新前端代码后，执行以下步骤：
+
+```bash
+# 1. 在本地构建
+cd web
+npm run build
+
+# 2. 部署到服务器
+bash deploy.sh
+
+# 3. 验证部署
+curl http://127.0.0.1/emotion-museum/
+```
+
+## 🌐 访问测试
+
+### 本地测试（在服务器上）
+
+```bash
+# 测试前端
+curl http://127.0.0.1/emotion-museum/
+
+# 测试 API 代理
+curl http://127.0.0.1/api/health
+
+# 测试 WebSocket
+curl http://127.0.0.1/ws
+```
+
+### 外网访问
+
+如果需要从外网访问，需要：
+
+1. 配置服务器防火墙规则，允许 80 端口访问
+2. 配置域名解析（可选）
+3. 配置 HTTPS（推荐）
+
+## 📝 配置文件说明
+
+### emotion-museum.conf
+
+```nginx
+server {
+    listen 80;
+    server_name 101.200.208.45 localhost 127.0.0.1;
+
+    # 前端应用
+    location /emotion-museum {
+        alias /data/www/emotion-museum;
+        try_files $uri $uri/ /index.html;
+        # ... 缓存配置
+    }
+
+    # API 代理
+    location /api {
+        proxy_pass http://127.0.0.1:19089;
+        # ... 代理配置
+    }
+
+    # WebSocket 代理
+    location /ws {
+        proxy_pass http://127.0.0.1:19089;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection $connection_upgrade;
+        # ... WebSocket 配置
+    }
+}
+```
+
+## ⚠️ 注意事项
+
+1. **服务器名称警告**: 配置中可能出现 "conflicting server name" 警告，这是正常的，不影响功能
+
+2. **缓存问题**: 如果更新后看不到最新内容，清除浏览器缓存或使用 Ctrl+Shift+Delete
+
+3. **WebSocket 连接**: 确保后端服务在 `127.0.0.1:19089` 正常运行
+
+4. **静态资源**: 所有静态资源都会被缓存 1 年，更新时需要更改文件名或清除缓存
+
+## 🚀 后续优化
+
+1. **HTTPS 配置**: 添加 SSL 证书支持
+2. **域名配置**: 配置自定义域名
+3. **性能优化**: 启用 Gzip 压缩、HTTP/2 等
+4. **监控告警**: 配置 Nginx 日志监控
+
+## 📞 故障排查
+
+### 问题：访问返回 404
+
+**解决方案**:
+1. 检查文件是否正确上传: `ls -la /data/www/emotion-museum/`
+2. 检查 Nginx 配置: `nginx -t`
+3. 重新加载 Nginx: `nginx -s reload`
+
+### 问题：API 请求失败
+
+**解决方案**:
+1. 检查后端服务是否运行: `curl http://127.0.0.1:19089/api/health`
+2. 检查 Nginx 代理配置
+3. 查看 Nginx 错误日志: `tail -f /www/server/nginx/logs/error.log`
+
+### 问题：WebSocket 连接失败
+
+**解决方案**:
+1. 检查后端 WebSocket 服务是否运行
+2. 检查浏览器控制台错误信息
+3. 确保 Nginx 配置中正确设置了 `Upgrade` 和 `Connection` 头
+
+## 📋 检查清单
+
+- [x] 前端代码构建成功
+- [x] 文件上传到服务器
+- [x] Nginx 配置正确
+- [x] 本地访问测试通过
+- [x] API 代理配置完成
+- [x] WebSocket 代理配置完成
+- [ ] 外网访问测试（需要防火墙配置）
+- [ ] HTTPS 配置（可选）
+- [ ] 域名配置（可选）
+