news 2026/9/10 5:33:02

Conductor UI 开发部署完全指南：基于 create-react-app 的 React SPA 构建、代理配置与插件化定制

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Conductor UI 开发部署完全指南：基于 create-react-app 的 React SPA 构建、代理配置与插件化定制

Conductor UI 开发部署完全指南：基于 create-react-app 的 React SPA 构建、代理配置与插件化定制

【免费下载链接】conductorConductor is an event driven agentic workflow engine providing durable and highly resilient execution engine for applications and AI Agents项目地址: https://gitcode.com/GitHub_Trending/co/conductor

导读

Conductor 的事件驱动式 Agent 工作流引擎不仅提供了健壮的 server 端执行能力，还附带了一套完整的可视化控制台 UI。本指南以仓库中 ui/README.md 为骨架，系统讲解 Conductor UI 的技术栈、开发服务器与反向代理配置、生产环境构建与同域托管方案、基于/plugins目录的定制扩展点，以及认证鉴权的外置推荐做法，并补充对应源码与配置文件的实现依据，帮助你在几分钟内把 Conductor UI 跑起来，并快速接入你自己的 Conductor Server。

UI 技术栈：标准 create-react-app 单页应用

Conductor UI 是一个标准的create-react-app（CRA）React 单页应用（SPA）。从 ui/package.json 可以看到其核心依赖：

  • 框架与渲染：react@^18.3.1、react-router-dom@^5.2.0、react-query@^3.19.4
  • 组件与可视化：@material-ui/core@^4.12.3、recharts@^2.11.0、dagre-d3@^0.6.4、d3@^6.2.0、orkes-workflow-visualizer@^1.1.1
  • 编辑器：@monaco-editor/react@^4.4.0+monaco-editor@^0.44.0
  • 脚本体系：react-scripts@^5.0.1，标准 CRA 的start/build/test/eject四个脚本

engines字段要求node >=14.17.0，README 提到的 Node 14 即为此下限。项目使用yarn@1.22.22作为包管理器（packageManager字段已锁定版本）。

环境准备与依赖安装

在/ui目录下执行依赖安装（包管理器建议使用 yarn，与 lock 文件一致）：

cd ui yarn install

面向升级用户的注意事项：新版 UI 直接与 Conductor Server API 交互，不再需要 Nodeexpress后端。也就是说，UI 是纯前端静态应用，任何能承载静态资源并代理/api请求的 Web 服务器（nginx、Apache、CDN 等）都可以托管它。

开发服务器与反向代理配置

启动开发服务器

在/ui目录下执行：

yarn run start

CRA 开发服务器默认监听http://localhost:5000，在浏览器中打开该地址即可访问。

如需启用错误检查器（Errors Inspector）面板，先导出环境变量再启动：

REACT_APP_ENABLE_ERRORS_INSPECTOR=true yarn start

默认代理目标

开发服务器默认将请求代理到http://localhost:8080/api。这一行为由 ui/src/setupProxy.js 实现，它使用http-proxy-middleware的createProxyMiddleware：

const { createProxyMiddleware } = require("http-proxy-middleware"); const target = process.env.WF_SERVER || "http://localhost:8080"; module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: target, //pathRewrite: { "^/api/": "/" }, changeOrigin: true, }) ); };

关键点解读：

  • 代理前缀固定为/api，目标地址由WF_SERVER环境变量决定，未设置时回退到http://localhost:8080（即本地默认 Conductor Server 端口）。
  • pathRewrite默认被注释掉，表示不重写路径——Conductor Server 本身暴露的就是/api前缀的 REST 接口。
  • changeOrigin: true用于在跨主机代理时改写请求头中的Host，避免源站校验失败。
  • 该文件仅在开发服务器阶段生效，生产构建产物不会包含它。

切换不同的 Conductor Server

开发时连接其他 Conductor Server，只需设置WF_SERVER：

export WF_SERVER=http://localhost:8081 yarn run start

如需更复杂的定制（例如路径重写pathRewrite），直接编辑setupProxy.js即可。

生产环境构建与托管

构建静态产物

需要托管编译产物时执行：

yarn build

产物输出到/ui/build目录（CRA 默认输出目录）。构建产物是纯静态文件，可直接交给任意 Web 服务器。

