Ambari(三)----Ambari二次开发环境搭建(实时编译-部署)

总体思路:

对ambari-admin,ambari-web模块单独编译(因为二次开发主要是针对这两个模块)

利用brunch watch功能，对文件夹源码进行实时监控编译,提高开发效率

文章目录

一. Ambari源码编译安装

二. Linux环境设置

• 2.1 关闭防火墙
• 2.2 关闭selinux
• 2.3 安装npm依赖包

三. 使用samba建立共享连接

• 3.1 安装启动samba
• 3.2 配置共享文件夹
• 3.3 修改文件权限
• 3.4 本地访问共享文件
• 3.5 IDE导入共享文件夹中ambari项目

四. ambari-admin模块源码编译

• 4.1 修改.bowerrc配置
• 4.2 修改gulpfile.js文件
• 4.3 以webserver方式启动
• 4.4 以ambari-server服务真实环境启动

五. ambari-web模块源码编译

• 5.1 创建软链接
• 5.2 实时监控编译

四. 建立软链接

• 4.1 建立ambari-web软链接
• 4.2 建立ambari-admin软链接

五. 实时编译,部署

• 5.1 启动实时编译
• 5.2 修改源码,查看效果

一. Ambari源码编译安装

源码编译安装部分请参考我的上一篇博客:

ambari2.6.0源码编译安装及遇到的问题解决(超详细文档)

二. Linux环境设置

2.1 关闭防火墙

# 关闭防火墙
systemctl stop firewalld
# 开机时禁止启动防火墙
systemctl disable firewalld
# 查看防火墙状态
systemctl status firewalld

2.2 关闭selinux

临时关闭

setenforce 0 

永久关闭

vi /etc/selinux/config
# 将 SELINUX=enforcing  改成 SELINUX=disabled,重启生效

2.3 安装npm依赖包

安装node.js

# 下载/usr/lib目录下执行
wget https://nodejs.org/dist/v8.5.0/node-v8.5.0-linux-x64.tar.gz /usr/lib/node-v8.5.0-linux-x64.tar.gz
# 解压
tar zxvf node-v8.5.0-linux-x64.tar.gz

# 配置环境变量
vi /etc/hosts

#添加如下内容
export NODE_HOME="/usr/lib/node-v8.5.0-linux-x64"
export PATH=$PATH:$NODE_HOME/bin

# 使修改后的文件生效
source /etc/profile

查看安装情况

node -v
npm -v 

安装依赖

# 该命令需要等待较长时间,请确认网络状况良好
npm install

# 安装brunch
npm i -g brunch@1

三. 使用samba建立共享连接

3.1 安装启动samba

yum安装samba

# 检查samba是否安装
rpm -qa | grep samba
# 安装samba
yum install samba
# 重启samba
service smb restart

创建smb用户

# 创建samba用户
useradd samba
# smbpasswd -a 是添加用户的意思 后面跟的是用户名，此用户名一定要跟linux登录用户名一样
smbpasswd -a root #输入密码，完成即可

3.2 配置共享文件夹

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

我这里配置的MyShare文件夹为ambari源码路径的父路径

源码路径为:/opt/ambari/apache-ambari-2.6.0-src

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

[MyShare]
        path = /opt/ambari/
        public = yes
        writeable = yes
        guest ok = yes
        read only = no
        browseable = yes

ls

设置完毕之后需要重启samba

# 重启samba
service smb restart

3.3 修改文件权限

# 将[MyShare]配置的path目录归属设置为root
chown -R root. /opt/ambari 
# 赋予所有用户对该目录增删改的权限
chmod -R 777 /opt/ambari 

3.4 本地访问共享文件

1. 在windows本地电脑文件浏览器中输入\\ip地址,访问samba目录

2. 本地测试是否有增删改查的权限
3. 右击samba目录,选择映射网络驱动器

4. 在编辑器里打开网络驱动器里的项目进行编辑

3.5 IDE导入共享文件夹中ambari项目

以idea为例File–>Open,选择上一步映射的网络驱动器盘导入

这样就建立了idea–>linux(ambari的映射)

四. ambari-admin模块源码编译

4.1 修改.bowerrc配置

cd /opt/ambari/apache-ambari-2.6.0-src/ambari-admin/src/main/resources/ui/admin-web

vim .bowerrc

# 说明：添加一行"allow_root": true 允许以root用户执行bower命令。也可以在执行命令的时候通过参数设定 如：bower install –allow-root 
{
    "directory": "app/bower_components",
    "allow_root": true
}

4.2 修改gulpfile.js文件

说明:

// add为新增的地方

// edit为修改的地方

'use strict';
// generated on 2014-06-25 using generator-gulp-webapp 0.1.0

var gulp = require('gulp');

// load plugins
var $ = require('gulp-load-plugins')();

