本篇教程介绍了Node.js教程 基于ambari2.4.0进行二次开发，希望阅读本篇文章以后大家有所收获，帮助大家对Node.js的理解更加深入。

<

 
线上修改
ambari的GUI部分分为两块：
①ambari-admin 页面

②集群管理页面(ambari-web)

 
从发布结果来看
目录 /var/lib/ambari-server/resources/views/work/ 下面有好多组件的view，每一个目录都是一个子站点
对应访问地址：//[ambari-server host]:8080/views/[viewname]/[version]/[instance_name]/
viewname就是组件名
version就是大括号里的内容
instance_name是对应目录下view.xml 的auto-instance的name值
如 //192.168.0.35:8080/views/TEZ/0.7.0.2.5.3.0-136/TEZ_CLUSTER_INSTANCE/

 
而我们要找的ADMIN部分就是ADMIN_VIEW。里面内容如下

 
集群管理部分的在 /usr/lib/ambari-server/web 

如果只是想简单的改几个文字、替换几张图片的话 直接改这里面的内容就可以了。 
不过都是经过合并压缩的，直接修改很不方便(主要代码都压缩到了一个app.js中,7M+)。
 

源码结构
为了方便了解结构树，使用了一个在线脑图来展示。 

查看完整
 
技术点
 

 
 

 
编译环境的搭建
1.安装samba
因为需要用到nodejs、python等编译环境，并且nodejs有些库文件是需要C++ 、ruby、python等一些语言进行编译，在windows上处理会比较复杂，所以选择在Linux上搭建编译环境，并使用samba协议共享Linux中的文件，在linux上运行测试，在windows下进行代码修改。

安装samba

#先检查是否已经安装
#rpm -qa | grep samba

#未安装的话  执行安装命令
yum install samba

 

重启 SMB服务

service smb restart

 

在 Linux 上建立samba用户

useradd samba

 

创建 Smb 用户，此用户必须是 Linux 上已经建立的，输入密码，完成即可。

smbpasswd -a samba

 

关闭防火墙
确保setlinux关闭

setenforce 0

 

修改/etc/samba/smb.conf，在最后加入想要共享的文件夹：

[samba home]
    path = /home/samba
    writeable = yes
    guest ok = no 



现在就可以在windows上访问共享的目录了  在文件资源管理器上输入 \\<samba_ip> 即可 。注意ip前面有两个反斜线

 
2.安装编译环境

 安装JDK

yum install java-1.7.0-openjdk java-1.7.0-openjdk-devel
#默认安装路径： /usr/lib/jvm/java-1.7.0-openjdk

  

安装maven

yum -y install mavenmvn -v #验证安装情况

 

安装Python

yum -y install python
python -V #验证安装情况

 

安装rpm-build

rpm -qa | grep rpm-build #检验是否存在
 
yum install rpm-build

 

安装g++

#检测
rpm -qa | grep gcc-c++
 
#安装
yum install gcc-c++

 

安装Nodejs
首先要选择一个nodejs版本，注意如果python是2.6以上的话，nodejs则必须是4.0以上 版本地址。我使用的7.3.0
使用 wget 下载到某目录

wget //nodejs.org/dist/latest-v7.x/node-v7.3.0-linux-x64.tar.gz


解压

tar zxvf node-v7.3.0-linux-x64.tar.gz


设置 /etc/profile 中的环境变量 

......
export NODE_HOME="/opt/node-v7.3.0-linux-x64"
export PATH=$PATH:$NODE_HOME/bin

 使之生效

source /etc/profile


查看安装情况

node -vnpm -v



安装Brunch

npm install -g brunch

brunch  #检测

 

安装Git(如果代码是在本地的话，可略过这一步)

yum install git

git --version #检测

 使用git下载ambari代码


 
3.开始编译

cd 到ambari的主目录
给ambari打上版本号

mvn versions:set -DnewVersion=2.4.2.0  #后面这是四位的版本号，跟ambari版本保持一致即可

 

编译ambari

mvn -B -e clean install package rpm:rpm -DnewVersion=2.4.2.0 -DskipTests -Dpython.ver="python >= 2.6" -Preplaceurl  #四位版本号 与上一步一致


这一步会不断的下载依赖文件，时间可能会比较长 项目中需要使用nodejs中的npm管理依赖，有些依赖特别难下载，下载好之后会存放在ambari-web/node_modules中，在下次编译的时候可以对ambari-web/node_modules备份，下次编译的时候，可以先对项目进行mvn clean删除，然后再将备份的node_modules拷入项目中，重新执行mvn install操作，可以节省很多时间。


安装lodash.  cd到ambari-web/node-modules目录

npm install lodash --save
cd lodash
npm install --save sass-brunch

 

cd 到ambari-web目录下 执行命令

brunch watch --server

 顺利的话 打开网址 //<ambari-webserver ip>:3333 就能看到成果了



 
 
待整合内容
 
//stackoverflow.com/questions/29468404/gyp-warn-eacces-user-root-does-not-have-permission-to-access-the-dev-dir
 
插播1. 关于Brunch
Brunch自动化打包压缩编译工具。前端的工程化利器。
源码发生的改动会迅速反应到压缩结果。
官文请戳

确定安装好node.js
在全局安装brunch

npm install -g brunch

 

在当前目录创建项目 hellobrunch

brunch new hellobrunch -s es6

 创建成功后，当前目录会创建文件夹hellobrunch,生成一些结构和相关文件,并通过npm下载安装所有的依赖包(node_modules)

 

cd到刚创建的project目录(即hellobrunch),进行编译。编译压缩合并的结果会出现在 public文件夹

brunch build

 

其中：assets中的文件会被直接拷贝到publicbrunch-config存放的是压缩合并编译的规则package.json存放的是依赖包信息public/app.js及public/app.css是根据合并规则生成的合并结果*.map是用于调试的代码映射信息

 

现在一个简单的webapp就成型了 接下来就是启动。启动后 如果源码发生变化  public中的内容也会自动跟进变化

brunch watch --server


可以看到服务的端口是3333，所以我们可以在浏览器上通过//<ip>:3333 进行查看
 

安装插件 如jquery

npm install --save jquery

 应用：（在app/initialize.js的最后 添加以下代码。保存后会发现  public/app.js中已经出现了这个代码片段）

var $ = require(‘jquery‘);
console.log(‘Tasty Brunch, just trying to use jQuery!‘, $(‘body‘));

 



 
插播2：Ember.js
 与angularjs类似的前端框架
官文请戳
 
插播3：NPM
 nodejs包管理器

npm install -g <package-name>  #全局模式安装模块
npm install <package-name>      #在当前所在项目安装模块 (所以要进入项目目录)
npm install <package-name>@<version>  #安装指定版本的模块  （不指定的话 默认获取最新版）
npm install <package-name>@">=v1 <v2"  #指定版本范围
npm uninstall [-g]  <package name>  #卸载本地[全局]模块
npm update [-g] <package name>    #更新本地[全局]模块
var moduleA = require(‘<package-name>‘);  #使用模块

 如果出现[cannot find module ‘xxxx‘]的问题  参考//stackoverflow.com/questions/10776405/npm-cant-install-appjs-error-cannot-find-module-graceful-fs
 
 

 
Web内容修改
 我们先实现基于发布结果进行修改。
ambari-admin是使用angularjs开发，模板引擎技术也是使用简单的html片段。直接修改即可
 
     

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注WEB前端Node.js频道！