192 lines
4.6 KiB
Markdown
192 lines
4.6 KiB
Markdown
# 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 配置（可选）
|
||
- [ ] 域名配置（可选）
|
||
|