package.json中还提供了两个便捷脚本：

yarn serve-build # http-server ./build --port 5000 --proxy http://localhost:8080 yarn preview # serve -s build --listen 5000

serve-build用http-server以 5000 端口对外服务并将请求代理到本地 8080，适合本地验证生产包。

同域托管原则

官方推荐的生产托管方式是让 Conductor Server API 与 UI 处于同一域名下，从而避免跨域（CORS）数据请求带来的复杂度。默认 API 路径前缀是/api。

从源码看，UI 的所有请求都经由 ui/src/plugins/fetch.js 的fetchWithContext发出，它会把basename与api/拼接到请求路径上，并通过cleanDuplicateSlash清理重复斜杠：

const basename = getBasename(); const newPath = basename + `api/${path}`; const cleanPath = cleanDuplicateSlash(newPath);

因此只要反向代理把/api转发到 Conductor Server，UI 就能正常工作。如果你需要不同的 API 前缀，可以修改plugins/fetch.js来自定义 fetch 行为。

仓库在 docker/ui 目录下提供了现成的 nginx 参考实现。看 docker/ui/nginx.conf.template，其核心配置是：

  • location /：静态资源 +try_files $uri /index.html（SPA 路由回退，保证前端路由刷新不 404）；
  • location /api：proxy_pass ${WF_SERVER}/api，把 API 反向代理到 Conductor Server；
  • location /actuator：同样代理到${WF_SERVER}/actuator，用于健康检查等 actuator 端点；
  • 附带一组安全响应头：Referrer-Policy: strict-origin、X-Frame-Options: SAMEORIGIN、X-Content-Type-Options: nosniff。

独立运行 UI 容器

如果你想单独把 UI 跑成容器（Conductor Server 镜像docker/server/Dockerfile本身已内嵌该 UI），仓库提供了独立 UI 镜像构建方式：

docker build -t conductor:ui -f docker/ui/Dockerfile . docker run -e WF_SERVER=http://my-conductor:8080 -p 5000:5000 conductor:ui

容器内的 nginx 会在启动时通过envsubst将${WF_SERVER}渲染进配置文件（默认值http://conductor-server:8080），见 docker/ui/Dockerfile。

部署在非根路径（Different host path）

静态 UI 可以在任意主机路由下渲染，默认路径是/。你可以通过修改package.json中的homepage字段来自定义，例如：

"homepage": "/conductor-ui"

构建后产物中的所有资源引用都会带上该前缀。这一机制在源码 ui/src/utils/helpers.js 的getBasename()中有直接体现：

export function getBasename() { let basename = "/"; try { basename = new URL(packageJson.homepage).pathname; } catch (e) {} return _.isEmpty(basename) ? "/" : basename; }

即：构建时读取package.json的homepage字段，将其 pathname 作为前端路由与 API 请求的基础路径。配合fetch.js中basename + "api/..."的拼接逻辑，UI 被部署在子路径下时，对 Server API 的请求也会自动带上该前缀。

需要提醒的是，修改homepage后，反向代理配置也要相应调整——例如 nginx 中需要把location /conductor-ui/api一并代理到 Conductor Server。

定制扩展点：/plugins 目录

为便于维护，UI 把一系列可定制的触点集中到了/plugins目录下（源码位置 ui/src/plugins），包括：

文件作用默认实现
AppBarModules.jsx向顶部应用栏追加自定义模块/按钮返回null（不渲染任何内容）
AppLogo.jsx替换顶部 Logo渲染 Conductor 官方 Logo 图片
env.js注入环境/栈上下文（useEnv）返回stack: "default"、defaultStack: "default"
fetch.js自定义 API fetch 行为fetchWithContext拼接 basename +/api/，JSON 解析与错误归一化

以 ui/src/plugins/AppBarModules.jsx 为例，默认实现仅返回null，如果你需要在 UI 顶栏加入「文档」「监控大盘」等自定义入口，只需在该组件中返回你自己的 React 元素即可，无需改动主应用代码。plugins/env.js的useEnv()则为多环境（stack）支持提供了统一取值入口，需要接入多套 Conductor 环境时可在此扩展。

