nxxmdata/government-admin/部署修复说明.md

政府管理后台部署修复说明

问题描述

部署后前端仍然使用 http://localhost:5352 访问API，导致无法正常访问后端服务。

问题原因

前端代码中硬编码了本地开发环境的API地址，没有根据部署环境动态配置。

解决方案

1. 环境变量配置

已创建环境配置文件：

开发环境 (.env.development):

VITE_API_BASE_URL=http://localhost:5352/api
VITE_APP_TITLE=政府管理系统
VITE_APP_ENV=development

生产环境 (.env.production):

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 重新构建前端

cd government-admin

# 安装依赖
npm install

# 生产环境构建
npm run build

3.2 部署到服务器

将构建后的 dist 目录上传到服务器的 /var/www/html/government/ 目录。

3.3 验证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 重启服务

# 重新加载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端口正常监听

# 检查端口监听
netstat -tlnp | grep 5352

# 检查服务状态
pm2 status government-backend

# 测试API连通性
curl -k https://ad.ningmuyun.com/api/government/departments

---

附：历史路由刷新 404 修复

若在访问如 https://ad.liaoniuyun.com/government/farmer 并刷新后出现 404，这是前端使用 history 路由模式时，服务器未对深链接进行回退到 index.html 导致。请在 Nginx 中为 /government/ 增加路由回退：

# 优先匹配政府端前端路径，并做历史路由回退
location ^~ /government/ {
    # 推荐使用 root 方式，目录中应包含 government/index.html 与打包的 assets/
    root /var/www/html;
    index index.html;
    try_files $uri $uri/ /government/index.html;
}

# 若使用 alias，也请注意路径以 / 结尾，并保留回退
# location ^~ /government/ {
#     alias /var/www/html/government/;
#     index index.html;
#     try_files $uri $uri/ /government/index.html;
# }

验证步骤：

• 访问并刷新：https://ad.liaoniuyun.com/government/farmer 应正常显示页面，不再 404。
• 如仍异常，检查是否有其它 location 块（例如 / 或正则）优先生效覆盖了 /government/ 的回退配置；可通过 ^~ 提升优先级。
• 确认 vite.config.js 已设置 base: '/government/'，且路由为 createWebHistory('/government/')（本项目已配置）。