文章目录

  • 简介
  • 一.环境安装
  • 1.1.安装golang
  • 1.2.安装beego环境下的工具bee
  • 1.3.下载layuimini模板
  • 二.创建项目
  • 2.1.用bee命令创建项目
  • 2.2.配置静态访问地址
  • 三.实现客户端连接clientset
  • 四.修改前端代码,实现初步的显示框架
  • 4.1.修改菜单配置
  • 4.2.控制端主页代码
  • 五.调试代码
  • 5.1.用liteide编辑器调试代码
  • 5.2.修改beego的配置文件
  • 5.3.编译调试启动
  • 5.4.浏览器打开


简介

该篇文章主要是《k8s集群管理平台开发实践》的开发环境的准备工作,安装golang、ide环境,下载必须的文件及软件包,并通过client-go实现连接部分clientset的功能连接到k8s。

一.环境安装

1.1.安装golang

golang下载地址:https://studygolang.com/dl
https://studygolang.com/dl/golang/go1.22.0.windows-amd64.zip

编辑器下载地址:https://studygolang.com/articles/4930,
https://github.com/visualfc/liteide/releases/download/x38.3/liteidex38.3-win64-qt5.15.2.zip

创建目录D:\tools\go1.22.0 和 D:\tools\liteide目录并将golang和liteide安装到对应目录下,然后设置环境变量:在高级系统设置—》环境变量—》系统变量—》新建变量名:GOROOT,变量值:D:\tools\go----》在系统变量里path,编辑新增一条:D:\tools\go\bin—最后确定。然后新打开powershell 执行go version 如果现实版本表示安装成功。
将D:\tools\liteide\bin\liteide.exe 右击–发送到桌面快捷方式,双击改文件,打开编辑器。

1.2.安装beego环境下的工具bee

下载地址:github.com/beego/bee
https://github.com/beego/bee/archive/refs/tags/v2.1.0.zip 安装方法一:1. go install github.com/beego/bee/v2@latest,然后将bee.exe加到path的环境变量,或者放到c:\windows\system32下。
安装方法二:下载zip包,解压,然后进入目录执行go build main.go将生成的main.exe 重命名为bee.exe并放到c:\windows\system32 下。
重新打开powershell,然后执行bee version 如果有如下信息表示成功。

2024/04/22 11:55:18.719 [D]  init global config instance failed. If you do not use this, just ignore it.  open conf/app.conf: The system cannot find the path specified.
______
| ___ \
| |_/ /  ___   ___
| ___ \ / _ \ / _ \
| |_/ /|  __/|  __/
\____/  \___| \___| v2.1.0

├── GoVersion : go1.22.0
├── GOOS      : windows
├── GOARCH    : amd64
├── NumCPU    : 12
├── GOPATH    :
├── GOROOT    : D:\tools\go1.22.0
├── Compiler  : gc
└── Date      : Monday, 22 Apr 2024
1.3.下载layuimini模板

layuimini是采用layui的框架实现的后台模板,layui采用的版本是2.6.3
layuimini git地址:https://github.com/zhongshaofa/layuimini
官网地址:http://layuimini.99php.cn/
演示地址:http://layuimini.99php.cn/iframe/v2/index.html
下载代码仓库(iframe 多tab版) v2版本:https://github.com/zhongshaofa/layuimini/tree/v2

layui镜像站:https://www.layui.site/, 由于2.7以前的版本的使用文档下线了,所以使用镜像站地址。

二.创建项目

2.1.用bee命令创建项目

创建目录:D:\myproject\,然后进入该目录执行:bee new myk8s创建一个项目,然后用liteide 打开目录:D:\myproject\myk8s。

2.2.配置静态访问地址

在D:\myproject\myk8s\views\下创建目录front,并将layuimini-v2.zip 内的文件解压到front目录下,注意:front目录结构如下:

