Ambari前端部署

前言

由于公司产品需要，需要理解一下ambari业务，所以需要本地部署一套环境，并对代码有所了解，由此对项目启动做了如下整理

Ambari-web

项目启动

项目框架：ember

安装nvm下载node 18版本（后续node版本管理可用nvm进行管理，nvm配置安装可参照配置文档 https://blog.csdn.net/weixin_45811256/article/details/130860444）

• 全局安装pnpm npm i -g pnpm

• 利用pnpm安装包 pnpm i

• 启动项目 npm run start

本地接口调试配置

由于项目框架不存在反向代理，在直接调用接口的情况下出现跨域报错，所以前端本地调试过程中需要配置nginx进行反向代理

1. ambari-web/app/config.js

App.testMode = (location.port == '3334');//此处应该将3333改成除去3333以外端口，这样设置为非测试模式

App.apiPrefix = '/dataApi/api/v1';//此处dataApi为nginx配置的代理接口前缀

2. nginx.conf(mac默认配置地址：/opt/homebrew/etc/nginx)，只需要追加端口监听部分，mac需要在第一行修改权限设置, user mac用户名 staff; (设置权限)

    server {
    	listen       34;
         server_name  你的IP地址或主机名; 
         
         location / {
            root    访问项目public文件夹地址;# 由于本项目是热更新即为压缩包，所以可以直接指定该路径为访问文件路径
            index  index.html index.htm;
        } 

    	location /dataApi/ {
        		proxy_pass 后端的地址和端口; # 替换为后端的地址和端口
        		proxy_set_header Host $host;
        		proxy_set_header X-Real-IP $remote_addr;

        		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                 # 允许跨域请求
        		add_header Access-Control-Allow-Origin *;
        		# 允许带身份验证信息的跨域请求
        		add_header Access-Control-Allow-Credentials true;
        		# 允许的请求方法
        		add_header Access-Control-Allow-Methods *;
        		# 允许的请求头
        		add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        		# 预检请求的有效期
        		add_header Access-Control-Max-Age 3600;
    	}

    }  

ngnix命令（以mac为例，windows去除sudo）

sudo nginx(启动nginx,每次修改配置文件都需要重新启动)，sudo nginx -s stop（关闭nginx，每次重启之前需要关闭，否则会报端口占用）

3. 根据上述配置

启动项目完，访问localhost:34即可访问页面

项目汉化

1、汉化文件：ambari-web/app/messages.js

2、汉化步骤：

• 根据参考文档(ambari-web/app/messages.js · 爱如花开/Apache-Ambari-ZH - Gitee.com)

• 复制汉化好的message.js文件代码(Apache-Ambari-ZH/ambari-web/app/message.js）

• 替换本地项目文件message.js

• 参考文档的汉化包中，很多地方没有汉化成中文，需要自己手动翻译；利用翻译软件直接大段落翻译。

• 自此，ambari-web模块汉化结束

注意：

由于ambari版本不同，网上的汉化包所包含的字段会有出入；

利用git工具的更改对比，找到原有message.js与替换后的message.js不同点，少的字段手动添加。

项目部署

打包：brunch

工具：FinalShell

文件路径：usr/lib/ambari-server/web

步骤：

1. npm run build 打包，生成public文件夹
2. 打开FinalShell，连接远程服务器
3. 进入对应目标文件夹（cd /usr/lib/ambari-server/web），进入web文件（可优先备份之前的文件夹 tar zcvf backup-20240510.tar web/ ）
4. rm -rf * 删除web里面的文件
5. 把public文件夹里的文件，放进web(可以直接把文件拖进去)
6. 打开对应网址验证部署页面

ambari-admin

源码路径：ambari-admin/src/main/resources/ui/admin-web

项目启动

项目框架：angular

安装nvm下载node 11版本

• 全局安装bower npm i -g bower

• 下载安装包 npm i bower i

• 启动项目 npm run start

本地接口调试配置

由于项目框架不存在反向代理，仍需要配置反向代理

1、/ambari-admin-web/app/scripts/app.js

  baseUrl: '/dataApi/api/v1'.replace(/\{.+\}/g, ''), //添加代理前缀

   //baseUrl: '{proxy_root}/api/v1'.replace(/\{.+\}/g, ''),

2、nginx.conf配置追加

server {
	listen       8081;
     server_name  你的IP地址或主机名; 
     
     location / {
        root   访问的dist包地址;
        index  index.html index.htm;
    } 

	location /dataApi/ {
    		proxy_pass http://10.0.99.195:8080/; # 替换为Ambari后端的地址和端口
    		proxy_set_header Host $host;
    		proxy_set_header X-Real-IP $remote_addr;

    		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             # 允许跨域请求
    		add_header Access-Control-Allow-Origin *;
    		# 允许带身份验证信息的跨域请求
    		add_header Access-Control-Allow-Credentials true;
    		# 允许的请求方法
    		add_header Access-Control-Allow-Methods *;
    		# 允许的请求头
    		add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    		# 预检请求的有效期
    		add_header Access-Control-Max-Age 3600;
	}

}

ngnix命令（以mac为例，windows去除sudo）

sudo nginx(启动nginx,每次修改配置文件都需要重新启动)，sudo nginx -s stop（关闭nginx，每次重启之前需要关闭，否则会报端口占用）

3. 根据上述配置,执行以下操作方可本地预览页面：

使用命令 gulp，本地用node16版本安装http-server（npm i -g http-server），利用命令行执行http-server，再访问localhost:8081即可访问页面

项目汉化

输出汉化文件：app/scripts/i18n.config.js

项目部署

打包：gulp

工具：FinalShell

文件路径：/var/lib/ambari-server/resources/views/work/ADMIN_VIEW{2.8.0}

步骤：

1. 利用 gulp 打包，生成dist文件夹
2. 打开FinalShell，连接远程服务器
3. 进入对应目标文件夹（cd /var/lib/ambari-server/resources/views/work/ADMIN_VIEW{2.8.0}），进入web文件（可优先备份之前的文件夹 tar zcvf backup-20240510.tar ADMIN_VIEW{2.8.0}/ ）
4. rm -rf * 删除web里面的文件，在删除之前保证有文件夹META-INF和view.xml备份
5. 把public文件夹里的文件，放进web(可以直接把文件拖进去，把之前备份的META-INF和view.xml一同放进去)
6. 打开对应网址验证部署页面

参考

参考文档：https://blog.csdn.net/CREATE_17/article/details/84035764

附录

• ambari-admin运行http-server时，注意node版本切换，需为16，版本不对应会出现运行错误。

• 如果访问管理端页面为空白是因为缺失了META-INF等文件，可利用ambari-server restart重启ambari-server服务，再重新按照项目部署方法重新部署即可。