135 lines
3.3 KiB
Markdown
135 lines
3.3 KiB
Markdown
|
# 政府管理后台部署修复说明
|
|||
|
|
|
|||
|
|
## 问题描述
|
|||
|
|
|
|||
|
|
部署后前端仍然使用 `http://localhost:5352` 访问API，导致无法正常访问后端服务。
|
|||
|
|
|
|||
|
|
## 问题原因
|
|||
|
|
|
|||
|
|
前端代码中硬编码了本地开发环境的API地址，没有根据部署环境动态配置。
|
|||
|
|
|
|||
|
|
## 解决方案
|
|||
|
|
|
|||
|
|
### 1. 环境变量配置
|
|||
|
|
|
|||
|
|
已创建环境配置文件：
|
|||
|
|
|
|||
|
|
**开发环境** (`.env.development`):
|
|||
|
|
```env
|
|||
|
|
VITE_API_BASE_URL=http://localhost:5352/api
|
|||
|
|
VITE_APP_TITLE=政府管理系统
|
|||
|
|
VITE_APP_ENV=development
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**生产环境** (`.env.production`):
|
|||
|
|
```env
|
|||
|
|
VITE_API_BASE_URL=https://ad.ningmuyun.com/api/government
|
|||
|
|
VITE_APP_TITLE=政府管理系统
|
|||
|
|
VITE_APP_ENV=production
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. API配置文件修改
|
|||
|
|
|
|||
|
|
已修改以下文件使用环境变量：
|
|||
|
|
|
|||
|
|
- `src/utils/api.js` - 主要API配置
|
|||
|
|
- `src/utils/productionMaterialCertificationApi.js` - 生产物料认证API
|
|||
|
|
- `src/utils/deviceWarningApi.js` - 设备预警API
|
|||
|
|
- `src/utils/cattleAcademyApi.js` - 牛只学院API
|
|||
|
|
- `src/utils/epidemicActivityApi.js` - 疫情活动API
|
|||
|
|
- `src/utils/approvalProcessApi.js` - 审批流程API
|
|||
|
|
|
|||
|
|
### 3. 部署步骤
|
|||
|
|
|
|||
|
|
#### 3.1 重新构建前端
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd government-admin
|
|||
|
|
|
|||
|
|
# 安装依赖
|
|||
|
|
npm install
|
|||
|
|
|
|||
|
|
# 生产环境构建
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 3.2 部署到服务器
|
|||
|
|
|
|||
|
|
将构建后的 `dist` 目录上传到服务器的 `/var/www/html/government/` 目录。
|
|||
|
|
|
|||
|
|
#### 3.3 验证Nginx配置
|
|||
|
|
|
|||
|
|
确保服务器上的Nginx配置正确：
|
|||
|
|
|
|||
|
|
```nginx
|
|||
|
|
# 政府端前端静态文件
|
|||
|
|
location /government/ {
|
|||
|
|
alias /var/www/html/government/;
|
|||
|
|
try_files $uri $uri/ /government/index.html;
|
|||
|
|
index index.html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
# 政府端API代理
|
|||
|
|
location ^~ /api/government/ {
|
|||
|
|
proxy_pass http://localhost:5352/api/government/;
|
|||
|
|
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;
|
|||
|
|
|
|||
|
|
# CORS配置
|
|||
|
|
add_header Access-Control-Allow-Origin *;
|
|||
|
|
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
|
|||
|
|
add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
|
|||
|
|
|
|||
|
|
if ($request_method = 'OPTIONS') {
|
|||
|
|
return 204;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 3.4 重启服务
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 重新加载Nginx配置
|
|||
|
|
sudo nginx -t
|
|||
|
|
sudo nginx -s reload
|
|||
|
|
|
|||
|
|
# 确保government-backend服务运行
|
|||
|
|
pm2 restart government-backend
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 验证修复
|
|||
|
|
|
|||
|
|
访问以下地址验证修复结果：
|
|||
|
|
|
|||
|
|
- 前端页面: `https://ad.ningmuyun.com/government/`
|
|||
|
|
- API接口: `https://ad.ningmuyun.com/api/government/departments`
|
|||
|
|
|
|||
|
|
### 5. 注意事项
|
|||
|
|
|
|||
|
|
1. **环境变量**: 确保在生产环境构建时使用正确的环境变量
|
|||
|
|
2. **缓存清理**: 部署后清理浏览器缓存
|
|||
|
|
3. **HTTPS证书**: 确保SSL证书配置正确
|
|||
|
|
4. **防火墙**: 确保端口443和80开放
|
|||
|
|
5. **服务状态**: 确保government-backend服务正常运行
|
|||
|
|
|
|||
|
|
### 6. 故障排查
|
|||
|
|
|
|||
|
|
如果仍有问题，请检查：
|
|||
|
|
|
|||
|
|
1. **浏览器开发者工具**: 查看网络请求是否使用正确的URL
|
|||
|
|
2. **Nginx日志**: 检查 `/var/log/nginx/error.log`
|
|||
|
|
3. **后端日志**: 检查government-backend服务日志
|
|||
|
|
4. **端口监听**: 确认5352端口正常监听
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 检查端口监听
|
|||
|
|
netstat -tlnp | grep 5352
|
|||
|
|
|
|||
|
|
# 检查服务状态
|
|||
|
|
pm2 status government-backend
|
|||
|
|
|
|||
|
|
# 测试API连通性
|
|||
|
|
curl -k https://ad.ningmuyun.com/api/government/departments
|
|||
|
|
```
|