路径规范

PipeMonitor 的网页端直接挂到 API 同域的 /scada/ 路径下：

https://pipe-monitor.varka.cn/scada/  # PipeMonitor Flutter Web
https://pipe-monitor.varka.cn/api/... # REST API
wss://pipe-monitor.varka.cn/ws/live   # WebSocket

网页源码仍在 Flowmeter 项目里独立维护、独立构建、独立发布；后端 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 发布只动子路径：Flowmeter/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\Flowmeter\flutter        ->  /var/www/pipe-monitor.varka.cn/scada/      https://pipe-monitor.varka.cn/scada/
D:\Project\HTML\server              ->  /opt/varka                                https://pipe-monitor.varka.cn/api/...

验收清单

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

入口