kubeapps -kubernetes 应用仪表盘

Posted 2023-04-17

参考技术A 1.介绍
什么是kubeapps?
Kubeapps是Bitnami公司的一个项目，其目的是为Kubernetes的使用者们提供已经打包好的应用仪表盘，它拥有网页界面可以更方便的部署和管理k8s 原生应用。

kubeapps功能说明：
应用仪表盘-包含绝大多数的云原生应用

管理应用-部署，删除，升级以及修改配置

2.安装kubeapps
下面我演示下如何安装kubeapps并使用kubeapps来部署kubernetes 应用。
2.1 安装Helm
curl -fsSL -o get_ helm.sh https://raw.githubusercontent.com/helm/helm/master/scripts/get-helm-3
chmod 700 get_helm.sh
./get_helm.sh

2.2 helm3添加Bitnami Repository
使用Helm chart来安装最新版本的Kubeapps:
helm repo add bitnami https://charts.bitnami.com/bitnami
2.3 安装Kubeapps
如果你使用 Helm 3, 你需要设置另外的参数，详细命令如下：
kubectl create namespace kubeapps
helm install --name kubeapps --namespace kubeapps bitnami/kubeapps（该命令仅支持helm2）
helm install kubeapps --namespace kubeapps bitnami/kubeapps --set useHelm3=true

2.4 创建 Kubernetes API token
访问kubeapps的web界面需要Kubernetes API token 来验证Kubernetes API server.
kubectl create serviceaccount kubeapps-operator
kubectl create clusterrolebinding kubeapps-operator --clusterrole=cluster-admin --serviceaccount=default:kubeapps-operator
注意：生产环境不建议创建cluster-admin 用户. 请参考Access Control 文档来给生产环境配置合适的用户.
2.5 获取Token
Linux/macOS 系统可以使用如下命令来获取Token:
kubectl get secret $(kubectl get serviceaccount kubeapps-operator -o jsonpath='range .secrets[*].name"\n"end' | grep kubeapps-operator-token) -o jsonpath='.data.token' -o go-template='.data.token | base64decode' && echo

2.6 修改访问模式并访问kubeapps
编辑kubeapps服务svc 将连接类型改为NodePort
kubectl edit svc kubeapps -n kubeapps

看下服务所用端口；

然后打开浏览器输入node的ip加上32024端口则可以访问kubeapps；输入获取的Token就可以直接登录进去。

登录kubeapps之后在catalog之中可以发现有好多已经打包的原生应用可以一建部署。

譬如选择grafana，有bitnami以及官方stable的包；

这里我选择bitnami的应用包，进去之后点击Deploy

应用就部署完了。

使用kubectl edit svc crazy-jail-grafana -n kubeapps 来修改外网访问类型为NodePort

修改完成后，使用命令kubectl get svc -n kubeapps 查看grafana 服务的外部访问端口。

浏览器访问node的ip加30647端口。

Github
https://github.com/kubeapps/kubeapps

.NET 仪表板应用程序的可能性

【中文标题】.NET 仪表板应用程序的可能性

【英文标题】：.NET Possibilities for a Dashboard Application

【发布时间】：2017-11-15 06:26:24

【问题描述】：

我的情况如下：

我正在创建一个仪表板框架，我想在其中开发多个应用程序。每个应用程序都应该有自己的视图（HTML 和 JS）、模型（当前使用 EF6）和 MVC 控制器。最好全部包含在一个文件夹中。

仪表板可以在其页面上多次使用相同的应用程序，但设置不同。这些设置存储在为此类应用程序的实例分配 UID 的 DB 中。例如：假设我有一个 HTMLContainer 应用程序。此应用程序应根据给定设置替换其内部 html。 HTML & JS 看起来像这样：

$('#htmlContainer').innerHTML = "This value would be retrieved from a .NET server/controller based on a certain UID which should be given to this 'component' when instantiated.";

<div id="htmlContainer">This should be replaced based on the settings retrieved</div>

