Quantcast
Channel: VMware Communities : Blog List - All Communities
Viewing all articles
Browse latest Browse all 3135

vCenter 6.7 u1 の HTML5 vSphere Client をクリスマス風にしてみる。

$
0
0

日本の vExperts Advent Calendar 2018 の 1日目の投稿です。

 

vExperts Advent Calendar 2018

https://adventar.org/calendars/3101

 

1日目なのでクリスマス色のつよい Tips をお伝えしたいと思います。

そこで、lamw さんの Tips を参考に vSphere Client の色を変更してみます。

Add custom color to vSphere HTML5 UI Header/Footer in vSphere 6.7 Update 1 · GitHub

 

当然ながら HTML5 のハックは非サポートですので、

自宅ラボなどで気分を出すためにご利用いただければと思います。

この投稿でも、既存環境への適用を避けて新規の VCSA 6.7 u1 をデプロイします。

 

vCenter Server Appliance (VCSA) のデプロイ。

今回は、デプロイ手順を簡略化するため CLI を利用します。

vcsa-deploy.exe での CLI デプロイは、ちゃんとサポートされる方法です。

VCSA 6.7 を CLI デプロイしてみる。(embedded-PSC x2 の Enhanced Linked Mode)

 

デプロイ環境について。

 

VCSA は、この投稿時点で最新のバージョンを利用します。

  • バージョン: VMware vCenter Server 6.7 Update 1 ビルド 10244745
  • インストーラ: VMware-VCSA-all-6.7.0-10244745.iso

 

デプロイ先として、ESXi 6.7 u1 環境はセットアップずみです。

  • ESXi インストールずみ。
  • VCSA の Tiny デプロイのスペック以上のマシンが必要。
    • CPU 2コア(スレッド)以上
    • メモリは最小 16GB程度(ESXi と VCSA の 10GB を搭載できる程度)
    • ディスク
  • データストア名、ポートグループ名はそのまま。
  • ネットワーク / DNS アドレスはデプロイ環境にあわせる。
  • ユーザ / パスワードは、いつものデモ用のもの。

 

CLI で指定するデプロイ設定のファイル(JSON のテキストファイル)は下記のようにしました。

 

lab-vcsa-67u1.json · GitHub

  • 今回のハックのために、SSH アクセスを有効化しています。
  • 正式には system_name で VCSA のアドレスで FQDN のホスト名を指定しますが、
    ラボでの DNS レコード省略のため IP アドレスににします。

{

    "__version": "2.13.0",

    "__comments": "deploy a VCSA with an embedded-PSC on an ESXi host.",

    "new_vcsa": {

        "esxi": {

            "hostname": "192.168.1.20",

            "username": "root",

            "password": "VMware1!",

            "deployment_network": "VM Network",

            "datastore": "datastore1"

        },

        "appliance": {

            "thin_disk_mode": true,

            "deployment_option": "tiny",

            "name": "lab-vcsa-67u1"

        },

        "network": {

            "ip_family": "ipv4",

            "mode": "static",

            "ip": "192.168.1.55",

            "dns_servers": [

                "192.168.1.101",

                "192.168.1.102"

            ],

            "prefix": "24",

            "gateway": "192.168.1.1",

            "system_name": "192.168.1.55"

        },

        "os": {

            "password": "VMware1!",

            "ntp_servers": [

                "192.168.1.101",

                "192.168.1.102"

            ],

            "ssh_enable": true

        },

        "sso": {

            "password": "VMware1!",

            "domain_name": "vsphere.local"

        }

    },

    "ceip": {

        "settings": {

            "ceip_enabled": false

        }

    }

}

 

VCSA デプロイの実施。

それでは、Windows クライアントからデプロイします。

VCSA のインストーラは F: ドライブにマウントしています。

 

事前チェック

※ lab-vcsa-67u1.json はファイルを配置したパスを指定します。

PS> cd F:/vcsa-cli-installer/win32/

PS> ./vcsa-deploy.exe install --no-esx-ssl-verify --accept-eula --precheck-only~/lab-vcsa-67u1.json

 

デプロイ実行

PS> ./vcsa-deploy.exe install --no-esx-ssl-verify --accept-eula ~/lab-vcsa-67u1.json

 

