【轉】包含前後端的插件開發指南

原文：https://hackmd.io/@4wfKSSy9QDm32jvj5YsQvA/S1phNDNd5

 

-----------------------

 

ks4.0 可插拔架構支持在不侵入 ks 核心代碼的前提下，通過開發無縫的拓展系統的能力。下面我們以一個簡單且典型的前後端分離的 crud 場景演示插件的開發、安裝過程。

注：本次演示我們暫時只在 mac 系統下進行

需求、設計

假設我們想在 ks 裏增加一個員工管理模塊。在這個模塊裏我們可以查看、新增、修改、刪除員工信息。設計圖如下：

1. 員工管理列表頁
   

2. 新增員工
   

3. 員工詳情頁
   

新建插件管理工程

在開發具體的前後端代碼之前，我們先新建一個插件的管理工程。這個工程將負責插件的發佈、安裝、卸載等操作。

前置條件：本地已配置 kube config 並安裝了 helm、home-brew

1. 安裝 ksnext cli
   ksnext 是我們爲插件管理開發的 cli 工具。mac 系統下運行如下命令安裝

// 新增 brew 私有倉
brew tap chenz24/tap
// 安裝
brew install chenz24/tap/ksnext

2. 創建工程

// 初始化工程，在想要安裝的目錄運行，poject-direcotry 爲制定的目錄名
ksnext init <poject-direcotry>

// 創建插件目錄
cd poject-direcotry // 切換到工程目錄內
ksnext create // 運行命令並按照提示輸入信息

輸入完成後，回車即可創建出插件的目錄。內容如下

|____Chart.yaml
|____charts
| |____frontend
| | |____Chart.yaml
| | |____templates
| | | |____deployment.yaml
| | | |____NOTES.txt
| | | |____tests
| | | | |____test-connection.yaml
| | | |____service.yaml
| | | |____extensions.yaml
| | | |____helps.tpl
| | |____values.yaml
| |____backend
| | |____Chart.yaml
| | |____templates
| | | |____deployment.yaml
| | | |____NOTES.txt
| | | |____tests
| | | | |____test-connection.yaml
| | | |____service.yaml
| | | |____extensions.yaml
| | | |____helps.tpl
| | |____values.yaml
|____.helmignore
|____values.yaml

可以看出，插件的管理是基於 helm chart 的。目錄中有 frontend 和 backend 兩個 subchart。我們暫且不做具體配置，先進行後端接口的開發。

後端開發

後端開發不限制語言。本次我們採用 go gin gorm sqlite 的技術棧來開發。由需求看出我們需要實現針對 employee 的增刪改查接口，接口的定義如下：

v1 := r.Group("/kapis/employee.kubesphere.io/v1alpha1")
{
	v1.GET("/employees", getEmployees)
	v1.GET("/employee/:id", getEmployee)
	v1.POST("/employee", createEmployee)
	v1.PUT("/employee/:id", updateEmployee)
	v1.DELETE("/employee/:id", deleteEmployee)
	v1.OPTIONS("/employee", optionsEmployee)
}

r.GET("/healthz", healthz)

r.Run()

具體源碼：GitHub - chenz24/employee: A demo app build with go gin, gorm and sqlite

開發完成後我們 build 代碼並將其打包成 docker 鏡像

GOOS=linux GOARCH=amd64 go build main.go

docker build --platform linux/amd64 -t poppub123/employee-api .

docker push poppub123/employee-api:latest

執行完成以上命令後，我們需要將後端代碼進行部署，以給前端開發提供接口調試。我們回到插件的管理工程目錄中。編輯 values.yaml

如圖，因爲前端尚未有鏡像，我們先將前端 disable。後端填好鏡像名稱及 tag。 回到插件管理工程根目錄執行

ksnext install employee 

如此，後端就部署到了 k8s 集羣中並且註冊到了 ks 的插件體系裏。我們可以通過 curl 測試接口是否已經被 ks-apiserver 接管。

前端開發

前置條件：已安裝 nodejs yarn

1. 安裝開發腳手架

yarn create ks-app my-app

安裝完成後，切換到腳手架目錄。在 configs 目錄下配置 local_config.yaml ，填寫正確的 ks apiserver 地址

2. 新建插件目錄

yarn create-plugin // 按照提示填寫信息

命令執行成功後，我們在 plugins 目錄可以看到 插件的框架代碼已經生成。下面我們就可以開始前端的開發了。

執行下面命令開啓前端開發環境
yarn dev 

前端開發完成後，我們同樣要將前端代碼打包成 docker 鏡像。

yarn build:plugin employee

cd /path/to

docker build --platform linux/amd64  -t poppub123/employee-frontend . 

我們再回到插件管理工程的目錄中，編輯 values.yaml，配置前端鏡像

然後執行如下命令，將前端部署到 k8s 中。

ksnext upgrade employee

命令執行成功後，我們在前端工程中執行。在本地以 production 模式啓動前端，查看插件是否安裝成功。

yarn start

總結

如此，一個插件的開發部署過程就完成了。要注意，本次的演示不包含插件商店的部分。在最終的場景中，插件會打包到 helm repo，會以插件商店的 ui 界面形式進行安裝、卸載、啓動、停止等操作。本次的演示是手動安裝部署，適合開發調試插件的場景。

#kubesphere