由于我们想要一个仪表板，我们需要能够在同一页面上多次使用相同的 HTMLContainer。

这带来了两个挑战：

我们应该能够通过向其添加某种 UID 来使 id="htmlContainer" 独一无二。例如，ID 将变为“htmlContainer-1384”。这可以通过更改渲染器中的某些内容来完成，例如选择 ASP.NET MVC。

下一个挑战是我最挣扎的挑战。由于 HTML 的 ID 会发生变化，因此附加到 HTML 的 JS 将不再起作用。我们需要一种方法来保持该 HTMLContainer 应用程序的 JS 范围。这就是我现在卡住的地方。

我还没有找到支持这种行为的 ASP.NET 框架，而无需自定义该框架的许多核心功能。

我真的想知道是否有人可以帮助我，并且可能有使用 ASP.NET 框架创建仪表板和仪表板应用程序的经验。我特别想要一个 ASP.NET 框架的原因是因为我目前使用的很多外部库都是在 .NET 中的。

如果我需要添加更多信息以说明我的情况，请告诉我。

提前谢谢你。

【问题讨论】：

您是否致力于从头开始构建自己的框架？我建议使用成熟的前端框架，例如 Angular，并从 .Net Api 控制器中提取渲染内容所需的任何数据。

不错的建议。我们目前尝试使用 ASP.NET Web API 2 后端来制作 Angular 2 前端。不幸的是，这导致后端与前端分离。通常这是一件好事，但我们希望在一个文件夹中维护一个组件/应用程序的所有必要文件。这意味着这个解决方案将不是我们想要的。此外，这个解决方案需要我们的开发人员有一定的学习曲线来学习 Angular 2 和 typescript。这就是为什么我们正在尝试探索不同的可能解决方案。

使用 HTML 类，即.htmlContainer，而不是#htmlContainer-1384。 ID 必须是唯一的，但 HTML 类的全部意义在于将样式或行为应用于一组相似的事物。或者，如果您坚持使用 id，则始终可以使用以选择器开头的属性：[id^=htmlContainer]，这将捕获任何具有以 htmlContainer 开头的 id，即 #htmlContainer-1234 和 #htmlContainer-5678。

FWIW，不过，我在上一条评论中提到的东西就像 HTML 101。如果您不知道 ，那么从头开始创建一个完整的仪表板框架是可能过于雄心勃勃。

使用类不是一个选项。我再举一个例子：假设您有两个具有相同基本代码的应用程序。该应用程序有一个标签元素，其中包含一个数字（例如从一开始就为 0）和一个按钮。单击按钮时，标签元素内的数字应增加一。假设您的页面上有两个这样的应用程序。相同的基本代码，相同的应用程序。我现在想防止当我单击一个实例上的按钮时，它会影响另一个实例。这就是为什么我需要一个 UID 来区分这些实例。因此，类并不是真正的选择

【参考方案1】：

您可以通过面向对象的 Javascript 实践来做到这一点。您将只有一个应用程序具有同一类的多个实例。

创建一个跟踪自身实例数量的类，并使用该实例 ID 为每个需要它的元素设置 UID。

看起来像这样：

// private static
var nextId = 0;

// constructor
function MyComponent(element) 
    if (!(this instanceof MyComponent)) return new MyComponent();

    // private        
    var id = nextId++; //component instance ID
    var divId = 'div-id-' + id;
    var spanId = 'span-id-' + id;

    function renderUniqueComponent(sender, args)
        var el = document.getElementById(element);
        var data = getDataFromServer();

        el.innerHTML += '<div id=' + divId + '>'
                            + '<span id=' + spanId + '>'
                                + data
                            + '</span>'
                      + '</div>';
    

    function getDataFromServer()
       //make an Ajax call to your API
    

;

这将为每个元素呈现具有唯一 ID 的相同组件，并生成从您的 api 检索到的唯一内容。

您应该每页只加载一次此文件，并为您需要的每个组件实例调用它的构造函数，并传入要在其中呈现新组件的目标元素的元素引用。