大数据流处理批处理数据工程【免费下载链接】flink项目地址https://gitcode.com/gh_mirrors/fli/flink点击查看免费下载本文以 flink-runtime-web/README.md 为主体结合仓库源码讲解 Apache Flink 新一代运行时监控 Web 控制台Web Dashboard的架构、构建、开发与调试流程。你将掌握Dashboard 后端基于 Netty 的启动与请求分发机制、前端 Angular 工程的目录与页面结构、从零搭建构建环境并完成本地开发联调的完整命令链以及 Web 服务端口等核心配置项的底层实现。Dashboard 是什么新一代 Flink 运行时监控面板Apache Flink 的 Web Dashboard 是面向运行时的监控前端它内嵌于 JobManager 进程监听http://localhost:8081同时对外提供 REST 风格的 API 来访问单个 Job 的状态。按 README 的定位它是对既有 Web 面板的演进版重点补齐以下能力Live progress monitoring基于 live accumulators 实现作业执行进度的实时监控Graph view of the program以有向图形式可视化作业实际执行拓扑A REST style API通过 REST 接口访问单个作业的状态信息A more modular design前后端均采用更模块化的设计。从目录结构看该模块包含两部分flink-runtime-web/src/main/java下的 Java 后端HTTP 服务器 REST 处理器以及flink-runtime-web/web-dashboard下的 Angular 前端工程。整体架构Angular 前端 Netty 后端Dashboard 采用前后端分离的模块化设计后端由 Netty 提供 HTTP 服务能力前端使用 Angular 构建两者通过 REST 接口通信Server Backend基于 Netty 实现 HTTP 服务器并用 Netty Router 完成 REST 路径路由依赖非常轻量Dashboard Frontend基于 Angular 实现构建基础设施使用 node.js 与 npm最终构建工具为angular/cli。从 flink-runtime-web/pom.xml 可以看出后端的依赖构成flink-runtime与flink-clients提供 Flink 运行时能力flink-shaded-netty、flink-shaded-guava、flink-shaded-jackson则提供 Web 服务器所需的 Netty、集合工具与 JSON 序列化支持整体依赖面确实很轻。后端原理Netty 启动与请求管线服务器启动WebFrontendBootstrap后端服务器由 WebFrontendBootstrap.java 引导启动。该类封装了 Netty 的完整启动过程见 WebFrontendBootstrap.java#L110-L147关键点包括使用ServerBootstrapNioEventLoopGroup一个 boss 线程组 一个 worker 线程组构建 NIO 服务可通过configuredAddress/configuredPort指定绑定地址与端口支持可选的 SSL 工厂SSLHandlerFactory启用时 SSL handler 会排在 Netty pipeline 的最前面pipeline 依次为HttpServerCodecHTTP 编解码→HttpRequestHandler处理文件上传→FlinkHttpObjectAggregator聚合 HTTP 消息受rest.server.max-content-length限制→ChunkedWriteHandler分块写出→RouterHandlerREST 路由分发→PipelineErrorHandler统一错误处理启动成功后通过ServiceLoader加载可插拔的InboundChannelHandlerFactory并按优先级排序注入 pipeline这是模块化设计的体现服务启动日志为 Web frontend listening at ...并对外暴露getRestAddress()与getServerPort()供上层使用。请求处理与 JAR 上传HttpRequestHandlerHttpRequestHandler.java 位于 pipeline 的 HTTP 编解码层之后负责分流所有 HTTP 请求见 HttpRequestHandler.java#L110-L172GET / DELETE 请求直接交给下游的 Router handler 处理POST 请求通过HttpPostRequestDecoder解析 multipart 表单识别文件上传项将上传文件以UUID_文件名形式存入上传目录默认flink-web-upload并在重写后的 URI 上追加filepath、filename查询参数后转发给下游其余 HTTP 方法如 PUT会被视为不支持的请求抛出异常。此外该方法对上传目录有自愈逻辑当上传目录被外部删除时会告警并自动重建checkAndCreateUploadDir保证 Web UI 提交作业功能在目录丢失后仍可用。REST 处理器以 Jar 提交链路为例后端把所有 REST 端点组织在org.apache.flink.runtime.webmonitor.handlers包下README 建议新增加处理器时以JobSummaryHandler为模板。以 Web UI 提交作业链路为例源码中对应一组完整的 Handler Headers MessageParameters 三元组JarUploadHandler接收上传的.jar文件严格校验扩展名并以UUID_文件名落入 JAR 目录见 JarUploadHandler.java#L71-L100JarListHandler / JarDeleteHandler列出已上传 JAR、删除指定 JARJarPlanHandler获取作业执行计划PlanJarRunHandler真正提交作业内部通过ApplicationRunnerEmbeddedExecutor执行将DeploymentOptions.ATTACHED置为 false 实现异步提交并支持 savepoint 恢复设置见 JarRunHandler.java#L88-L110JarRunHeaders定义了 REST 端点为POST /jars/:jarid/run见 JarRunHeaders.java#L62-L64operationId 为submitJobFromJarJarRunMessageParameters声明了allowNonRestoredState、savepointPath等查询参数对应从 savepoint 恢复作业时的行为控制见 JarRunMessageParameters.java#L30-L46。同时history子包下的 HistoryServer.java 等类实现历史服务器用于在作业运行结束后仍可回看其运行信息属于该模块的扩展能力。前端工程Angular 目录结构与页面模块前端代码位于 flink-runtime-web/web-dashboard/src构建产物输出到web目录。从src/app下的结构可以看出清晰的模块化组织pages/按页面划分包括 overview集群概览统计、job作业详情含 checkpoints、backpressure、watermarks、flamegraph、timeline、exceptions、dataskew、configuration、subtasks、taskmanagers、accumulators 等子视图、job-managermetrics、log、stdout、thread-dump、profiler、task-manager、submit提交新作业等components/可复用组件如 dagre作业拓扑图渲染、job-chart指标曲线图、job-list作业列表、flame-graph火焰图等services/封装 REST 客户端如 job.service.ts、task-manager.service.ts、overview.service.ts、status.service.ts 等interfaces/定义与后端 REST 响应对应的 TypeScript 类型如 job-detail.ts、task-manager.ts、jar.ts 等。主布局 app.component.html 展示了实际的导航结构侧边栏包含 Overview、JobsRunning Jobs / Completed Jobs并依据historyServerEnv是否历史服务器环境与webSubmitEnabled是否开启 Web 提交动态显示 Task Managers、Job Manager 与 Submit New Job 入口顶栏实时展示 Flink 版本flink-version、Commit 号flink-revision并在连接断开时提示 Lost Connection, Reconnecting Now... 并自动重连——这与后端 live monitoring 的定位是一致的。构建环境准备构建 Dashboard 前端需要 node.js。不同平台的准备方式对应 README 原文Ubuntu Linux通过 nodejs 官方下载页安装 node.js然后用node --version验证版本不低于10.9.0MacOS先安装 brew再执行brew install node。当前仓库的 web-dashboard/package.json 对工具链版本要求更高angular/cli为 14.x、TypeScript 为 ~4.8.4因此实际开发时应使用能兼容 Angular 14 的新版 Node14.x 及以上长期支持版本README 中的 10.9.0 是撰写时点的最低要求请以当前工程实际依赖为准。构建流程前端构建依赖 npm 自动下载所有第三方库最终由angular/cli完成打包。从仓库根目录执行cd flink-runtime-web/web-dashboard npm install npm run build其中npm run build实际执行的是ng build --configuration production --base-href ./见 package.json即生产模式构建且使用相对路径作为 base href便于嵌入到 Flink 的 Web 服务下。源码位于src目录构建结果输出到web目录。开发调试变更后重编译与代理服务器手动重编译流程开发阶段每次改动前端后需要重新编译并让服务器感知新资源cd flink-runtime-web/web-dashboard npm run build cd ../../flink-dist mvn -DskipTests clean package即先产出新的前端静态资源再重新打包flink-dist使改动进入最终发行包。独立代理服务器推荐为简化持续开发README 推荐使用独立代理服务器配合自动重编译避免每次改动都重打包整个发行包启动代理服务器npm run proxy。该命令执行ng serve --proxy-config proxy.conf.json由 Angular CLI 的开发服务器承载前端并把 API 请求代理到后端通过浏览器访问http://localhost:4200即可实时预览页面。代理目标配置在 proxy.conf.json 中默认将所有请求代理到http://localhost:8081即本地 JobManager 的 Web/REST 端口字段context为[/]、secure为 false。开发时如需对接远程集群直接修改该文件的target即可。代码规范与静态检查项目通过 ESLintTypeScript/HTML StylelintLess两套工具保障代码风格提交前必须保证检查通过$ npm run lintlint脚本内容为eslint --cache src --ext .ts,.html stylelint **/*.less见 package.json。此外npm run lint:fix自动修复可修复的格式问题npm run lint-staged仅对暂存区的变更文件执行 lint 与 autofixREADME 明确建议提交前运行它且确保无报错npm run ci-check依次执行 lint 与 build用于 CI 流水线。服务端口与相关配置项Dashboard 默认监听http://localhost:8081这在底层配置中由flink-core的 RestOptions.java 定义见 RestOptions.java#L96-L107。与之相关且影响 Web 服务的常用配置包括配置键默认值说明rest.port8081客户端连接 REST 服务的端口也是rest.bind-port未指定时服务器绑定的端口rest.bind-port8081服务器实际绑定端口支持列表50100,50101、范围50100-50200或组合写法多实例同机部署时可避免端口冲突rest.address/rest.bind-address无默认值客户端连接地址 / 服务器绑定地址仅在 HA 配置为 NONE 时生效rest.server.max-content-length104857600100 MB服务器处理的最大请求体长度直接影响 JAR 上传的体积上限见 RestOptions.java#L170-L177rest.server.numThreads4请求异步处理线程数rest.retry.max-attempts20客户端重试次数其中rest.bind-port与rest.port均保留了jobmanager.web.port等旧键作为 deprecated 回退键保证老配置迁移兼容。后端启动代码在 WebFrontendBootstrap.java 中通过config.get(SERVER_MAX_CONTENT_LENGTH)读取上传体上限体现了配置与 pipeline 的联动关系。前端依赖一览前端核心依赖集中在 web-dashboard/package.json注意 README 撰写时点之外本仓库已升级到 Angular 14 系列框架Angular14.2.x含 animations、common、forms、router 等模块CLI 工具Angular CLI14.2.xUI 组件NG-ZORROng-zorro-antd 14.1.x提供 nz-menu、nz-layout、nz-table、nz-drawer 等 Ant Design 风格的组件图表与可视化antv/g2指标曲线、d3 / d3-flame-graph火焰图、dagre作业拓扑图布局其他monaco-editorSQL/代码编辑器、rxjs、zone.js 等。小结通过 README 与源码对照可以看出flink-runtime-web 是一套完整的Angular 前端 Netty 后端监控子系统后端由WebFrontendBootstrap引导、RouterHandler路由、各*Handler承载 REST 端点前端由 Angular 组织多页面模块并通过服务层消费 REST API。开发者在本地只需三步即可进入迭代npm install安装依赖 →npm run proxy启动代理开发服务器默认对接localhost:8081→ 访问localhost:4200实时预览提交前运行npm run lint-staged保证代码风格合规。若需扩展后端接口参照org.apache.flink.runtime.webmonitor.handlers包内 Handler/Headers/MessageParameters 的组合模式即可快速落地。赞分享大数据流处理批处理数据工程【免费下载链接】flink项目地址https://gitcode.com/gh_mirrors/fli/flink点击查看免费下载相关推荐Apache Flink Web UI详解任务监控与性能分析工具Apache Flink Web UI详解任务监控与性能分析工具 概述 Apache Flink Web UIWeb用户界面是Flink提供的可视化监控工大数据流处理批处理数据工程Apache Flink 生产代码架构测试flink-architecture-tests-production实战指南Apache Flink 生产代码架构测试flink architecture tests production实战指南 导读 本指南围绕 Apache F大数据流处理批处理数据工程Octant Web界面开发Angular前端架构深度解析Octant Web界面开发Angular前端架构深度解析 Octant是一个高度可扩展的平台帮助开发者更好地理解Kubernetes集群的复杂性。作为一款云原生后端前端运维可观测性开发工具上一篇CompressO视频压缩工具本地化处理方案与技术爱好者的高效选择下一篇VinXiangQi象棋连线工具5个步骤快速上手基于YOLOv5的智能象棋助手创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考