happy-life-star/web/部署完成说明.md

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

使用方法

# 1. 构建前端
cd web
npm run build

# 2. 部署到服务器
bash deploy.sh

脚本功能

• 检查 dist 目录是否存在
• 上传 index.html 到服务器
• 上传 assets 目录到服务器
• 上传测试文件（如果存在）

🔄 更新流程

每次更新前端代码后，执行以下步骤：

# 1. 在本地构建
cd web
npm run build

# 2. 部署到服务器
bash deploy.sh

# 3. 验证部署
curl http://127.0.0.1/emotion-museum/

🌐 访问测试

本地测试（在服务器上）

# 测试前端
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

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 头

📋 检查清单

• 前端代码构建成功
• 文件上传到服务器
• Nginx 配置正确
• 本地访问测试通过
• API 代理配置完成
• WebSocket 代理配置完成
• 外网访问测试（需要防火墙配置）
• HTTPS 配置（可选）
• 域名配置（可选）