[]()kuboard可视化运维平台
kuboard是k8s多集群管理界面，属于一个可视化运维平台。但是kuboard并不开源，所以无法找到源码进行修改，重新编译。只能对docker镜像中的dist源码进行动手改造。
对应的docker镜像是：eipwork/kuboard:latest，实际版本是 v1.0.6.3
[]()1.环境准备
- 找到kuboard运行的容器id。
docker ps
- 进入到kuboard容器内部：
docker exec -it 54e6b2c2c785 /bin/bash- 找到dist目录
cd /usr/share/nginx/html
注：因为kuboard内部也是通过nginx反向代理，所以一般nginx默认的路径，就是/usr/share/nginx/html
- nginx.conf
对应的配置文件如下：/etc/nginx/conf.d/nginx.80.conf
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /k8s-api/ {
proxy_pass https://10.96.0.1:443/;
proxy_http_version 1.1;
proxy_pass_header Authorization;
gzip on;
# proxy_ssl_certificate /apiserver/apiserver.crt;
# proxy_ssl_certificate_key /apiserver/apiserver.key;
location ~ "^/k8s-api/(.*)/watch/(.*)" {
proxy_pass https://10.96.0.1:443/$1/watch/$2$is_args$args;
proxy_http_version 1.1;
proxy_pass_header Authorization;
gzip off;
}
}
location /k8s-ws/ {
proxy_pass https://10.96.0.1:443/;
proxy_http_version 1.1;
proxy_pass_header Authorization;
# proxy_ssl_certificate /apiserver/apiserver.crt;
# proxy_ssl_certificate_key /apiserver/apiserver.key;
proxy_set_header Upgrade "websocket";
proxy_set_header Connection "upgrade";
}
location /oidc/ {
resolver 127.0.0.1 valid=5s;
proxy_pass http://localhost/;
proxy_http_version 1.1;
proxy_pass_header Authorization;
}
location ^~ /eip-monitor/ {
location ~ "^/eip-monitor/namespace/(.*)/service/(.*)/port/(.*)/(.*)" {
resolver 127.0.0.1 valid=5s;
proxy_pass http://$2.$1.svc.cluster.local:$3/$4$is_args$args;
gzip on;
}
}
location ^~ /addons/ {
location ~ "^/addons/namespace/(.*)/service/(.*)/port/(.*)/(.*)" {
resolver 127.0.0.1 valid=5s;
proxy_pass http://$2.$1.svc.cluster.local:$3/$4$is_args$args;
gzip on;
}
}
error_page 500 502 503 504 /50x.html;
location /50x.html {
root /usr/share/nginx/html;
}
}[]()2.登录页面修改
找到对应的js文件，将图标替换，字眼替换。\
通过一些特殊的字眼，快速定位到对应的js文件
chunk-54fd4eb0.d2f699f9.js。
直接修改kuboard容器中的文件即可。
vi /usr/share/nginx/html/js/chunk-54fd4eb0.d2f699f9.js或者在win下修改后，替换到linux服务器也可以。
最终的效果如下：
修改图标，字眼等。
[]()3.首页页面修改
- 添加一个图标，并修改Kuboard字眼
可以通过一些特殊的样式logo noselect进行定位到具体的js文件。
\
通过一些特殊的字眼，快速定位到对应的js文件
chunk-d6576834.de99c4f4.js。
例如，我们想添加一个图标，并修改Kuboard字眼。
.logo样式修改。
这里不能固定.logo的长度，否则字体长度不够
固定长度为65px，否则会出现以下情况：
.slot样式修改
\
因为刚才.logo的宽度，变大了，所以这里要减少.slot的宽度，-420px改成-560px\
不减少右边的固定宽度，否则会出现以下情况：
[]()4.标题，ico图标修改
一般这些对应于index.html页面\
[]()5.替换更新说明
可以在自己win的电脑修改html，修改好后上传到服务器的/opt/tools/kuboard目录
- 进入到kuboard目录
cd /opt/tools/kuboard- docker容器向本机传送文件：
docker cp c175252da699:/usr/share/nginx/html ./- 本机向docker容器传送文件：
docker cp ./ c175252da699:/usr/share/nginx/总结：基于目前的修改方式，就我们就能对vue前端打包好的，dist目录进行代码的修改，来达成我们想要的效果，但是这只能修改一些小内容，大改的话，估计改动比较麻烦，够呛。kuboard v1.0 版本，才存在这个问题。\
对于logo，标题的修改，在kuboard v2,v3版本，已经有功能进行编辑，我们可以拥抱v2,v3版本。这是没有源码的方式的折中修改方式。
