ambari前端改造及部署

# 开发改造

软引用替换修改后及view.xml修改后，记得重启sudo ambari-server restart才能生效，否则会404;

样式改造；
国际化；
功能叠加；前期通过vue过渡，再通过微前端项目过渡；【详见单独篇幅介绍】

# web

# 技术栈

ember.js（版本：v1.0.pre）

# 注意点

项目使用的brunch1.x没有相关的代理功能；(2.x上已经实现)；后面只能通过脚本替换接口前缀；

sed -i '' 's#^App.apiPrefix.*#App.apiPrefix = \"/api/v1\"; #g' app/config.js
因还没有找到好的代码代理方式，目前要通过浏览器启动代理设置启动页面；最后还是通过brunch-server.js处理；

# 碰到的问题

brunch1.x版本太低，没有找到好方式做proxy；目前只用的浏览器跨域，登录用到cookie设置不了；最后可以代理处理；
官方推荐升级2.x版本，有点工作量，推迟处理；

# 优化websocket连接死循环卡顿

优化连接时的异步处理，和连接成功标志判断处理；
添加重试功能，重试错误5次后跳转到登陆页面；
setTimeout延迟重连机制，同时触发多次重连优化；reconnect重连会多次触发，所以需要给重连加一把锁，当一个重连正在执行的时候，无法再触发一次重连；

stomp_client.js

  connect: function (useSockJS) {
    console.debug('Websocket === Start Connection');
    this.disconnect(); // 先断掉之前的连接的
    const dfd = $.Deferred();
    const socket = this.getSocket(useSockJS);
    const client = Stomp.over(socket);
    const headers = this.get('headers');
    client.connect(headers, () => {
      this.onConnectionSuccess();
      if (!Conf.isPro) client.debug = Em.K;
      this.set('client', client); // 要在这里接收设置处理；
      dfd.resolve();
    }, (error) => {
      dfd.reject(this.onConnectionError(error));
    });
    return dfd.promise();
  }, 
 
// 初始化连接设置，要兼容各浏览器的配置；
 getSocket: function () {
    var wsApi = window.location.protocol === 'https:' ? 'wss:' : 'ws:' + window.location.host;
    var newUrl = this.get('webSocketUrl2').replace('{wsApi}', wsApi)
    var socket
    if ('WebSocket' in window) {
      socket = new WebSocket(newUrl);
    } else if ('MozWebSocket' in window) {
      socket = new window.MozWebSocket(newUrl);
    } else {
      socket = new window.SockJS(newUrl);
    }
    return socket
  },