デプロイ処理が完了すると、HTML5 の

vSphere Client にアクセスできるようになります。

vcsa-html5-hack-01.png

 

HTML5 Client(vSphere Client)の色を変更してみる。

※ここからは非サポートの方法です。

 

今回は、スクリプトを用意してみました。

Add custom color to vSphere HTML5 UI Header/Footer in vSphere 6.7 Update 1 · GitHub

 

NotSupported_H5ClientHacks-Xmas.sh ファイルの内容

  • 元ファイルを、いちおうバックアップ。
  • ファイルの置き換えからサービス再起動まで実行。
  • 色がクリスマス風。

NEW_HEADER_HEX_COLOR=006400

NEW_BOTTOM_HEX_COLOR=8b0000

BACKUP_FILE=/usr/lib/vmware-vsphere-ui/plugin-packages/root-app/plugins/h5ngc.war.bak

if [ ! -e ${BACKUP_FILE} ]; then

  cp /usr/lib/vmware-vsphere-ui/plugin-packages/root-app/plugins/h5ngc.war ${BACKUP_FILE}

fi

mkdir -p /root/work

cd /root/work

cp /usr/lib/vmware-vsphere-ui/plugin-packages/root-app/plugins/h5ngc.war .

unzip h5ngc.war

rm -f h5ngc.war

cat << EOF >> resources/css/NotSupported_H5ClientHacks.css

.main-nav HEADER{

  background-color:#${NEW_HEADER_HEX_COLOR} !important; }

bottom-panel toggle-splitter {

  background: #${NEW_BOTTOM_HEX_COLOR} !important; }

EOF

sed -i '/--%>/a \

\n   <link href="resources/css/NotSupported_H5ClientHacks.css" rel="stylesheet"/>' WEB-INF/views/index.jsp

zip -r /root/h5ngc.war config  error.jsp  locales  META-INF  notfound.jsp  plugin.xml  resources  webconsole.html  WEB-INF

cd /root

rm -rf /root/work

cp /root/h5ngc.war /usr/lib/vmware-vsphere-ui/plugin-packages/root-app/plugins/

service-control --stop vsphere-ui; service-control --start vsphere-ui

 

VCSA に SSH でログインして、shell を起動します。

[gowatana@infra-jbox-01 ~]$ ssh root@192.168.1.55

 

VMware vCenter Server Appliance 6.7.0.20000

 

Type: vCenter Server with an embedded Platform Services Controller

 

root@192.168.1.55's password:

Last login: Sat Dec  1 03:46:41 2018 from 192.168.1.103

Connected to service

 

    * List APIs: "help api list"

    * List Plugins: "help pi list"

    * Launch BASH: "shell"

 

Command>shell

Shell access is granted to root

root@photon-machine [ ~ ]#

 

スクリプトをダウンロードして、実行します。

root@photon-machine [ ~ ]# curl -O https://gist.githubusercontent.com/gowatana/a82d8038c7994e317484d747e8edf461/raw/NotSupported_H5ClientHacks-Xmas.sh

root@photon-machine [ ~ ]# bash ./NotSupported_H5ClientHacks-Xmas.sh

 

もしくは、ダウンロード~実行をまとめることもできます。

root@photon-machine [ ~ ]# curl https://gist.githubusercontent.com/gowatana/a82d8038c7994e317484d747e8edf461/raw/NotSupported_H5ClientHacks-Xmas.sh | bash

 

サービスの再起動をまって HTML5 の vSphere Client にアクセスすると、

クリスマス風になります。

vcsa-html5-hack-02.png

 

元に戻す場合は、下記のようにバックアップ ファイルをリストアして、

サービスを再起動します。

root@photon-machine [ ~ ]# cp /usr/lib/vmware-vsphere-ui/plugin-packages/root-app/plugins/h5ngc.war.bak /usr/lib/vmware-vsphere-ui/plugin-packages/root-app/plugins/h5ngc.war

root@photon-machine [ ~ ]# service-control --stop vsphere-ui; service-control --start vsphere-ui

 

以上、vSphere Client をクリスマスカラーにしてみる話でした。

vE アドベントカレンダー 2日目は kmassue さんの予定です。よろしくお願いします。


Viewing all articles
Browse latest Browse all 3135

Trending Articles