kiali-ui的自定义UI开发

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

原文地址 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/;                    
        }
    }