// add
var webserver = require('gulp-webserver');
var current = "test";
var config = {
    start_task:{
        test:"webserver",
        build:"build"
    }
};

// add
gulp.task('webserver', function(){
    gulp.src('app').pipe(webserver({
        port: 8000,//端口
        host: '172.16.87.154',//域名
        livereload: true,//实时刷新代码。不用f5刷新
        directoryListing: true,
        //fallback:'index.html',
        open:true
    }))
});



gulp.task('styles', function () {
  return gulp.src('app/styles/*.css')
    .pipe($.order([
      'app/styles/main.css',
      'app/styles/custom-admin-ui.css'   // This should always be the last stylesheet. So it can be dropped and be effective on build time
    ], { base: './' }))
    .pipe($.concat('main.css'))
    .pipe($.autoprefixer('last 1 version'))
    .pipe(gulp.dest('.tmp/styles'))
    .pipe($.size());
});

gulp.task('html', ['styles'], function () {
  var jsFilter = $.filter('**/*.js');
  var cssFilter = $.filter('**/*.css');

  return gulp.src('app/*.html')
    .pipe($.plumber())
    .pipe($.useref.assets({searchPath: '{.tmp,app}'}))
    .pipe(jsFilter)
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe(cssFilter.restore())
    .pipe($.useref.restore())
    .pipe($.useref())
    .pipe(gulp.dest('dist'))
    .pipe($.size());
});

gulp.task('views', function () {
  return gulp.src('app/views/**/*.html')
    .pipe(gulp.dest('dist/views'));
});

//add
gulp.task('xml',function(){
  return gulp.src('app/view.xml')
  .pipe(gulp.dest('dist'))
});

gulp.task('images', function () {
  return gulp.src('app/images/**/*')
    .pipe(gulp.dest('dist/images'))
    .pipe($.size());
});

gulp.task('fonts', function () {
  return $.bowerFiles()
    .pipe($.filter('**/*.{eot,svg,ttf,woff}'))
    .pipe($.flatten())
    .pipe(gulp.dest('dist/fonts'))
    .pipe($.size());
});

gulp.task('extras', function () {
  return gulp.src(['app/*.*', '!app/*.html'], {dot: true})
    .pipe(gulp.dest('dist'));
});

gulp.task('clean', function () {
  return gulp.src(['.tmp', 'dist'], {read: false}).pipe($.clean());
});

//edit
gulp.task('build', ['html', 'views', 'images', 'fonts', 'xml', 'extras']);

//edit
gulp.task('default', ['clean'], function () {
  gulp.start(config.start_task[current]);
});

---

gulp提供两种方式编译.

一种是webserver的方式，单独启动一个web服务，来测试修改后的ambari-Admin。

另一种是直接编译后软链接到ambari-server以真实环境来测试。

共同步骤:

修改gulpfile.js文件

var current = "test";

启动gulp

gulp

4.3 以webserver方式启动

访问界面查看效果:

界面链接: http://ip:8000/index.html

如下图所示:

4.4 以ambari-server服务真实环境启动

建立软链接

1. 切换到ambari-server对应admin页面的目录下

 cd  /var/lib/ambari-server/resources/views/work

2. 备份 ADMIN_VIEW{2.6.0.0}

mv ADMIN_VIEW\{2.6.0.0\} ADMIN_VIEW\{2.6.0.0\}.bak

3. 建立软链接

ln -s /opt/ambari/apache-ambari-2.6.0-src/ambari-admin/src/main/resources/ui/admin-web/dist ADMIN_VIEW\{2.6.0.0\}

复制文件

cd ADMIN_VIEW\{2.6.0.0\}.bak/
# 复制ADMIN_VIEW{2.6.0.0}.bak里的view.xml文件到ADMIN_VIEW{2.6.0.0}

# 复制ADMIN_VIEW{2.6.0.0}.bak里的view.xml文件到ADMIN_VIEW{2.6.0.0}
cp view.xml ../ADMIN_VIEW\{2.6.0.0\}


# 复制ADMIN_VIEW{2.6.0.0}.bak里的view.xml文件到/opt/apache-ambari-2.6.0-src/ambari-admin/src/main/resources/ui/admin-web/app

cp view.xml /opt/ambari/apache-ambari-2.6.0-src/ambari-admin/src/main/resources/ui/admin-web/app/

重启ambari-server

ambari-server restart

界面访问: http://ip:port(默认8080) 查看效果

五. ambari-web模块源码编译

5.1 创建软链接

cd /usr/lib/ambari-server
# 备份web
mv web web.bak
# 创建软链接
ln -s /opt/ambari/apache-ambari-2.6.0-src/ambari-web/public web

5.2 实时监控编译

监控编译

# 编译
brunch build
# 实时监控编译
brunch watch

重启ambari-server

ambari-server restart

idea上修改代码,界面上查看代码修改效果

界面链接: http://ip:port(默认8080)