5 分钟内从 Helm Chart 到开发人员 UI

2025-06-04

5 分钟内从 Helm Chart 到开发人员 UI

Helm 很棒……
直到你把它交给开发人员。

事实上,Helm 是为了解 Kubernetes 的人打造的。作为一名 DevOps 工程师,你可以定义复杂的部署,管理特定于环境的配置,并通过模板复用逻辑。太棒了。

但对于大多数开发者来说,Helm Chart 只是令人困惑。Helm 要求开发者具备一定程度的 Kubernetes 熟练度,而许多开发者根本不具备。这没关系。他们应该专注于构建和交付产品,而不是担心底层基础设施。

然而,这会造成摩擦,因为开发人员在每一个小的更改和部署上都过度依赖 DevOps 工程师。

Helm很棒,只是作为用户界面不太好。

但让我们解决这个问题!在这篇文章中,我将向您展示如何将任何Helm 图表转换为开发人员(甚至非技术人员)可以实际使用的简单 UI。整个过程不会超过 5 分钟。

预备,开始⏳

#1 独眼巨人👁️

Cyclops是一款开源工具,可让您基于 Helm Chart 构建内部开发者平台。简单来说,您导入一个 Helm Chart根据该 Chart生成一个 UI 。

从那里,开发人员可以使用此 UI 来配置、部署和管理在 Kubernetes 集群中运行的应用程序。

设置过程非常简单,只需两个命令即可开始。您可以在我们的网页或代码库中找到它,但我也把它放在这里以便于访问:

kubectl apply -f https://raw.githubusercontent.com/cyclops-ui/cyclops/v0.18.2/install/cyclops-install.yaml && 
kubectl apply -f https://raw.githubusercontent.com/cyclops-ui/cyclops/v0.18.2/install/demo-templates.yaml
Enter fullscreen mode Exit fullscreen mode

要访问 cyclops-ui,您只需转发其服务即可,但对于生产用途,您可以通过入口或负载均衡器公开它。

kubectl port-forward svc/cyclops-ui -n cyclops 3000:3000
Enter fullscreen mode Exit fullscreen mode

您现在可以通过http://localhost:3000/访问 Cyclops

当您访问我们的代码库时,请考虑给我们点个星标!
⭐  在 GitHub 上为 Cyclops 点个星标

#2 获取你的 Helm 图表🗃️

你可能有一些 Helm chart 可用;它们就足够了。如果没有,你可以用我的!我已经用命令创建了一个 chart ,目前还helm create没有做任何修改

让我们花点时间仔细看看这张图表。它包含 5 个资源:部署、服务、服务帐户、入口和水平 Pod 自动扩缩器。HPA 和入口默认处于禁用状态,但您可以在 中将其启用values.yaml

这里的值文件非常小,但是,即使这只是“默认”的 Helm 图表,也足以让大多数开发人员望而却步。

my-chart/
├── Chart.yaml                   # Metadata about the chart (name, version, etc.)
├── values.yaml                  # Default configuration values
├── **values.schema.json**           # Generated from the values.yaml
├── templates/               
│   ├── deployment.yaml
│   ├── hpa.yaml                 # Off in default values
│   ├── serviceaccount.yaml.  
│   ├── service.yaml
│   ├── ingress.yaml             # Off in default values 
└── .helmignore              
Enter fullscreen mode Exit fullscreen mode

我将使用并试用该图表,但您可以对任何现有图表执行相同的操作。

我将在 chart 中添加一项内容——一个 schema 文件。虽然我的 Helm chart 没有附带 schema 文件,但你的 chart 可能已经有了(你可以在上面的结构中看到它values.schema.json)。我自动生成了我的schema 文件,并删除了不需要的多余行。你可以在这里看到最终版本。

#3 魔法🧚

现在到了有趣的部分。

如果你已经设置好了 Cyclops,请在浏览器中打开它。你会看到一个空白的“模块”页面,但我们首先应该转到“模板”选项卡。

开箱即用,Cyclops 附带了一堆模板来帮助您入门,但让我们添加自己的模板,以便我们可以使用它。

单击Add template reference按钮并输入字段,使其指向您的 Helm 图表。

⚠️ 如果您使用的是存储在私有存储库中的 Helm 图表,则可以在此处找到 如何启用访问权限⚠️

新模板

添加图表后,返回“模块”选项卡。它仍然是一个空白屏幕,但让我们使用新模板来部署模块!

部署模块的第一步是选择模板。在下拉菜单中找到您导入的模板并点击它。还记得value.schema.json之前的吗?这正是 Cyclops 用来渲染 UI 的。

模板-1

如您所见,此处的字段与 中定义的字段相关value.schema.json。更改 Helm Chart 中的架构(例如删除此处的几个字段)也会导致 UI 发生变化。

模板-2

不过,Cyclops 不仅仅是 Helm Charts 漂亮的 UI。填写模板渲染的表单后,即可将其部署为模块!Cyclops 可以直接部署到集群,或者,如果您更喜欢 GitOps,也可以将配置推送到 git。最终目标是相同的:您将使用 UI 中提供的值将 Helm Chart 部署到集群。

模块

从这里,开发人员可以轻松访问他们可能需要的一切:重新启动他们的应用程序,访问他们的日志,检查他们的状态,编辑配置等等……

你是一名平台工程师,Harry🧙‍♂️

虽然 Helm Chart 可能让大多数开发者望而却步,但简洁的 UI 会更受欢迎。通过抽象 Kubernetes 的复杂性,并仅通过 UI 显示相关的配置选项,您为开发者提供了更安全、更快速、更自主的工作流程。

无需再为了例行变更而反复与 DevOps 沟通。也无需再为了学习 Helm 而频繁切换环境。相反,开发者将获得精简、专注的体验,从而自信地交付代码。这就是平台工程的核心理念:提供标准化、自助式的基础设施,赋能开发团队。

如果您想了解有关平台工程和构建内部开发者平台的更多信息,请加入我们的Discord 社区并与我们交谈!

⭐  GitHub 上的 Star Cyclops

文章来源:https://dev.to/cyclops-ui/from-helm-chart-to-developer-ui-in-5-minutes-5ff
PREV
有兴趣为开源做贡献吗?以下是你需要知道的
NEXT
🎀 五种工具让您的 K8s 体验更加愉快 🎀