kuboard1.0标题logo修改

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版本。

这是没有源码的方式的折中修改方式。