# 情绪博物馆管理后台部署说明

## 📋 概述

本文档说明如何部署情绪博物馆管理后台到服务器 `101.200.208.45`。

管理后台将部署到 `/data/www/emotion-museum-admin/` 目录，通过 `http://101.200.208.45/emotion-museum-admin/` 访问。

## 🚀 快速部署

### 1. 执行部署脚本

```bash
# 进入管理后台目录
cd web-admin

# 执行部署脚本
bash deploy.sh
```

### 2. 访问管理后台

部署完成后，可以通过以下地址访问：

- **管理后台**: http://101.200.208.45/emotion-museum-admin/
- **登录页面**: http://101.200.208.45/emotion-museum-admin/login

## 📊 部署流程详解

### 自动化部署流程

1. **环境检查**: 检查 Node.js 和 npm 是否安装
2. **项目构建**: 执行 `npm run build` 构建项目
3. **文件验证**: 验证 `dist` 目录是否生成
4. **文件上传**: 使用 SCP 上传文件到服务器
5. **权限设置**: 设置文件权限为 755
6. **部署验证**: 确认文件上传成功

### 构建配置

- **构建命令**: `npm run build`
- **输出目录**: `dist/`
- **基础路径**: `/emotion-museum-admin/`
- **路由模式**: HTML5 History 模式

## 🔧 配置说明

### Nginx 配置

管理后台的 Nginx 配置已添加到 `conf/emotion-museum.conf` 文件中：

```nginx
# 管理后台应用路径
location /emotion-museum-admin/ {
    alias /data/www/emotion-museum-admin/;
    autoindex off;
    
    # 处理 Vue Router 的 history 模式
    try_files $uri $uri/ /emotion-museum-admin/index.html;
    
    # HTML 文件不缓存
    location ~ \.html?$ {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
    }
    
    # 静态资源缓存 1 年
    location ~ \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        add_header Cache-Control "public, max-age=31536000, immutable";
        expires 1y;
    }
}

# 处理不带末尾斜杠的请求
location = /emotion-museum-admin {
    rewrite ^(.*)$ $1/ permanent;
}
```

### 路由配置

管理后台使用 Vue Router 的 History 模式，配置了基础路径：

```typescript
const router = createRouter({
  history: createWebHistory('/emotion-museum-admin/'),
  routes
})
```

### Vite 配置

构建配置中设置了正确的基础路径：

```typescript
export default defineConfig({
  // ...其他配置
  base: '/emotion-museum-admin/',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
    chunkSizeWarningLimit: 1500
  }
})
```

## ✅ 验证部署

### 1. 检查文件是否上传成功

```bash
# SSH 连接到服务器
ssh root@101.200.208.45

# 检查文件是否存在
ls -lh /data/www/emotion-museum-admin/
```

### 2. 检查 Nginx 配置

```bash
# 测试 Nginx 配置
nginx -t

# 重新加载 Nginx
nginx -s reload
```

### 3. 访问测试

在浏览器中访问以下地址：

- http://101.200.208.45/emotion-museum-admin/
- http://101.200.208.45/emotion-museum-admin/login

## 🔄 更新部署

### 代码更新后重新部署

```bash
# 1. 进入管理后台目录
cd web-admin

# 2. 拉取最新代码（如果使用 Git）
git pull

# 3. 安装依赖（如果有新依赖）
npm install

# 4. 执行部署
bash deploy.sh
```

### 仅更新前端资源

如果只是修改了前端代码，无需重启后端服务：

```bash
# 执行部署脚本即可
bash deploy.sh
```

## 🛠️ 故障排查

### 问题 1: 构建失败

**现象**: 执行 `npm run build` 失败

**解决方案**:
```bash
# 1. 清理依赖
rm -rf node_modules package-lock.json

# 2. 重新安装依赖
npm install

# 3. 重新构建
npm run build
```

### 问题 2: 上传失败

**现象**: SCP 上传文件失败

**解决方案**:
```bash
# 1. 检查 SSH 连接
ssh root@101.200.208.45 "echo 'SSH 连接成功'"

# 2. 检查目标目录权限
ssh root@101.200.208.45 "ls -ld /data/www/"

# 3. 手动创建目录
ssh root@101.200.208.45 "mkdir -p /data/www/emotion-museum-admin"
```

### 问题 3: 访问 404

**现象**: 访问管理后台返回 404

**解决方案**:
```bash
# 1. 检查文件是否存在
ssh root@101.200.208.45 "ls -lh /data/www/emotion-museum-admin/"

# 2. 检查 Nginx 配置
ssh root@101.200.208.45 "nginx -t"

# 3. 重新加载 Nginx
ssh root@101.200.208.45 "nginx -s reload"
```

### 问题 4: 路由不工作

**现象**: 直接访问子路由返回 404

**解决方案**:
1. 确认 Nginx 配置中的 `try_files` 指令正确
2. 确认路由配置中的 `base` 路径正确
3. 清除浏览器缓存

## 📱 功能说明

管理后台包含以下功能模块：

### 1. 仪表盘
- 系统概览
- 数据统计
- 快速操作

### 2. 管理员管理
- 管理员列表
- 添加/编辑管理员
- 权限管理

### 3. 用户管理
- 用户列表
- 用户详情
- 用户统计

### 4. AI配置管理
- AI配置列表
- 配置创建/编辑
- 接口测试
- 流式响应测试

## 🔐 安全说明

### 访问控制

- 管理后台需要登录才能访问
- 使用 JWT Token 进行身份验证
- 自动跳转到登录页面

### 文件权限

- 部署文件权限设置为 755
- 静态资源可公开访问
- 敏感配置文件受保护

## 📞 支持

如有问题，请检查：

1. **部署脚本**: `web-admin/deploy.sh`
2. **Nginx 配置**: `conf/emotion-museum.conf`
3. **路由配置**: `web-admin/src/router/index.ts`
4. **构建配置**: `web-admin/vite.config.ts`

---

**最后更新**: 2025-10-30
**版本**: 1.0
**状态**: ✅ 已完成