kiali-ui的自定义UI开发

﹏ヽ暗。殇╰゛Y 2022-12-07 12:51 177阅读 0赞

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

[kiali-ui仓库地址][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?$'; 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][http_kiali-istio-system.127.0.0.1.nip.io] 是部署的kiali应用服务地址

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70][]

在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/;                    
            }
        }

[kiali-ui]: https://github.com/kiali/kiali-ui
[http_kiali-istio-system.127.0.0.1.nip.io]: http://kiali-istio-system.127.0.0.1.nip.io
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]: /images/20221123/c2143b839aa644beb19789d5a399f641.png