# 管理后台部署指南

## 部署前准备

### 1. 环境要求

- Node.js 16+ 
- npm 或 yarn
- Nginx (生产环境)

### 2. 检查后端服务

确保后端服务已启动并可访问：
- 开发环境: http://localhost:8080
- 生产环境: 配置实际的API地址

## 开发环境部署

### Windows系统

#### 方式1: 使用启动脚本

```bash
cd web-admin
start.bat
```

#### 方式2: 手动启动

```bash
cd web-admin
npm install
npm run dev
```

### Linux/Mac系统

```bash
cd web-admin
npm install
npm run dev
```

访问: http://localhost:5174

## 生产环境部署

### 1. 构建项目

```bash
cd web-admin
npm install
npm run build
```

构建完成后，会在 `dist` 目录生成静态文件。

### 2. Nginx配置

#### 基础配置

```nginx
server {
    listen 80;
    server_name admin.emotion-museum.com;
    
    root /var/www/web-admin/dist;
    index index.html;
    
    # 支持 History 路由模式
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # API代理
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # Gzip压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json;
}
```

#### HTTPS配置

```nginx
server {
    listen 443 ssl http2;
    server_name admin.emotion-museum.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    root /var/www/web-admin/dist;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

# HTTP重定向到HTTPS
server {
    listen 80;
    server_name admin.emotion-museum.com;
    return 301 https://$server_name$request_uri;
}
```

### 3. 部署步骤

#### 方式1: 手动部署

```bash
# 1. 构建项目
cd web-admin
npm run build

# 2. 上传dist目录到服务器
scp -r dist/* user@server:/var/www/web-admin/

# 3. 配置Nginx
sudo cp nginx.conf /etc/nginx/sites-available/admin.emotion-museum.com
sudo ln -s /etc/nginx/sites-available/admin.emotion-museum.com /etc/nginx/sites-enabled/

# 4. 测试Nginx配置
sudo nginx -t

# 5. 重启Nginx
sudo systemctl restart nginx
```

#### 方式2: 使用部署脚本

创建 `deploy.sh`:

```bash
#!/bin/bash

echo "开始部署管理后台..."

# 构建项目
echo "1. 构建项目..."
cd web-admin
npm install
npm run build

# 备份旧版本
echo "2. 备份旧版本..."
ssh user@server "cd /var/www && mv web-admin web-admin.backup.$(date +%Y%m%d%H%M%S)"

# 上传新版本
echo "3. 上传新版本..."
scp -r dist user@server:/var/www/web-admin

# 重启Nginx
echo "4. 重启Nginx..."
ssh user@server "sudo systemctl restart nginx"

echo "部署完成！"
```

### 4. 环境变量配置

生产环境需要修改 `.env.production`:

```env
VITE_APP_TITLE=情绪博物馆管理后台
VITE_APP_BASE_API=https://api.emotion-museum.com/api
```

## Docker部署

### 1. 创建Dockerfile

```dockerfile
# 构建阶段
FROM node:18-alpine as build-stage

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine as production-stage

COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
```

### 2. 创建nginx.conf

```nginx
server {
    listen 80;
    server_name localhost;
    
    root /usr/share/nginx/html;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

### 3. 构建和运行

```bash
# 构建镜像
docker build -t emotion-admin:latest .

# 运行容器
docker run -d -p 80:80 --name emotion-admin emotion-admin:latest
```

### 4. Docker Compose

创建 `docker-compose.yml`:

```yaml
version: '3.8'

services:
  admin:
    build: .
    ports:
      - "80:80"
    depends_on:
      - backend
    networks:
      - emotion-network

  backend:
    image: emotion-backend:latest
    ports:
      - "8080:8080"
    networks:
      - emotion-network

networks:
  emotion-network:
    driver: bridge
```

运行:

```bash
docker-compose up -d
```

## 性能优化

### 1. 代码分割

Vite自动进行代码分割，无需额外配置。

### 2. 资源压缩

生产构建时自动压缩：

```typescript
// vite.config.ts
build: {
  minify: 'terser',
  terserOptions: {
    compress: {
      drop_console: true,
      drop_debugger: true
    }
  }
}
```

### 3. CDN加速

将静态资源上传到CDN：

```typescript
// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'element-plus': ['element-plus'],
        'vue': ['vue', 'vue-router', 'pinia']
      }
    }
  }
}
```

## 监控和日志

### 1. Nginx访问日志

```nginx
access_log /var/log/nginx/admin.access.log;
error_log /var/log/nginx/admin.error.log;
```

### 2. 前端错误监控

可以集成Sentry等错误监控服务：

```typescript
// main.ts
import * as Sentry from "@sentry/vue"

Sentry.init({
  app,
  dsn: "YOUR_SENTRY_DSN",
  environment: import.meta.env.MODE
})
```

## 安全建议

1. **使用HTTPS**: 生产环境必须使用HTTPS
2. **修改默认密码**: 部署后立即修改默认管理员密码
3. **限制访问**: 可以配置IP白名单
4. **定期更新**: 及时更新依赖包
5. **备份数据**: 定期备份数据库和配置文件

## 故障排查

### 1. 页面空白

- 检查Nginx配置是否正确
- 检查静态文件是否上传成功
- 查看浏览器控制台错误

### 2. API请求失败

- 检查后端服务是否启动
- 检查Nginx代理配置
- 检查跨域配置

### 3. 路由404

- 确保Nginx配置了 `try_files $uri $uri/ /index.html`
- 检查路由模式是否为history

## 回滚方案

如果部署出现问题，可以快速回滚：

```bash
# 恢复备份
ssh user@server "cd /var/www && rm -rf web-admin && mv web-admin.backup.YYYYMMDDHHMMSS web-admin"

# 重启Nginx
ssh user@server "sudo systemctl restart nginx"
```

## 持续集成/持续部署 (CI/CD)

### GitHub Actions示例

创建 `.github/workflows/deploy.yml`:

```yaml
name: Deploy Admin

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '18'
    
    - name: Install dependencies
      run: |
        cd web-admin
        npm install
    
    - name: Build
      run: |
        cd web-admin
        npm run build
    
    - name: Deploy to server
      uses: easingthemes/ssh-deploy@v2
      with:
        SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
        REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
        REMOTE_USER: ${{ secrets.REMOTE_USER }}
        SOURCE: "web-admin/dist/"
        TARGET: "/var/www/web-admin/"
```

## 总结

按照以上步骤，你可以成功部署管理后台到生产环境。记得：

1. ✅ 修改默认密码
2. ✅ 配置HTTPS
3. ✅ 设置监控和日志
4. ✅ 定期备份
5. ✅ 及时更新依赖