路径规范

管道监控系统的网页端按 /scada/ 子路径完成页面组态，与 API、WebSocket 共用同一服务域名：

/scada/  # 管道监控系统 Flutter Web
/api/... # REST API
/ws/live # WebSocket

网页源码仍在 PipeMonitor 项目里独立维护、独立构建、独立发布；后端 API 继续由 D:\Project\HTML 的 pipe-monitor-api 提供。

Flutter Web 的子路径构建

Flutter Web 默认假设站点根目录就是 /。要部署到子路径，构建时必须把 base href 写死：

flutter build web --release --base-href /scada/

构建产物上传到服务器对应目录：

/var/www/pipe-monitor.varka.cn/scada/
├── index.html
├── flutter_bootstrap.js
├── main.dart.js
├── assets/
└── canvaskit/

只要 base href 设对了，flutter_bootstrap.js、assets/、canvaskit/ 等等都会以 /scada/ 为前缀去加载。

Nginx 子路径 SPA 回退

Flutter Web 内部用 GoRouter 维护前端路由，刷新 /scada/history 这种深链路时，Nginx 不能直接 404，必须回退到子应用自己的 index.html：

location /scada/ {
    root /var/www/pipe-monitor.varka.cn;
    try_files $uri $uri/ /scada/index.html;
}

注意回退目标是 子应用的 index.html，不是 API 根路径，否则刷新前端路由会打到后端服务。

发布隔离

发布链路上需要保证三件事：

  1. Flutter Web 发布只动子路径：PipeMonitor/flutter 的 CI 用 rsync 同步到 /var/www/pipe-monitor.varka.cn/scada/
  2. API 发布只动后端服务：pipe-monitor-api 继续通过 Docker Compose 运行在 127.0.0.1:3000
  3. Nginx 不动：路径契约一旦稳定就别频繁改 Nginx 配置

这样网页发布和后端发布两条链路独立，谁出问题不影响另一个。

一图回顾

源仓库                              产物                                         URL
D:\Project\PipeMonitor\flutter      ->  /var/www/pipe-monitor.varka.cn/scada/      /scada/
D:\Project\HTML\server              ->  /opt/varka                                https://pipe-monitor.varka.cn/api/...

验收清单

  • 访问 /scada/ 能首屏加载 Flutter Web
  • 刷新 /scada/history 不返回 404
  • 资源路径都带 /scada/ 前缀
  • 单独发布 pipe-monitor Web 不会影响 API 和 WebSocket

页面组态

  • 已完成 Flutter Web 子路径、Nginx 回退和页面资源路径组态，后续补充首屏与历史页截图。
  • 后端架构与传感器接入：管道监控系统综述