239 lines
5.8 KiB
Markdown
239 lines
5.8 KiB
Markdown
# 视频播放配置指南
|
||
|
||
## 问题背景
|
||
|
||
项目中有两个前端：
|
||
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
|