gin模板展示k8s命名空间的资源

  • 这里学习如何在前端单页面,调用后端接口展示k8s的资源

技术栈

  • 后端 -> go -> gin -> gin模板
  • 前端 -> gin模板 -> html + js
  • k8s -> k8s-go-client ,基本资源(deployment等)

环境

  • go 1.19
  • k8s 1.23
  • go module
    • github.com/gin-gonic/gin v1.6.3
    • k8s.io/client-go v0.20.2

搭建环境

  • 安装 k8s 、go 开发环境(此处省略)
  • ide打开后创建项目(我的项目名叫gin_k8s_deploy),然后安装go module
go get github.com/gin-gonic/gin@v1.6.3
go get k8s.io/client-go@v0.20.2
  • 复制k8s的kubeconfig(/root/.kube/config)到项目
    • 注:假如是公网的环境,需特别处理。假如是内网(虚拟机等)可以直连的情况则无需处理
      在这里插入图片描述
  • 以下是公网k8s的kubeconfig的处理,将里面的内网ip换成公网ip(因为你无法通过内网ip直连),并且ca认证这行删除
    在这里插入图片描述

后端

  • 初始化k8s的客户端
    • client/K8sClient.go
package client

import (
	"k8s.io/client-go/kubernetes"
	"k8s.io/client-go/tools/clientcmd"
	"log"
)

func InitK8sClient() *kubernetes.Clientset {
	config, err := clientcmd.
		BuildConfigFromFlags("", "config")
	if err != nil {
		log.Fatal(err)
	}
	// config.Insecure 假如k8s是内网可以走https则不需要设置
	config.Insecure = true

	clientset, err := kubernetes.NewForConfig(config)
	if err != nil {
		log.Fatal(err)
	}
	return clientset
}

在这里插入图片描述

  • main.go 添加 k8sClient (可运行测试一下,能返回对象即成功)
package main

import (
	"fmt"
	"gin_k8s_deploy/client"
)

func main() {
	k8sClient := client.InitK8sClient()
	fmt.Println(k8sClient)
}

使用gin作为web后端

  • main.go
package main

import (
	"fmt"
	"gin_k8s_deploy/client"
	"github.com/gin-gonic/gin"
)

func main() {
	k8sClient := client.InitK8sClient()
	fmt.Println(k8sClient)
	// gin实例
	r := gin.New()
	// 加载html模板
	r.LoadHTMLGlob("templates/*")
	// 后端返回页面
	r.GET("/", func(c *gin.Context) {
		c.HTML(200, "index.html", gin.H{"data": "success"})
	})
	// 运行
	r.Run(":8080")
}

  • templates/index.html (此处渲染gin的 “data”)
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
{{ .data }}
</body>
</html>
  • 运行main.go,并测试访问首页 http://localhost:8080
    在这里插入图片描述

编写gin请求k8s的接口

  • 以下是gin请求k8s namespace api的接口
    • main.go
// k8s 命名空间 接口
	r.GET("/ns", func(c *gin.Context) {
		// namespace 在 k8s 的核心(core)api组
		ns, err := k8sClient.
			CoreV1().Namespaces().
			List(context.Background(), metav1.ListOptions{})
		if err != nil {
			log.Fatal(err)
		}
		nsRet := make([]string, 0)
		for _, nsItem := range ns.Items {
			nsRet = append(nsRet, nsItem.Name)
		}
		c.JSON(200, gin.H{"ns_list": nsRet})
	})
	
  • 请求测试 (运行如报错请 go mod tidy )
    在这里插入图片描述
  • gin请求k8s deployment api的接口
	// k8s deployment 接口
	r.GET("/:ns/deployment/list", func(c *gin.Context) {
		ns := c.Param("ns")
		// deployment在k8s的 appsv1 api组
		deployment, err := k8sClient.
			AppsV1().Deployments(ns).
			List(context.Background(), metav1.ListOptions{})
		if err != nil {
			log.Fatal(err)
		}
		deploymentRet := make([]string, 0)
		for _, item := range deployment.Items {
			deploymentRet = append(deploymentRet, item.Name)
		}
		c.JSON(200, gin.H{"deployment_list": deploymentRet})
	})
  • 请求测试
    在这里插入图片描述

前端

  • 前端使用Promise与后端交互
  • index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 调用后端 /ns 接口,返回ns的数组
        function getK8sNsList() {
            return fetch("/ns", {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                }
            }).then(response => {
                return response.json()
            }).then(data => {
                return data.ns_list
            })
        }
        // 使用dom将ns数组的值保存到select框中的option
        function displayK8sNsList(ns_list) {
            ns_list.forEach(ns => {
                var ele = document.getElementById("selectNs")
                var option = document.createElement("option")
                option.name = ns
                option.value = ns
                option.text = ns
                ele.add(option)
            })
        }
        // 获取后端 /ns 返回的第一个命名空间
        function getFirstK8sNsList() {
            return fetch("/ns", {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                }
            }).then(response => {
                return response.json()
            }).then(data => {
                return data.ns_list[0]
            })
        }
        // 调用后盾 /deployment/:ns/list 接口,返回deployment数组
        function getK8sDeployments(ns) {
            return fetch("/deployment/" + ns + "/list", {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                }
            }).then(response => {
                return response.json()
            }).then(data => {
                return data.deployment_list
            })
        }
        // 
        function displayK8sDeploymentList(deployment_list) {
            var ele = document.getElementById("deployment_list")
            deployment_list.forEach(deployment => {
                var li = document.createElement("li")
                li.textContent= deployment
                ele.appendChild(li)
            })
        }
        // select框选中其他值时进行请求
        function onNamespaceChange() {
            var selectedNs = document.getElementById("selectNs").value;
            var deploymentList = document.getElementById("deployment_list");
            while (deploymentList.firstChild) {
                deploymentList.removeChild(deploymentList.firstChild);
            }
            getK8sDeployments(selectedNs).then(deployment_list => {
                displayK8sDeploymentList(deployment_list)
            })
        }
    </script>
</head>
<body>
<div class="header">
    <h1>K8s面板</h1>
    <p style="display: inline-block">请选择命名空间: </p>
    <select name="selectNs" id="selectNs" onchange="onNamespaceChange()">
    </select>
</div>
<div class="content">
    <p>deployments</p>
    <ul id="deployment_list">
    </ul>
</div>
<script>
    // select框中填充ns数组
    getK8sNsList().then(ns_list => {
        displayK8sNsList(ns_list)
    })
    // 首先打印第一个命名空间的deployments
    getFirstK8sNsList().then(ns => {
        getK8sDeployments(ns).then(deployment_list => {
            displayK8sDeploymentList(deployment_list)
        })
    })
</script>
</body>
</html>

效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Logo

K8S/Kubernetes社区为您提供最前沿的新闻资讯和知识内容

更多推荐