guoyu/Test/md/视频播放配置指南.md

# 视频播放配置指南

## 问题背景

项目中有两个前端：
1. **后台管理系统** (`ry-study-ui`) - 运行在浏览器中
2. **移动端APP** (`fronted_uniapp`) - 运行在手机APP中

两者访问视频文件的方式不同，需要分别配置。

---

## 一、本地开发环境配置

### 1. 后台管理系统 (ry-study-ui)

**配置文件**: `vue.config.js`

需要配置 `/profile` 代理，将静态文件请求转发到后端：

```javascript
proxy: {
  '/dev-api': {
    target: baseUrl,  // http://localhost:30091
    changeOrigin: true,
    pathRewrite: { '^/dev-api': '' }
  },
  // 静态文件代理（视频、图片等）
  '/profile': {
    target: baseUrl,  // http://localhost:30091
    changeOrigin: true,
    secure: false
  }
}
```

**配置文件**: `src/utils/ruoyi.js`

`getFileBaseUrl()` 函数返回空字符串，让请求通过代理：

```javascript
export function getFileBaseUrl() {
  let fileBaseUrl = process.env.VUE_APP_FILE_BASE_URL
  if (!fileBaseUrl) {
    fileBaseUrl = ''  // 使用相对路径，通过代理转发
  }
  return fileBaseUrl
}
```

### 2. 移动端APP (fronted_uniapp)

**配置文件**: `utils/config.js`

APP直接访问后端服务器，不经过代理：

```javascript
const DEFAULT_SERVER_HOST = '192.168.1.164'  // 服务器IP地址
const DEFAULT_SERVER_PORT = 30091

let API_BASE_URL = `http://${serverHost}:${serverPort}`
let FILE_BASE_URL = API_BASE_URL + '/profile'
```

**注意**: 真机测试必须使用IP地址，不能用 `localhost`！

---

## 二、Windows服务器部署配置（无Nginx）

### 部署架构

```
Windows服务器 (IP: your-server-ip)
├── Spring Boot 后端服务 (端口: 30091)
│   ├── 提供 API 接口 (/api/*)
│   ├── 提供静态文件 (/profile/*)
│   └── 托管前端静态文件 (/)
└── 文件存储目录 (D:/ruoyi/uploadPath/)
```

### 1. 后端配置

**配置文件**: `application.yml`

```yaml
server:
  port: 30091

ruoyi:
  profile: D:/ruoyi/uploadPath  # Windows文件存储路径
```

**静态资源映射**: `ResourcesConfig.java`

```java
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    // 本地文件上传路径映射
    registry.addResourceHandler("/profile/**")
            .addResourceLocations("file:" + RuoYiConfig.getProfile() + "/");
    
    // 前端静态文件（如果前端打包后放在后端static目录）
    registry.addResourceHandler("/**")
            .addResourceLocations("classpath:/static/");
}
```

### 2. 后台管理系统打包部署

**步骤1**: 修改生产环境配置

**配置文件**: `.env.production`

```bash
ENV = 'production'
VUE_APP_BASE_API = ''
# 生产环境直接访问后端，不需要/api前缀
```

**步骤2**: 打包前端

```bash
cd ry-study-ui
npm run build:prod
```

**步骤3**: 部署方式（二选一）

**方式A**: 将 `dist` 目录内容复制到后端的 `src/main/resources/static/` 目录，重新打包后端jar

**方式B**: 使用独立的静态文件服务器（如IIS）托管 `dist` 目录

### 3. 移动端APP配置

**配置文件**: `utils/config.js`

```javascript
const DEFAULT_SERVER_HOST = 'your-server-ip'  // Windows服务器IP
const DEFAULT_SERVER_PORT = 30091  // 后端端口

let API_BASE_URL = `http://${serverHost}:${serverPort}`
let FILE_BASE_URL = API_BASE_URL + '/profile'
```

---

## 三、关键问题：APP在服务器上无法播放视频

### 可能原因

1. **防火墙问题**: Windows防火墙阻止了30091端口
2. **IP地址问题**: APP配置的IP地址不正确
3. **网络问题**: 手机和服务器不在同一网络

### 解决方案

#### 1. 开放Windows防火墙端口

```powershell
# 以管理员身份运行PowerShell
netsh advfirewall firewall add rule name="Study Backend 30091" dir=in action=allow protocol=tcp localport=30091
```

或者通过Windows防火墙图形界面：
1. 控制面板 -> Windows Defender 防火墙 -> 高级设置
2. 入站规则 -> 新建规则
3. 选择"端口" -> TCP -> 特定本地端口: 30091
4. 允许连接 -> 完成

#### 2. 检查APP配置的服务器地址

确保 `fronted_uniapp/utils/config.js` 中的地址是服务器的实际IP：

```javascript
const DEFAULT_SERVER_HOST = '服务器实际IP地址'  // 不是localhost！
const DEFAULT_SERVER_PORT = 30091
```

#### 3. 测试视频URL是否可访问

在手机浏览器中直接访问视频URL测试：
```
http://服务器IP:30091/profile/upload/2025/12/05/video.mp4
```

如果能播放，说明服务器配置正确，问题在APP端。
如果不能播放，检查防火墙和后端服务。

---

## 四、URL路径说明

视频文件在数据库中存储的路径格式：`/profile/upload/2025/12/05/video.mp4`

### 后台管理系统访问流程（本地开发）:
```
浏览器请求: http://localhost:20002/profile/upload/...
    ↓
Vue代理: 转发到 http://localhost:30091/profile/upload/...
    ↓
后端Spring: 映射到 D:/ruoyi/uploadPath/upload/...
    ↓
返回视频文件
```

### 后台管理系统访问流程（服务器部署）:
```
浏览器请求: http://服务器IP:30091/profile/upload/...
    ↓
后端Spring: 映射到 D:/ruoyi/uploadPath/upload/...
    ↓
返回视频文件
```

### APP访问流程:
```
APP请求: http://服务器IP:30091/profile/upload/...
    ↓
后端Spring: 映射到 D:/ruoyi/uploadPath/upload/...
    ↓
返回视频文件
```

---

## 五、总结

| 环境 | 后台管理系统 | APP |
|------|-------------|-----|
| 本地开发 | 通过vue代理访问 `localhost:20002/profile` | 直接访问 `http://IP:30091/profile` |
| Windows服务器 | 直接访问 `http://IP:30091/profile` | 直接访问 `http://IP:30091/profile` |

关键点：
1. **本地开发**: 后台管理系统需要vue代理配置
2. **服务器部署**: 两端都直接访问后端30091端口
3. **Windows防火墙**: 必须开放30091端口
4. **APP配置**: 必须使用服务器实际IP，不能用localhost