kiali-ui的自定义UI开发

liuian 2025-01-03 17:18 54 浏览

以下蓝色文字均有链接但由于头条对于外部链接管理较严故未添加链接如影响阅读请看原文

原文地址 https://fizzz.blog.csdn.net/article/details/108616804

能搜到这篇文章的都是知道kiali是干啥的，所以我就不过多介绍了。想了解自己去百度吧。我懒得打字。

kiali-ui仓库地址

正常开发这个项目需要某系统，至于那个系统我也不知道，因为windows，ubuntu系统我都试了，都不好使，只有苹果电脑还没测试过，可能他们的开发人员都是用苹果，也是，搞云原生的都是有钱人，谁还用垃圾windows。

可以看下package.json中的启动的脚本

 "scripts": {
    "build": "if [ \"${KIALI_ENV}\" = \"production\" ]; then npm run build:prod; else npm run build:dev; fi",
    "build-css": "node-sass src/ --output-style compressed --include-path $npm_package_sassIncludes_src -o src/",
    "build:dev": "sh -ac 'source ./.env.upstream; npm run lint && npm run build:kiali'",
    "build:kiali": "npm run build-css && REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name REACT_APP_GIT_HASH=$(git rev-parse HEAD) GENERATE_SOURCEMAP=false EXTEND_ESLINT=true react-scripts build",
    "build:prod": "sh -ac 'source ./.env.downstream; npm run build:kiali'",
    "lint": "eslint --ext js,ts,tsx src",
    "lint:precommit": "if git diff --name-only HEAD | grep -E '\\.tsx?#39;; then npm run lint; else true; fi",
    "lintfix": "eslint --ext js,ts,tsx --fix src",
    "start": "if [ \"${KIALI_ENV}\" = \"production\" ]; then npm run start:prod; else npm run start:dev; fi",
    "start:dev": "sh -ac 'source ./.env.upstream; npm run start:kiali'",
    "start:kiali": "npm run build-css && REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name REACT_APP_GIT_HASH=$(git rev-parse HEAD) react-scripts start",
    "start:prod": "sh -ac 'source ./.env.downstream; npm run start:kiali'",
    "test": "npm run build-css && tsc -p . && TEST_RUNNER=1 react-scripts test --env=jsdom __tests__",
    "snyk": "snyk test",
    "analyze": "source-map-explorer build/static/js/main.*",
    "prettier": "prettier --write \"{src/**/*.{js,jsx,ts,tsx,json,yml,css,scss},travis.yml,*.json}\"",
    "snyk-protect": "snyk protect"
  },

含有大量环境变量，if条件判断，不支持跨平台的环境变量设置。之前给他提过一个issues，但貌似他们很忙。

开发此项目使用windows系统我是没有搞定，不过在ubuntu上，稍微做些修改就能开发了。

具体步骤

git clone https://github.com/kiali/kiali-ui.git
 
cd kiali-ui
 
yarn
 
yarn start
 
# open http://localhost:3000

这是前端的项目启动

配置后端接口是在package.json 中添加这么一句

"proxy": "http://kiali-istio-system.127.0.0.1.nip.io",

http://kiali-istio-system.127.0.0.1.nip.io 是部署的kiali应用服务地址

我使用的是tag v1.22.1的代码

打开页面是会显示如此，报这个错误是因为环境变量没有设置成功。

在55行修改为

const url = new URL(config.documentation.url || 'https://www.kiali.io/documentation/');

修改为此就ok了

使用 yarn build:prod 来编译一个发布包

部署的 nginx 代理配置

    server {
        listen       80;
        server_name  localhost;
 
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
            root   html;
            try_files $uri $uri/ /index.html;
            index  index.html /index.htm;        
        }
 
        location /api/ {
            proxy_http_version 1.1;            
            proxy_pass http://1.2.3.4:31538/kiali/api/;                    
        }
    }

travis.yml