kiali-ui的自定义UI开发

能搜到这篇文章的都是知道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?$'; 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/;                    
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

          }
     
    
  
 

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/108616804