# 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 配置（可选）
- [ ] 域名配置（可选）