Ambari2.6ソースコードコンパイルambari-admin

Ambariソースコンパイルambari-admin
ambari-adminはangularjs+bower+gulpを使用しています
1.準備
1.1ソースのダウンロード
wgetのインストール

yum -y install wget

ソースのダウンロード
ソースコードを/optディレクトリにダウンロード

wget http://www.apache.org/dist/ambari/ambari-2.6.0/apache-ambari-2.6.0-src.tar.gz -O /opt/apache-ambari-2.6.0-src.tar.gz

1.2コンパイル環境の構成
1.2.1 nodeをインストールします.js
ダウンロード

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

環境変数の設定

export NODE_HOME="/usr/lib/node-v8.5.0-linux-x64"
export PATH=$PATH:$NODE_HOME/bin

変更したファイルを有効にする

source /etc/profile    . /etc/profile

インストール状況の表示

node -v
npm -v

1.2.2 bzip 2のインストール

yum install bzip2

1.2.3 gitのインストール

yum -y install git

2.コンパイル
ambari-adminはangularjs+bower+gulpを使用しています
2.1修正bowerc構成
2.1.1ディレクトリの切り替え

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

2.1.2修正bowerrc

vim .bowerrc

2.1.3コンテンツ

{
    "directory": "app/bower_components",
    "allow_root": true
}

説明:行"allow_root": trueを追加すると、rootユーザーでbowerコマンドを実行できます.コマンドを実行するときに、bower install–allow-rootなどのパラメータ設定を行うこともできます.
2.2 npm依存パッケージのインストール

npm install

2.3グローバルgulpのインストール

npm install -g gulp

2.4グローバルbowerのインストール

npm install -g bower

2.5 bowerの依存パッケージのインストール

bower install

2.6 gulp-webserverのインストール

npm install gulp-webserver --save-dev

2.7 gulpfileを修正する.jsファイル
注記//+の箇所は新規または修正が必要な箇所です

'use strict';

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

//+     current   test  webserver     ，   build    
var current = "test";
var config = {
    start_task:{
        test:"webserver",
        build:"build"
    }
};

//+
gulp.task('webserver', function(){
    gulp.src('app').pipe(webserver({
        port: 8000,//  
        host: '192.168.162.127',//  
        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'));
});

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

gulp.task('images', function () {
  return gulp.src('app/img/**/*')
    .pipe(gulp.dest('dist/img'))
    .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());
});
//+
gulp.task('build', ['html', 'views', 'images', 'fonts','xml', 'extras']);

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

3.コンパイル
gulpは2つの方式のコンパイルを提供し、1つはwebserverの方式で、単独で1つのwebサービスを起動して、修正後のambari-Adminをテストします.もう1つは、直接コンパイルした後、ambari-serverにソフトリンクして実際の環境でテストすることです.
3.1 webserverで起動
3.1.1 gulpfileを修正する.jsファイル

var current = "test";

3.1.2 gulpを起動する

gulp

3.1.3テスト
アクセスhttp://192.168.162.127:8000/index.html#/で行ないます.
3.2 ambari-serverサービスリアル環境で起動
3.2.1 gulpfileを修正する.jsファイル

var current = "test";

3.2.2 gulpを起動する

gulp

3.2.3ソフトリンクの作成
ambari-server対応adminページのディレクトリに切り替えます

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

ADMINのバックアップVIEW{2.6.0.0}

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

ソフトリンクの作成

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

ADMIN_のコピーVIEW{2.6.0.0}.バックの中のビューxmlファイルからADMIN_へVIEW{2.6.0.0}

cp view.xml ../ADMIN_VIEW\{2.6.0.0\}

ADMIN_のコピーVIEW{2.6.0.0}.バックの中のビューxmlファイルは/opt/apache-ambari-2.6.0-src/ambari-admin/src/main/resources/ui/admin-web/app

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

3.2.4 ambari-serverの再起動

ambari-server restart

3.2.5テスト
アクセスhttp://192.168.162.127:8080効果の表示