云原生后端数据库运维【免费下载链接】postgres-operatorPostgres operator creates and manages PostgreSQL clusters running in Kubernetes项目地址https://gitcode.com/gh_mirrors/po/postgres-operator点击查看免费下载导读Postgres Operator 的 Web 界面UI由ui/app目录下的 ECMAScriptES6前端源码构成该目录仅在构建期需要。本文以 ui/app/README.rst 为骨架完整讲解前端构建的三个核心命令npm install、npm run build、npm start并结合 webpack.config.js、package.json、各 Riot 标签源码以及后端静态资源挂载逻辑深入剖析从源码到operator_ui/static/build/app.js的完整构建管线。读完本文你将掌握 Postgres Operator UI 前端的构建方式、产物去向、watch 开发模式原理以及如何在容器镜像构建流程中复用这套前端编译。一、ui/app仅在构建期存在的 ECMAScript 前端ui/app目录存放 PostgreSQL Operator UI 的 ECMAScript 前端代码。正如 ui/app/README.rst 开篇所述This directory contains the EcmaScript frontend code of the PostgreSQL Operator UI and is only needed during build time.这句话包含两层关键信息技术栈前端采用现代 ECMAScript 编写并通过 webpack 打包生命周期该目录只服务于构建期运行时并不直接依赖它——运行时浏览器加载的是编译产物见后文 ui/operator_ui/templates/index.html 中script src./js/build/app.js的引用。ui/app的目录结构如下ui/app/ ├── package.json # npm 工程定义脚本、依赖、构建目录配置 ├── webpack.config.js # webpack 4 构建配置 └── src/ # 前端源码 ├── app.js # 入口Riot 挂载、动态表单状态管理工具 ├── app.tag.pug # 根组件导航栏、路由、页面分发 ├── edit.tag.pug # 编辑已有集群的可支持属性 ├── help-edit.tag.pug # 编辑页帮助面板 ├── help-general.tag.pug ├── logs.tag.pug # 集群日志查看 ├── new.tag.pug # 新建集群表单 ├── postgresql.tag.pug# 集群状态页 ├── postgresqls.tag.pug # 集群列表页 ├── restore.tag.pug # 备份/克隆时间线还原页 ├── status.tag.pug # Operator 工作队列与日志状态页 └── prism.js # 代码高亮从命名可以看出每个页面新建、列表、状态、编辑、日志、备份、Operator 状态都被封装为一个独立的 Riot 自定义标签模板采用 Pugjade语法.tag.pug后缀这一设计贯穿整个构建管线。二、构建产物与三个核心命令2.1 产物位置operator_ui/static/build/app*.jsREADME 明确说明webpack 会将打包后的 JS 生成到operator_ui/static/build/app*.js对照 webpack.config.js 中的输出配置第 23-29 行可以精确确认实际行为output: { // filename: DEBUG ? app.js : app-[hash].js filename: app.js, library: App, path: path.resolve(pkg.config.buildDir), publicPath: DEBUG ? / : ./, }pkg.config.buildDir来自 package.json 的config.buildDir字段值为../operator_ui/static/build即相对ui/app的上级目录ui/operator_ui/static/build当前配置下实际产物文件名固定为app.js源码中保留了app-[hash].js的注释说明历史上曾按 hash 命名现已简化为固定名README 中的app*.js是泛指library: App将打包结果暴露为全局变量ApppublicPath在开发模式NODE_ENV ! production下为/否则为./与后端静态资源相对引用方式吻合。2.2 构建与开发命令README 给出的操作命令原样如下$ npm install $ npm run build以及用于前端开发的 watch 模式$ npm start这三条命令在 package.json 中都有完整定义npm script实际执行作用prestartnpm install启动 watch 前自动安装依赖startNODE_ENVdevelopment webpack --watch开发模式持续监听源码并增量重编译prewebpacknpm run clean执行 webpack 前清理旧产物webpackwebpack --config ./webpack.config.js显式指定配置文件运行 webpackbuildNODE_ENVdevelopment npm run webpack构建注意当前脚本将 NODE_ENV 设为 developmentcleanrimraf $npm_package_config_buildDir mkdir $npm_package_config_buildDir清空并重建operator_ui/static/build目录linteslint ./src/**/*.js对src下的 JS 做 ESLint 检查两点值得注意的细节npm start前会自动执行npm install由于存在prestart钩子开发者直接运行npm start即可无需手动先装依赖每次构建前都会cleanprewebpack钩子会先删除operator_ui/static/build再重建目录避免旧产物残留由于build经由npm run webpack触发因此npm run build也会自动执行清理。三、webpack 构建管线深度解析webpack.config.js 是这套前端构建的核心配置。它基于 webpack 4^4.46.0整体结构如下3.1 入口与模式const DEBUG process.env.NODE_ENV ! production const entry [./src/app.js] module.exports { context: path.join(__dirname, ./), devtool: DEBUG ? inline-source-map : false, entry: entry, mode: DEBUG ? development : production, target: web, ... }入口为./src/app.js即整个前端应用从 src/app.js 开始devtool开发模式启用inline-source-map便于浏览器调试mode依据NODE_ENV环境变量区分 development/productionexternals将$、jquery声明为外部依赖运行时直接使用全局jQuery由 ui/operator_ui/templates/index.html 引入的 CDN jQuery 提供。3.2 Loader 规则Riot 标签 Pug 模板 Babelmodule: { rules: [ { test: /\.tag\.pug$/, loader: riot-tag-loader, query: { hot: true, template: pug, type: es6 } }, { test: /\.tag$/, loader: riot-tag-loader, query: { hot: false, type: es6 } }, { test: /\.js$/, loader: babel-loader, query: { plugins: [babel/transform-runtime], presets: [babel/preset-env] } }, { test: /\.html$/, loader: file-loader?name[path][name].[ext] }, { test: /\.jpe?g$|\.svg$|\.png$/, loader: file-loader?name[path][name].[ext] }, ... ] }这套 loader 规则回答了.tag.pug文件是如何变成可运行 JS 的这一核心问题riot-tag-loader负责把 Riot 自定义标签编译成 ES6 模块。其中template: pug指明标签内的模板使用 Pug 编写hot: true为 watch 模式下的热重载Hot Module Replacement提供支持这正是npm start实现持续重编译的关键插件级配合——webpack.config.js 中同时注册了webpack.HotModuleReplacementPlugin()babel-loader结合babel/preset-env与babel/transform-runtime把 ES6 语法转译为浏览器可执行的 ES5同时按目标环境做 polyfillfile-loader/url-loader负责搬运 HTML、图片、字体等静态资源保证标签模板中引用的资源在打包后路径仍然正确。配套地package.json 的依赖清单印证了这条链路的选型dependenciesbabel/core、babel/polyfill、babel/runtime、pixi.js用于界面中的动画/图形渲染devDependenciesriot^3.13.2、riot-tag-loader、riot-hot-reload、riot-route路由、pug、js-yamlYAML 解析/生成、dedent-js模板字符串去缩进、sort-by、webpack/webpack-cli、eslint、rimraf等。3.3 watch 模式与重建日志webpack.config.js 中还注册了一个自定义插件用于在 watch 重编译时打印时间戳function () { this.plugin(watch-run, (watching, callback) { console.log(Begin compile at new Date()) callback() }) }运行npm start后每次保存源码都会看到类似Begin compile at 时间的输出随后增量编译并刷新浏览器这就是 README 所说的 watching the source code and continuously recompiling the webpack。四、前端源码结构入口与页面标签4.1 入口app.jsRiot 挂载与表单状态工具src/app.js 是 webpack 的构建入口它完成三件事导入全部标签模块import ./edit.tag.pug、./postgresql.tag.pug、./new.tag.pug、./restore.tag.pug等 10 个标签使它们在打包时被编译注册提供对象工具函数Object.fromEntries、Object.mapValues、Object.filterValues等供各标签处理配置对象与表单数据挂载根组件并注入依赖riot.mount(app, { Dynamic: Dynamic, Dynamics: Dynamics, DynamicSet: DynamicSet, delete_cluster: delete_cluster, })其中Dynamic/Dynamics/DynamicSet是一套自实现的表单状态管理工具对应 src/app.jsDynamic单个字段的状态封装包含init、update、validState、edit、valid方法Dynamics动态数组通过add/removeDOM 事件回调支持增删表单条目DynamicSet以键组织的 Dynamic 集合当所有子项同时有效时整体有效。delete_cluster则实现了带二次确认的删除交互src/app.js弹出jquery-confirm对话框要求用户输入namespace/clustername后才启用红色 Delete cluster 按钮确认后通过DELETE ./postgresqls/namespace/clustername发起请求。4.2 根组件app.tag.pug导航与路由src/app.tag.pug 定义了顶部导航PostgreSQL clusters / Backups / Status / New cluster / Documentation以及基于riot-route的前端路由路由激活页参数/listLIST—/status/*/*STATUSnamespace, clustername/edit/*/*EDITnamespace, clustername/logs/*/*LOGSnamespace, clustername/newNEW—/clone/*/*、/clone/*/*/*NEW预填备份参数backup_name, backup_uid, backup_timestamp/backupsBACKUPS—/operator..OPERATOR—标签挂载后会先通过jQuery.get(./config)与jQuery.get(./teams)拉取 UI 配置与当前用户所属团队再决定read_write权限src/app.tag.pugthis.read_write ( this.config ( !this.config.read_only_mode || this.teams.includes(this.config.superuser_team) ) )即UI 非只读模式或当前用户属于superuser_team默认acid时才允许创建/编辑/删除集群。此外当config.kubernetes_in_maintenance为真时页面顶部会显示 Kubernetes 维护中的黄色警告条。4.3 新建集群表单new.tag.pugYAML 实时生成src/new.tag.pug 是功能最丰富的标签。表单覆盖集群名正则[a-z0-9][a-z0-9\-][a-z0-9]、最长 53 字符、Namespace、所属团队、PostgreSQL 版本来自config.postgresql_versions、实例数、主/副本负载均衡、连接池pooler及其负载均衡、卷大小Gi、storageClass、IOPS/Throughput、用户、数据库含 owner 选择、IP 白名单static_network_whitelist、NAT IP、odd host、CPU/内存的 requests/limits。其核心机制是基于 Handlebars 模板实时生成集群 YAMLsrc/new.tag.pugthis.yamlTemplate dedent kind: postgresql apiVersion: acid.zalan.do/v1 metadata: name: {{ name }} namespace: {{ namespace.state }} labels: team: {{ team }} spec: teamId: {{ team }} postgresql: version: {{ postgresqlVersion }} numberOfInstances: {{ instanceCount }} ... 每次表单字段变化都会触发this.on(update, ...)重新用Handlebars.compile渲染 YAML并通过Prism.highlightAll()高亮显示在左侧预览面板点击 Create cluster 时将 YAML 解析为 JSONPOST ./create-cluster提交src/new.tag.pug。页面还支持从备份克隆/clone/*/*/*路由根据backup_name/backup_uid/backup_timestamp预填clone.cluster、clone.uid、clone.timestamp字段实现按快照restore或按时间点pitr格式YYYY-MM-DDTHH:mm:ss.SSSZ还原。4.4 集群列表与状态页src/postgresqls.tag.pug 通过GET ./postgresqls拉取全部集群按当前用户团队my_clusters与其他团队other_clusters分组展示并提供搜索过滤表格列包含 Pod 数、CPU/内存requests/limits、卷大小、IOPS、Throughput 与月度成本估算。成本计算函数calcCostssrc/postgresqls.tag.pug使用config下发的cost_core、cost_memory、cost_ebs、cost_iops、cost_throughput、cost_elb、free_iops、limit_iops等定价参数公式为podcount * (MAX(core, memory) disk iops throughput) elb且对 IOPS/Throughput 超过免费额度3000/125的部分才计费src/postgresql.tag.pug 是集群状态页通过依次轮询./postgresqls/ns/namemanifest、./statefulsets/ns/nameStatefulSet、./statefulsets/ns/name/pods首个容器与spilo-rolemaster标签、./services/ns/nameDNS 地址来填充进度条与状态提示每 10 秒轮询一次setInterval(this.pollProgress, 10000)。若spec.enableConnectionPooler为真还会额外探测-pooler服务的 DNSsrc/logs.tag.pug 通过GET ./operator/clusters/ns/name/logs拉取并倒序展示集群日志按 panic/fatal/error/warning/info/debug 分级着色src/status.tag.pug 展示 Operator 各 worker 的队列大小GET ./operator/status并可进入/operator/worker/id/logs与/operator/worker/id/queue查看单个 worker 的日志与队列src/restore.tag.pug 提供备份浏览与克隆从./stored_clusters逐级加载版本versions与基础备份basebackups用 vis.js Timeline 展示备份时间线支持Clone at latest stateClone at this snapshot以及拖拽时间点的 PITR 克隆。五、构建产物如何被后端消费前端编译产物最终由 PythonFlask后端静态托管。其调用链如下构建产出npm run build将打包结果写入ui/operator_ui/static/build/app.js页面加载ui/operator_ui/templates/index.html 在第 178 行通过script src./js/build/app.js/script引入产物同时引入 jQuery、Riot、riot-route、Handlebars、moment、vis.js、clipboard.js 等 CDN 依赖静态路由ui/operator_ui/main.py 中/js/path:path与/css/path:path两个路由从static/目录发送文件并附加no-store等禁用缓存的响应头STATIC_HEADERS确保每次部署后浏览器都能拿到最新的前端产物后端 API前端调用的./config、./teams、./postgresqls、./create-cluster、./statefulsets、./services、./pooler、./stored_clusters、./operator/*等接口均定义在 ui/operator_ui/main.py 中其中./operator/*系列通过proxy_operator转发给 Operator 的 HTTP APIOPERATOR_API_URL默认http://postgres-operator。5.1 容器镜像中的多阶段构建ui/Dockerfile 展示了这套前端构建在正式发布流程中的用法——两阶段构建FROM $NODE_IMAGE AS build COPY . /workdir WORKDIR /workdir/app RUN npm install \ npm run build FROM $BASE_IMAGE ... COPY --frombuild /workdir/operator_ui/static/build/ operator_ui/static/build/ CMD [python, -m, operator_ui]第一阶段在node:lts-alpine中执行npm install npm run build与 README 的两条命令完全一致第二阶段基于python:3.11-slim运行 Flask 服务仅把operator_ui/static/build/从前一阶段拷贝进镜像——ui/app源码本身不进入最终镜像再次印证了only needed during build time。5.2 Makefile 中的等价流程ui/Makefile 的appjs目标用 Docker 容器隔离执行前端构建效果与本地命令等价appjs: docker run $(TTYFLAGS) -u $$(id -u) -v $$(pwd):/workdir -w /workdir/app node:lts-alpine npm install --cache /workdir/.npm docker run $(TTYFLAGS) -u $$(id -u) -v $$(pwd):/workdir -w /workdir/app node:lts-alpine npm run build --cache /workdir/.npm它挂载仓库根目录为/workdir在/workdir/app即ui/app中依次执行npm install与npm run build并通过-u $$(id -u)保持文件属主正确。之后docker目标会基于构建产物打出 UI 镜像mock目标则可在本地以--mock模式启动。六、开发工作流与注意事项6.1 推荐的本地开发流程首次构建在ui/app目录下执行npm install npm run build确认ui/operator_ui/static/build/app.js生成持续开发执行npm startwebpack 进入 watch 模式并启用 HMR源码保存即重编译终端会打印Begin compile at ...代码检查npm run lint使用 ESLint 检查src下 JS产物验证构建后通过python -m operator_ui或 Makefile 的docker目标启动后端访问首页确认./js/build/app.js正常加载。6.2 需要注意的细节NODE_ENV 语义当前build脚本固定以NODE_ENVdevelopment运行 webpack因此会生成inline-source-map并采用 development 模式若要产出压缩的 production bundle需要显式设置NODE_ENVproduction再运行 webpack产物清理npm run build经由prewebpack → clean自动删除并重建operator_ui/static/build不要手动改动该目录否则可能被下次构建覆盖开发模式 publicPathwatch 模式下publicPath为/静态资源按绝对路径解析production 下为./与 Flask 的./js/build/app.js相对引用匹配后端联调前端依赖的/config、/teams等接口由 ui/operator_ui/main.py 提供其关键环境变量READ_ONLY_MODE、SUPERUSER_TEAM、TARGET_NAMESPACE、OPERATOR_API_URL、OPERATOR_UI_CONFIG等的完整配置示例见 ui/manifests/deployment.yaml。七、小结Postgres Operator UI 的前端构建是一个构建期独立、运行时解耦的典型管线ui/app承载全部 ES6 源码与构建配置npm install安装依赖、npm run build产出operator_ui/static/build/app.js、npm start进入 watch 开发模式webpack 通过riot-tag-loaderPug 模板babel-loader把 10 个 Riot 标签与入口 src/app.js 编译成单一 bundle再由 Flask 后端 ui/operator_ui/main.py 静态托管最终以多阶段 Dockerfileui/Dockerfile打包发布。掌握这条链路后无论是本地开发 UI、定制页面功能还是在容器流程中重建前端都能做到有的放矢。赞分享云原生后端数据库运维【免费下载链接】postgres-operatorPostgres operator creates and manages PostgreSQL clusters running in Kubernetes项目地址https://gitcode.com/gh_mirrors/po/postgres-operator点击查看免费下载相关推荐Reactide与Webpack集成前端构建流程自动化详解Reactide与Webpack集成前端构建流程自动化详解 你是否还在为React项目的构建配置繁琐而头疼手动配置Webpack、处理热重载、管理资源文件这IDE桌面应用Sylius前端构建流程Webpack Encore与Sass/Less编译优化Sylius前端构建流程Webpack Encore与Sass/Less编译优化 Sylius作为基于Symfony的开源电商平台其前端构建系统采用Webp电商后端API网关Nginx UI 源码构建指南从源码手工编译前端与后端Nginx UI 源码构建指南从源码手工编译前端与后端 Nginx UI 是一个开源的 Nginx 可视化 Web 管理面板。当目标平台没有官方预编译版本或后端前端运维MCP 服务上一篇揭秘Binance Triangle Arbitrage核心算法三角套利计算原理与优化技巧下一篇DAVx⁵安全配置如何保护你的CalDAV/CardDAV数据创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考