vCenter 6.7 u1 の HTML5 vSphere Client をクリスマス風にしてみる。
-
日本の 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 のテキストファイル）は下記のようにしました。
- 今回のハックのために、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 にアクセスできるようになります。
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 ' 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 [email protected]
VMware vCenter Server Appliance 6.7.0.20000
Type: vCenter Server with an embedded Platform Services Controller
[email protected]'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 にアクセスすると、
クリスマス風になります。
元に戻す場合は、下記のようにバックアップ ファイルをリストアして、
サービスを再起動します。
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 さんの予定です。よろしくお願いします。
https://communities.vmware.com/people/gowatana/blog/2018/11/30/vcsa-html5-hack
© Lightnetics 2024