目录: D:\myproject\myk8s\views\front


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----         2024/4/22     12:22                api
d-----         2024/4/22     12:22                css
d-----         2024/4/22     12:22                images
d-----         2024/4/22     12:22                js
d-----         2024/4/22     12:22                lib
d-----         2024/4/22     12:22                page
-a----         2021/9/17      8:17            107 .gitattributes
-a----         2021/9/17      8:17              6 .gitignore
-a----         2021/9/17      8:17           7812 index.html
-a----         2021/9/17      8:17           1066 LICENSE
-a----         2021/9/17      8:17           6823 README.md

配置静态访问地址:在main.go中设置静态访问地址,代码如下:

package main

import (
	_ "myk8s/routers"

	beego "github.com/beego/beego/v2/server/web"
)

func main() {
	beego.SetStaticPath("/", "views/front")
	beego.Run()
}

三.实现客户端连接clientset

在myk8s 下创建common 目录,并在该目录下创建一个文件:k8sclient.go,完整代码如下:

// k8sclient.go
package common

import (
	"log"
	"os"

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

func ClientSet(clusterid string) *kubernetes.Clientset {
	var kubeconfigPath string
	switch clusterid {
	case "ali-cluster1":
		kubeconfigPath = "./ali-cluster1.txt"
	case "ali-cluster2":
		kubeconfigPath = "./ali-cluster2.txt"
	default:
		kubeconfigPath = "./kubeconfig.txt"
	}
	config, err := clientcmd.BuildConfigFromFlags("", kubeconfigPath)
	if err != nil {
		panic(err.Error())
	}
	config.QPS = 10
	config.Burst = 100
	if clusterid == "aws-cluster1" { //针对aws的k8s集群需要读取token来进行验证
		bearerToken, err := GetBearerTokenByClusterId(kubeconfigPath)
		if err != nil {
			//panic(err.Error())
			log.Printf("[ERROR] GetBearerTokenByClusterId err:%s\n", err)
		}
		//log.Println(bearerToken)
		if bearerToken != "" && bearerToken != "null" {
			config.BearerToken = bearerToken
		}
	}

	// create the clientset
	clientset, err := kubernetes.NewForConfig(config)
	if err != nil {
		panic(err.Error())
	}

	bearerToken, err2 := GetBearerTokenByClusterId(clusterid)
	if err2 != nil {
		//panic(err.Error())
		log.Printf("[ERROR] GetBearerTokenByClusterId err:%s\n", err2)
	}
	//log.Println(bearerToken)
	if bearerToken != "" && bearerToken != "null" {
		config.BearerToken = bearerToken
	}

	return clientset
}

//读取文件中的bearerToken
func GetBearerTokenByClusterId(tokenFilePath string) (string, error) {
	content, err := os.ReadFile(tokenFilePath)
	if err != nil {
		return "", err
	}
	return string(content), nil
}

四.修改前端代码,实现初步的显示框架

4.1.修改菜单配置

修改views\front\api\init.json中去掉不必要的菜单选项,保留最简单的框架,完整的页面形式可以参考layuimini的演示地址,代码如下:

{
  "homeInfo": {
    "title": "首页",
    "href": "page/xkube/main.html?t=1"
  },
  "logoInfo": {
    "title": "LAYUI MINI",
    "image": "images/logo.png",
    "href": ""
  },
  "menuInfo": [
    {
      "title": "k8s管理",
      "icon": "fa fa-address-book",
      "href": "",
      "target": "_self",
      "child": [
        {
          "title": "集群信息",
          "href": "",
          "icon": "fa fa-home",
          "target": "_self",
          "child": [
            {
              "title": "节点管理",
              "href": "page/xkube/nodeList.html",
              "icon": "fa fa-tachometer",
              "target": "_self"
            }
          ]
        },
        {
          "title": "工作负载",
          "href": "",
          "icon": "fa fa-calendar",
          "target": "_self",
          "child": [
            {
              "title": "无状态[deploy]",
              "href": "page/xkube/deployList.html",
              "icon": "fa fa-list-alt",
              "target": "_self"
            },
            {
              "title": "容器组[pod]",
              "href": "page/xkube/podList.html",
              "icon": "fa fa-navicon",
              "target": "_self"
            },
            {
              "title": "定时任务[cronjob]",
              "href": "page/xkube/cronjobList.html",
              "icon": "fa fa-navicon",
              "target": "_self"
            }
,
            {
              "title": "自动伸缩[hpa]",
              "href": "page/xkube/hpaList.html",
              "icon": "fa fa-navicon",
              "target": "_self"
            }
          ]
        },
        {
          "title": "网络",
          "href": "",
          "icon": "fa fa-flag-o",
          "target": "_self",
          "child": [
            {
              "title": "服务[svc]",
              "href": "page/xkube/svcList.html",
              "icon": "fa fa-stumbleupon-circle",
              "target": "_blank"
            },
            {
              "title": "路由[ingress]",
              "href": "page/xkube/ingressList.html",
              "icon": "fa fa-viacoin",
              "target": "_blank"
            }
          ]
        },
        {
          "title": "配置管理",
          "href": "",
          "icon": "fa fa-home",
          "target": "_self",
          "child": [
            {
              "title": "configmap[cm]",
              "href": "page/xkube/configmapList.html",
              "icon": "fa fa-hourglass-end",
              "target": "_self"
            }
          ]
        },
        {
          "title": "存储",
          "href": "",
          "icon": "fa fa-snowflake-o",
          "target": "",
          "child": [
            {
              "title": "存储声明[pvc]",
              "href": "page/xkube/pvcList.html",
              "icon": "fa fa-snowflake-o",
              "target": "_self"
            }
          ]
        }
      ]
    }
  ]
}
4.2.控制端主页代码

views\front\page\xkube\main.html代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页一</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script src="/js/xkube.js?v=1.0.0" charset="utf-8"></script>
</head>
<style>
    .layui-top-box {padding:40px 20px 20px 20px;color:#fff}
    .panel {margin-bottom:17px;background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:15px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:14px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
</style>
<body>
<div class="layuimini-container">
    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10">

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-cyan">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-blue">实时</span>
                                <h5>节点统计</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">1234</h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 1234</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-blue">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-cyan">实时</span>
                                <h5>POD统计</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">1234</h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 1234</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-green">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-orange">实时</span>
                                <h5>deploymen统计</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">1234</h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 1234</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-orange">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>存储统计</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">1234</h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 1234</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-box">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>集群名称</th>
                        <th>默认集群</th>
                        <th>设置为默认集群</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>ali-cluster1</td>
                        <td>true</td>
                        <td><input class="layui-btn layui-btn-sm" type="button" onclick="SetDefaultCluster('ali-cluster1');" value="设置默认集群"/></td>
                    </tr>
                    <tr>
                        <td>ali-cluster2</td>
                        <td>false</td>
                        <td><input class="layui-btn layui-btn-sm" type="button" onclick="SetDefaultCluster('ali-cluster2');" value="设置默认集群"/></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
</body>
</html>

五.调试代码

5.1.用liteide编辑器调试代码

在liteide —>编译----> get —> test。调试成功以后,编译–Build 就会在myk8s目录下生成一个myk8s.exe,成功后的结果如下:

D:/prog/go1.22.0/bin/go.exe build [D:/myproject/myk8s]
成功: 进程退出代码 0.
5.2.修改beego的配置文件

修改conf/app.conf

appname = myk8s
httpport = 8080
runmode = dev

#传递obdy的配置
copyrequestbody = true
#由于layui和beego对于模板的引用字符有冲突,这里修改一下beego的模板字符。
TemplateLeft = "<<<" 
TemplateRight = ">>>"
5.3.编译调试启动

执行myk8s.exe启动进程:

PS D:\myproject\myk8s> .\myk8s.exe
2024/04/23 14:43:01.136 [I] [server.go:281]  http server Running on http://:8080
5.4.浏览器打开

浏览器打开:http://127.0.0.1:8080/index.html
,效果如下图

k8s环境变量env 传递到docker镜像 k8s多环境管理_容器