移动端也能看实时日志Cabin实现Pod日志流与容器内exec命令的原理剖析【免费下载链接】cabinThe Mobile Dashboard for Kubernetes项目地址: https://gitcode.com/gh_mirrors/cab/cabinCabin 是一款 Kubernetes 移动端 Dashboard让你在手机上完成 kubectl 的大部分工作查看集群资源、实时查看 Pod 日志、以及在容器内执行 exec 命令。很多新手都会问手机真的能实时看日志吗本文结合源码用大白话剖析 Cabin 是如何实现 Pod 日志轮询与容器内命令执行的帮助你理解移动端运维的完整链路。为什么移动端看日志、执行命令是刚需传统上查看 Pod 日志、进入容器执行命令都要依赖命令行工具 kubectlkubectl logs pod-name -f跟踪日志kubectl exec -it pod-name -- sh进入容器执行命令而 Cabin 把这两件事搬到了手机上。点开 Pod 详情页就能一键查看日志、执行命令无需再掏笔记本电脑整体架构一个请求在 Cabin 里走了哪些路Cabin 基于 React Native 开发采用经典的「组件 → 动作 → 接口 → 数据仓库」四层数据流基于 Alt.js 框架。日志和 exec 功能共用这条链路PodsLogs 组件 → PodsActions → ClustersApi → BaseApifetch / WebSocket ↑ ↓ └── AltContainer 订阅 PodsStore ←──────────┘对应源码路径日志页面PodsLogs.js命令执行页面PodsExec.js动作层PodsActions.js接口层ClustersApi.js数据仓库PodsStore.js两条功能的实现方式截然不同下面分别拆解。Pod 日志的原理HTTP 轮询 自动刷新1. 调用的是 Kubernetes 原生日志接口日志功能的核心逻辑在 ClustersApi.js 的fetchPodLogs方法中请求路径/pods/{pod名称}/log关键参数container指定容器多容器 Pod 必选和tailLines: 100取最近 100 行这其实就是 kubectl logs 背后同一个 API只不过 Cabin 把它封装成了 HTTP GET 请求。2. 每 5 秒自动刷新一次模拟实时严格来说Cabin 的日志是轮询而非真正的流式推送。在 PodsLogs.js 中可以看到页面打开后立即拉取一次日志每次拉取完成后启动一个 5 秒定时器launchTimeout到点再次拉取用户点击右上角刷新按钮导航栏refresh图标可手动触发刷新这种「定时轮询 tail 日志」的方案对移动端非常友好——不用维持长连接省电又稳定。3. 细节体验多容器切换与日志高亮容器选择器Pod 有多个容器时顶部会显示容器下拉框PodsContainerPicker切换后自动重新拉取对应容器的日志不选则默认第一个容器见 PodsActions.js。日志时间戳加粗日志渲染时使用正则匹配常见时间戳格式并加粗快速定位异常时间点非常有用。自动滚动到底部onContentSizeChange监听内容高度内容超过屏幕就滚动到最新位置模拟kubectl logs -f的效果。日志结果最终存入 PodsStore.js 的logs字段按「集群地址 Pod UID」索引页面通过AltContainer订阅自动重渲染。容器内 exec 命令的原理WebSocket 流式通道exec 比日志复杂得多因为它需要一条双向、实时的通道这正是 WebSocket 的用武之地。1. 把输入的命令拼成 exec 请求在 ClustersApi.js 的execPodCommand中用户输入的命令按空格拆分成参数数组例如输入ls -la变成[ls, -la]通过BaseApi.websocket建立到/pods/{pod名称}/exec的 WebSocket 连接并把container和command拼在 URL 参数里2. WebSocket 连接如何打通集群的 TLS 认证这是移动端最棘手的一环Kubernetes API Server 通常启用了 TLS 证书认证而 JS 层的 WebSocket 无法携带自定义请求头。Cabin 的解法是用原生代码重写 WebSocket 模块Android 端CabinWebsocketModule.java 基于 OkHttp 实现覆盖 React Native 默认的 WebSocket 模块支持auth-certificate等自定义 HeaderiOS 端RCTSRWebSocketSSL.m 为 WebSocket 添加 SSL 证书支持在 BaseApi.js 的websocket方法中连接时会把集群的证书路径和密码放入请求头同时所有收到的消息onmessage会被累积成一个列表连接关闭后整体返回。3. 消息解析与结果展示智能解析响应数据readData先尝试按 JSON 解析K8s 的 exec 协议消息是 JSON 信封失败则按二进制字符串处理兼容两种格式结果累积PodsStore.js 的onExecPodCommandSuccess会把每次执行的输出追加到该 Pod 的消息列表中连续执行多条命令时终端历史不会丢失终端式交互PodsExec.js 底部是命令输入框 Execute 按钮执行期间显示加载动画键盘弹出时输入框还会用动画自动上移Animated.View不会遮挡终端输出两种方案对比轮询 vs 长连接维度Pod 日志容器 exec通信方式HTTP GET 轮询WebSocket 长连接实时性约 5 秒延迟毫秒级流式连接开销每次请求即断开执行期间保持连接实现复杂度低普通 HTTP 即可高需原生层改造 TLS对应 kubectlkubectl logstailkubectl exec这个对比很能说明问题读取类数据用轮询交互类数据用长连接——移动端做云原生工具时的经典取舍。上手体验从添加集群到执行命令添加集群在首页添加你的 Kubernetes 集群Token 或证书认证GKE 用户甚至可以直接在手机上创建集群找到 Pod进入集群 → 选择命名空间 → 打开 Pods 列表点击任意 Pod 进入详情查看日志Pod 详情页点「Logs」日志自动加载并每 5 秒刷新多容器 Pod 可切换容器执行命令点「Exec」在底部输入如ls -la、cat /etc/hostname按 Execute 查看输出写在最后Cabin 虽然项目已进入维护期但它演示的「移动端 Kubernetes」架构依然值得学习日志功能证明了轮询 tail 日志在移动端完全可用简单可靠exec 功能展示了如何通过重写原生 WebSocket 模块解决移动端的 TLS 认证难题数据流清晰组件触发 ActionAPI 层统一处理认证与请求Store 集中管理状态页面自动响应如果你是 K8s 新手可以从 PodsShow.js 入手读源码——那里就是「日志」和「Exec」两个功能的入口顺着调用链走一遍移动端云原生开发的套路就通了。【免费下载链接】cabinThe Mobile Dashboard for Kubernetes项目地址: https://gitcode.com/gh_mirrors/cab/cabin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考