另外，插件目录下还有CustomAppBarButtons.jsx、CustomRoutes.jsx、customTypeRenderers.jsx、constants.js等文件，分别对应顶栏按钮、自定义路由、自定义类型渲染器等扩展点，可以在其中看到更多定制模式的参考实现。

认证与鉴权：推荐在网关层解耦

README 明确指出，推荐将认证（authentication）与授权（authorization）从 UI 中解耦，交由 Web 服务器 / 访问网关统一处理。UI 本身不内建用户体系，所有请求都以登录态 Cookie / Header 形式经过网关透传给 Conductor Server。这样做的优势是：UI 保持无状态纯前端，安全性集中在一层可控的边界上。

仓库给出的示例方向（标记为 WIP）包括：

  • Basic Auth（用户名/密码）：用 nginx 的auth_basic指令即可实现；
  • 商业 IAM 厂商方案：接入企业已有的身份管理系统；
  • Nodeexpress+passport.js：在 UI 前面挂一个轻量 Node 网关完成会话与 OAuth 流程。

结合 docker/ui/nginx.conf.template 可以看到，nginx 网关层天然适合作为这一认证边界：它同时负责静态资源分发、/api反向代理和（可选的）actuator 代理，在其中插入认证指令（如auth_basic、auth_request对接 OIDC）不会影响 UI 本身的任何逻辑。

端到端测试支持

UI 仓库还配备了基于 Playwright 的端到端测试能力（ui/package.json 中的test:e2e*系列脚本，测试用例位于 ui/e2e），包括页面导航、工作流定义管理、doWhile / dynamicFork 等 fixtures 的验证。开发者在完成 UI 定制后，可以用：

yarn test:e2e

验证核心工作流页面没有被自定义改动破坏，这是生产级 UI 二次开发的重要配套保障。

小结

Conductor UI 的核心使用脉络可归纳为四条主线：

  1. 开发调试：yarn install+yarn start，通过WF_SERVER环境变量或编辑setupProxy.js对接任意 Conductor Server；
  2. 生产部署：yarn build产出纯静态包，由 Web 服务器（推荐 nginx，参考 docker/ui/nginx.conf.template）托管，并保证/api与 UI 同域代理；
  3. 路径定制：通过package.json的homepage字段支持部署在任意子路径，前端路由与 API 请求自动带上 basename；
  4. 功能定制与安全：所有可定制触点收敛在 ui/src/plugins 目录，认证鉴权则统一交给网关层处理。

无论你是想本地快速体验 Conductor 控制台、把 UI 集成进现有生产域，还是基于插件目录做深度二次开发，本文给出的命令、配置与源码线索都能直接落地使用。

【免费下载链接】conductorConductor is an event driven agentic workflow engine providing durable and highly resilient execution engine for applications and AI Agents项目地址: https://gitcode.com/GitHub_Trending/co/conductor

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/9/10 5:29:57

为什么 macOS 12 及以下系统里 OpenScreen 无法录制系统音频？

为什么 macOS 12 及以下系统里 OpenScreen 无法录制系统音频？ 【免费下载链接】openscreen Create stunning demos for free. Open-source, no subscriptions, no watermarks, and free for commercial use. An alternative to Screen Studio. 项目地址: https://…

作者头像 李华
网站建设 2026/9/10 5:24:45

免费物联网组态平台选型指南：ThingsBoard与FUXA实战解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/9/10 5:20:56

STM32+ESP8266基于MQTT接入阿里云IoT平台实战指南

简介：本资源是一套完整的物联网项目实战代码，面向嵌入式初学者与STM32开发者，聚焦于STM32F103C8T6通过ESP8266模组接入阿里云IoT Studio（飞燕平台）的端到云通信全流程实现。涵盖设备主动上报传感器数据、接收云端指令并…

作者头像 李华
网站建设 2026/9/10 5:20:01

AU-48双麦语音模组：小体积高集成语音前处理方案

1. 为什么说AU-48是小体积里的音频“全能战士”？AU-48双麦多功能语音处理模组，这个名字乍一听像某个工业级芯片的型号编号，但实际拆开来看——“AU”是Audio的缩写，“48”不是指48个通道，而是指其核心DSP内核运行频率为…

作者头像 李华