// 通过连接标志，避免做死循环处理； isConnected
addHandler: function (destination, key, handler) {
    const subscription = this.get('subscriptions')[destination];
    if (!subscription) {
      if (this.get('isConnected')) {
        this.subscribe(destination);
        return this.addHandler(destination, key, handler);
      } else {
        return;
      }
    }
    if (subscription.handlers[key]) {
      console.error('You can\'t override subscription handler');
      return;
    }
    subscription.handlers[key] = handler;
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# 生产环境替换

目前是在用jks构建时，触发脚本去替换,是否是生产字段；

replacePro() {
    if [[ "$OSTYPE" == "darwin"* ]]; then
        sed -i "" "s#^var isPro = false.*#var isPro = true;#g" $1
    else
        sed -i "s#^var isPro = false.*#var isPro = true;#g" $1
    fi
}

buildWeb() {
    curPro='buildWeb'
    echo "==================================${curPro}===================================="
    cd ${webDir}
    replacePro ${webDir}/app/conf.js
    echo "=====${curPro}项目==config中的apiPrefix===替换成功===="

    npm i
    npm run build
    echo "=====${curPro}项目===构建成功====="
    cp -R public/* ${curDir}/${webDirDist}/
    echo "=====${curPro}项目===拷贝成功====="
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 接口代理改造

参考admin项目gulp代理设置；

参考文档：

https://brunch.io/docs/config#-server-
https://github.com/brunch/brunch/issues/1714

brunch-server.js

http-proxy-middleware 核心代理处理；设置支持http,websocket代理处理；

//conf.js
var isPro = false;
var targetApi = isPro ? '' : 'http://172.21.73.xxx:8080' // 接口地址；
var proxyApi = '/api/'
var pagePath = isPro ? 'pages' : 'http://localhost:9800'; // 对应pages多页面基路径
var localPort = '4444'; // 本地开发端口

module.exports = {
  isPro,
  targetApi,
  proxyApi,
  pagePath,
  localPort,
}

//brunch-server.js 注意这里要同时处理websocket的代理；
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const { proxyApi, targetApi } = require('./app/conf');
const app = express();

exports.startServer = (port, path, callback) => {
  app.use(express.static(path));
  app.use(proxyApi, createProxyMiddleware({ target: targetApi, changeOrigin: true, ws: true, }));
  app.listen(port, function () {
    console.log(`app listening on http://localhost:${port}`);
    callback();
  })
}

//brunch-config.js
  server: {
    path: 'brunch-server.js', // 指定启动代理文件；
    port: localPort,
    base: '/',
    run: 'yes'
  },
    
 //package.json
  "scripts": {
    "start": "brunch watch",
    "build": "brunch build"  // 注意没用--production; 这个参数回导致构建死循环
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

参考admin项目中的代理设置：

gulp.js

const { createProxyMiddleware } = require('http-proxy-middleware');
const jsonPlaceholderProxy = createProxyMiddleware('/api/v1', {
  target: 'http://10.45.47.xxx:xxx',
  changeOrigin: true,
});
  browserSync({
    notify: false,
    port: 9010,
    server: {
      baseDir: ['dist'],
      middleware: [jsonPlaceholderProxy]
    },
    open: false
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Mac10.15.7版本不支持当前项目

有个第三方库fs-event版本太老；依赖的第三方c++库不支持当前mac系统；

解决：通过VSCode的方式，remote 组件，直接在服务器远程开发；

# admin

# 技术栈

angularjs1.x + bower + gulp3.x

# 注意点

考虑到bower install安装慢，可以提前用内置的依赖库;

wdp-web/ambari-admin/main/resources/ui/admin-web/app/assets/zip

unzip -o ${admDir}/app/assets/zip/bower_components.zip -d ${admDir}/app/
wdp-web/ambari-admin/main/resources/view.xml也记得保留在静态目录下；
代理接口设置通过http-proxy-middleware处理，后端设置免登录接口cookie验证后即可代理使用；

# capacity-scheduler

# 技术栈

Brunch1.x, 跟web项目类似；

# 注意点

bower依赖提前先下好zip, 再解压使用；

# files

# 技术栈

ember全家桶，ember2.x，相对其他算比较新的技术；

# 注意点

bower依赖提前先下好zip, 再解压使用；
要用yarn安装依赖；或者用nodejsv7.10版本安装依赖；
修改ember-collection的依赖版本；"ember-collection": "1.0.0-alpha.5",
开发环境，接口代理配置；"start": "ember server --proxy=http://10.45.47.68:8082",
生产环境，打包配置；"build": "ember build --environment production",

部分centos安装不了依赖问题

因涉及到 node-sass库，要安装相关依赖； gcc make python gcc-c++ cmake

FROM centos:centos7
RUN yum install git wget curl unzip gcc make python gcc-c++ cmake -y
RUN curl --silent --location https://rpm.nodesource.com/setup_10.x | bash -
RUN yum install nodejs -y

1
2
3
4

# 构建部署

# 临时部署

在wdp-web目录下，新建zdeploy.js，运行脚本sh deploy.sh true && bdp deploy，再选择对应的服务器部署；

/*
 * @Author: samy
 * @email: yessz#foxmail.com
 * @time: 2021-02-24 09:25:03
 * @modAuthor: samy
 * @modTime: 2021-03-15 09:47:08
 * @desc: 部署脚本配置
 * @Copyright © 2015~2021 BDP FE
 */
const server = [
    {
        id: "dev",
        name: "开发环境",
        host: "10.45.47.xx",
        username: "iwdp",
        password: "xxx",
        serverDir: "/home/iwdp/fe-deploy/dist/",
        port: "22",
        localDir: "dist",
    },
]
module.exports = server

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# jks配置部署

构建前，要先移除dist目录相关文件；rm -rf dist dist.zip

归档成品存放的位置：每一次归档文件，都放在一个单独的文件夹（以build号命名）里；

${JENKINS_HOME}/jobs/${JOB_NAME}/builds/${BUILD_NUMBER}/archive

# 相关脚本

# `build.sh`

#!/bin/bash
###
# @Author: samy
# @email: yessz#foxmail.com
# @time: 2021-03-11 15:59:05
 # @modAuthor: samy
 # @modTime: 2021-03-15 17:36:14
# @desc: 构建部署脚本
# Copyright © 2015~2021 BDP FE
###
set -e

curDir=$(
    cd "$(dirname "$0")"
    pwd
)
distWebDir=dist/web
distAdmDir=dist/admin
isSkipBowerInstall=$1

webDir=${curDir}/ambari-web
admDir=${curDir}/ambari-admin/main/resources/ui/admin-web

echo "====wdp-web项目===环境依赖==node版本====="
node -v

rm -rf ${curDir}/dist ${webDir}/pulic ${admDir}/dist
mkdir -p ${curDir}/${distWebDir} ${curDir}/${distAdmDir}

echo "====wdp-web项目===web===="
cd ${curDir}/ambari-web 
if [[ "$OSTYPE" == "darwin"* ]]; then
    sed -i "" "s#^App.apiPrefix.*#App.apiPrefix = '/api/v1'; #g" ${curDir}/ambari-web/app/config.js
else
    sed -i "s#^App.apiPrefix.*#App.apiPrefix = '/api/v1'; #g" ${curDir}/ambari-web/app/config.js
fi

echo "==wdp-web==web项目==config中的apiPrefix===替换成功===="
npm i --registry=https://registry.npm.taobao.org
npm run build
echo "==wdp-web==web项目===构建成功===="
cp -R public/* ${curDir}/${distWebDir}/
echo "==wdp-web==web项目===拷贝成功===="

echo "====wdp-web项目===adm===="
cd ${admDir}
if [ -z "$isSkipBowerInstall" ]; then
    echo "====wdp-web项目===adm项目====bower install==命令========="
    npm i -g bower --registry=https://registry.npm.taobao.org
    bower install # 这一步下载估计会很慢
else
    echo "====wdp-web项目====adm项目====bower使用==zip==命令========="
    unzip -o ${admDir}/app/assets/zip/bower_components.zip -d ${admDir}/app/
fi
npm i --registry=https://registry.npm.taobao.org
npm run build
echo "==wdp-web==adm项目===构建成功===="
cp -R dist/* ${curDir}/${distAdmDir}/
cp ${curDir}/ambari-admin/main/resources/view.xml ${curDir}/${distAdmDir}/
echo "==wdp-web==adm项目===拷贝成功===="

cd -

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

# 兼容view组件再封装优化

#!/bin/bash
###
# @Author: samy
# @email: yessz#foxmail.com
# @time: 2021-03-11 15:59:05
 # @modAuthor: samy
 # @modTime: 2021-03-26 13:25:49
# @desc: 构建部署脚本
# Copyright © 2015~2021 BDP FE
###
set -e

curDir=$(
    cd "$(dirname "$0")"
    pwd
)

# isSkipBowerInstall=$1

webDir=${curDir}/web
admDir=${curDir}/admin/main/resources/ui/admin-web
viewCapDir=${curDir}/views/capacity-scheduler/src/main/resources/ui
viewFileDir=${curDir}/views/files/src/main/resources/ui

webDirDist=dist/web
admDirDist=dist/admin
viewCapDirDist=dist/admin/views/capacity
viewFileDirDist=dist/admin/views/files

replacePro() {
    # if [[ "$OSTYPE" == "darwin"* ]]; then
    #     sed -i "" "s#^var isPro = false.*#var isPro = true;#g" ${webDir}/app/config.js
    # else
    #     sed -i "s#^var isPro = false.*#var isPro = true;#g" ${webDir}/app/config.js
    # fi
    if [[ "$OSTYPE" == "darwin"* ]]; then
        sed -i "" "s#^var isPro = false.*#var isPro = true;#g" $1
    else
        sed -i "s#^var isPro = false.*#var isPro = true;#g" $1
    fi
}

echo "=====环境依赖==node版本===yarn版本="
node -v
yarn -v

# rm -rf ${curDir}/dist ${webDir}/pulic ${admDir}/dist
mkdir -p ${curDir}/${webDirDist} ${curDir}/${admDirDist} ${curDir}/${viewCapDirDist} ${curDir}/${viewFileDirDist}

echo "==================================web===================================="
cd ${webDir}
replacePro ${webDir}/app/config.js
echo "=====web项目==config中的apiPrefix===替换成功===="

npm i --registry=https://registry.npm.taobao.org
npm run build
echo "=====web项目===构建成功===="
cp -R public/* ${curDir}/${webDirDist}/
echo "=====web项目===拷贝成功===="

echo "==================================admin===================================="
cd ${admDir}
# if [ -z "$isSkipBowerInstall" ]; then
#     echo "======bower install==命令========="
#     npm i -g bower --registry=https://registry.npm.taobao.org
#     bower install # 这一步下载估计会很慢
# else
echo "=======bower使用==zip==命令========="
unzip -o ${admDir}/app/assets/zip/bower_components.zip -d ${admDir}/app/
npm i --registry=https://registry.npm.taobao.org
npm run build
echo "=====admin项目===构建成功====="
cp -R dist/* ${curDir}/${admDirDist}/
cp ../../view.xml ${curDir}/${admDirDist}/
echo "=====admin项目===拷贝成功====="


echo "===========================capacity-scheduler==============================="
cd ${viewCapDir}
replacePro ${viewCapDir}/app/adapters.js
echo "=======bower使用==zip==命令========="
unzip -o ${viewCapDir}/zip/bower_components.zip
npm i --registry=https://registry.npm.taobao.org
npm run build
echo "=====capacity项目===构建成功====="
cp -R public/* ${curDir}/${viewCapDirDist}/
cp ../view.xml ${curDir}/${viewCapDirDist}/
cp ../view.log4j.properties ${curDir}/${viewCapDirDist}/
echo "=====capacity项目===拷贝成功====="


# 要考虑到后端的yarn组件命令会跟前端包管理的命令冲突问题；
# echo "=================================files======================================"
# cd ${viewFileDir}
# # 这个项目不用做配置替换直接用的ember自带的环境
# echo "=======bower使用==zip==命令========="
# unzip -o ${viewFileDir}/zip/bower_components.zip
# yarn #这里要求用yarn安装，否则会依赖安装失败
# yarn build
# echo "=====file项目===构建成功====="
# cp -R dist/* ${curDir}/${viewFileDirDist}/
# cp ../view.xml ${curDir}/${viewFileDirDist}/
# cp ../view.log4j.properties ${curDir}/${viewFileDirDist}/
# echo "=====file项目===拷贝成功====="

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

# `getdist.sh`

#!/bin/bash
###
# @Author: samy
# @email: yessz#foxmail.com
# @time: 2021-03-11 15:59:05
 # @modAuthor: samy
 # @modTime: 2021-03-15 17:36:14
# @desc: 拉取dist脚本
# Copyright © 2015~2021 BDP FE
###
sleep 1
ftp  -niv  <<!
open  10.45.47.x
user  jkusexx  xx
binary
cd  /var/lib/jenkins/workspace/wdp-web-develop
lcd  /home/iwdp/fe-deploy
prompt
get  dist.zip
close
bye
!
sleep 1
pwd
ls -la

datetime=$(date "+%Y%m%d%H%M%S")

rm -rf dist
/usr/bin/unzip dist.zip
#rm -f dist.zip
mkdir bak
mv dist.zip bak/dist-${datetime}.zip
echo "解压成功,部署成功"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# `replace.sh`

后面支持views组件相关调整

#!/bin/bash
###
# @Author: samy
# @email: yessz#foxmail.com
# @time: 2021-03-11 15:59:05
# @modAuthor: samy
# @modTime: 2021-03-15 17:24:01
# @desc: dist引用
# Copyright © 2015~2021 BDP FE
###
set -e
isLn=$1

distDir=/home/iwdp/fe-deploy/dist
webDir=/usr/lib/ambari-server/web
admDir=/var/lib/ambari-server/resources/views/work/ADMIN_VIEW\{2.7.4.0}
capacityDir=/var/lib/ambari-server/resources/views/work/CAPACITY-SCHEDULER{1.0.0}
filesDir=/var/lib/ambari-server/resources/views/work/FILES{1.0.0}

sudo rm -rf ${webDir} ${admDir} ${capacityDir} ${filesDir}
if [ -z "$isLn" ]; then
  sudo ln -s ${distDir}/web ${webDir}
  sudo ln -s ${distDir}/admin ${admDir}
  sudo ln -s ${distDir}/views/capacity ${webDir}
  sudo ln -s ${distDir}/views/files ${filesDir}
else
  echo "========跳过创建软引用========="
fi

echo "软引用替换成功！, ambari-server 重启中"
sudo ambari-server restart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# docker容器构建脚本【要点】

单独使用一个容器构建前端项目；

FROM centos:centos7
VOLUME /opt/mountDir
ARG gitlab_username
ARG gitlab_password
RUN yum install git wget curl unzip gcc make python gcc-c++ cmake -y
RUN curl --silent --location https://rpm.nodesource.com/setup_10.x | bash -
RUN yum install nodejs -y
RUN git clone http://${gitlab_username}:${gitlab_password}@10.45.xx/xx-rgdp/wdp-web.git /opt/wdp-web/
RUN echo -e "" >> /opt/wdp-web/build.sh
RUN echo -e "mv \${curDir}/dist/admin \${curDir}/dist/wdp-admin" >> /opt/wdp-web/build.sh
RUN echo -e "mv \${curDir}/dist/web \${curDir}/dist/wdp-web" >> /opt/wdp-web/build.sh
RUN echo -e "mv \${curDir}/dist/views/capacity \${curDir}/dist/views/wdp-views-capacity-scheduler" >> /opt/wdp-web/build.sh

RUN echo -e "mv \${curDir}/dist/wdp-admin /opt/mountDir" >> /opt/wdp-web/build.sh
RUN echo -e "mv \${curDir}/dist/wdp-web /opt/mountDir" >> /opt/wdp-web/build.sh
RUN echo -e "mv \${curDir}/dist/views/wdp-views-capacity-scheduler /opt/mountDir" >> /opt/wdp-web/build.sh

RUN echo -e "chmod -R 777 /opt/mountDir" >> /opt/wdp-web/build.sh
CMD ["/bin/bash", "/opt/wdp-web/build.sh", "true"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

上次更新: 2023/11/17, 05:08:18

← 数据底座和wdp介绍及技术要点 ranger组件国际化及部署→

ambari前端改造及部署

# 开发改造

# web

# 技术栈

# 注意点

# 碰到的问题

# 优化websocket连接死循环卡顿

# 生产环境替换

# 接口代理改造

# Mac10.15.7版本不支持当前项目

# admin

# 技术栈

# 注意点

# capacity-scheduler

# 技术栈

# 注意点

# files

# 技术栈

# 注意点

# 构建部署

# 临时部署

# jks配置部署

# 相关脚本

# build.sh

# 兼容view组件再封装优化

# getdist.sh

# replace.sh

# docker容器构建脚本【要点】

# `build.sh`

# `getdist.sh`

# `replace.sh`