BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. その他全般

NoVNCがVNCのリモート接続をWebベースで実現する方法

2022-01-18 02:27:48

https://github.com/novnc

I. noVNCとは

noVNC は、HTML 5 WebSocket、Canvas、JavaScriptで実装されたHTML5 VNCクライアントです。noVNCは、OpenStack DashboardやOpenNebula Sunstoneといった主要なクラウドコンピューティングや仮想マシンコントロールパネルでよく使われており、どちらもnoVNCを使用しています。
noVNCはWebSocketを使用して実装されていますが、現在ほとんどのVNCサーバはWebSocketをサポートしていないため、noVNCはVNCサーバに直接接続できず、WebSocketとTCPソケット間の変換を行うプロキシが必要です。このプロキシはnoVNCのディレクトリにあり、websockifyと呼ばれています。

**目的：ブラウザ経由でWindowsデスクトップにリモートアクセスする。

**原理:** ブラウザはVNCをサポートしていないので、VNCに直接接続することはできませんが、プロキシを使用することはできます。WebSocket経由で接続を確立するにはnoVNCを使用し、VNC ServerはWebSocketをサポートしていないので、WebSocketとTCP Socket間の変換を行うためにWebsockifyプロキシを有効にする必要があります。

II. CentOS 7にnovncをインストールする

1. 環境 

[root@novnc ~]# cat /etc/redhat-release 
CentOS Linux release 7.6.1810 (Core) 
[root@novnc ~]# ifconfig eth0|awk 'NR==2{print $2}'
10.0.0.60
setenforce 0
systemctl stop firewalld
systemctl disable firewalld

2. インストールの設定

デスクトップ環境をインストールする

CentOS 7にデスクトップ環境をインストールする方法

tigervncのインストール 

#Install dependent packages
wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo
curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
yum install -y git tigervnc-server -y

VNCサービスを起動し、パスワードを入力します 

[root@novnc ~]# vncserver :1

You will require a password to access your desktops.

Password:
Verify:
Would you like to enter a view-only password (y/n)? y
Password:
Verify:

New 'novnc:1 (root)' desktop is novnc:1

Creating default startup script /root/.vncCreating default config /root/.vncStarting applications specified in /root/.vncLog file is /root/.vnc/novnc:1.log

#When vncserver :1 is set to 1, the following port number to run VNC should be 5900+1, that is 5901, the default port of VNC is 5900.

#write boot-up
chmod +x /etc/rc.d/rc.local
echo '/usr/bin/vncserver :1' >>/etc/rc.d/rc.local

ログを見る

cat /root/.vnc/novnc:1.log

ポートを表示する 

[root@novnc utils]# netstat -lntup|grep 59
tcp 0 0 0 0.0.0.0:5901 0.0.0.0:* LISTEN 8380/Xvnc           
tcp6 0 0 :::5901 :::* LISTEN 8380

noVNCのインストール

git clone https://github.com/novnc/noVNC.git

セキュアな接続を作成する（ずっと後ろから入力する）

デフォルトのVNCセッションは安全ではありません。安全なVNC接続を作成する必要があり、内容を入力するよう促されますが、これらのフィールドを全て埋める必要はありません。websockifyはnoVNCを起動する際に自動的に証明書を読み込みます。 

#To place the generated self.pem file under noVNCcd . /noVNC/utilsopenssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem

noVNCの実行 

[root@novnc noVNC]# pwd
/root[root@novnc noVNC]# . /utils/launch.sh --vnc localhost:5901

アクセス接続のテスト

http://ip:6080/vnc.html

ブートアップの設定 

echo '. /root/noVNC/utils/launch.sh --vnc localhost:5901 &' >>/etc/rc.d/rc.local

遅い接続を修正するためにnumpyをインストールする:.

https://sourceforge.net/projects/numpy/files 

#install python dependencies
yum install python-dev python-devel -y
#Upload the archive and unzip it
unzip numpy-1.11.2.zip
cd numpy-1.11.2python setup.py install

3. ワンクリックでインストールできるスクリプト 

[root@novnc scripts]# cat novnc_install.sh 
#! /bin##############################################################
# File Name: novnc_install.sh
# Version: V1.0
# Author: lcx
# Organization: www.in365robot.com
##############################################################
# Environment optimization
setenforce 0
systemctl stop firewalld
systemctl disable firewalld

# install vncserver && git
yum install -y epel*
yum install tigervnc-server git -y

# Start the VNC service and enter the password
echo 'Please enter your password:'
vncserver :1

# download noVNC
git clone git://github.com/kanaka# Create a secure connection
cd . /noVNC/utilsopenssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem
# run noVNC
cd . /cd .
. /utils/launch.sh --vnc localhost:5901 &
echo 'Please visit http://ip:6080/vnc.html '
# Self-boot
chmod +x /etc/rc.d/rc.local
echo '/usr/bin/vncserver :1' >>/etc/rc.d/rc.local
echo '. /root/noVNC/utils/launch.sh --vnc localhost:5901 &' >>/etc/rc.d/rc.local


[root@novnc scripts]# chmod +x /server/scripts/novnc_install.sh 
[root@novnc scripts]# ll /server/scripts/novnc_install.sh 
-rwxr-xr-x. 1 root root 903 Dec 24 18:25 /server/scripts/novnc_install.sh

III. novncのWindowsインストール

目標：ブラウザーによるWindowsデスクトップへのリモートアクセス

Windows 7 32bitの仮想マシンを用意する

1.環境

UtralVNCです。

VNC Server for Windows環境、アクセスが必要なターゲットマシーンにインストールされています。

ヒント：本番環境はWindows 7 32bitです。UtralVNCソフトウェアをダウンロードする際は、以前の旧バージョンをダウンロードしてください。

Node.jsです。

Websockify.jsを実行するために使用します。Python版のWebsockifyもありますが、Windowsでは動きません。

ノーヴイエヌシー

noVNC は HTML5 の VNC クライアントです。

websockify-js :

noVNCはwebsocktでリンクされており、VNCサーバはwebsocktをサポートしていないため、websocktを有効にする必要があります。 websockify プロキシを使用して、WebSocket と TCP ソケット間の変換を行うことができます。

2.InstallutralNVCサーバー

UltraVNCソフトウェアをリモートアシスタンスが必要なコンピュータにコピーし、ダブルクリックで開いてインストールします。

Select Components]画面では、必要なコンポーネントを選択しますが、ここでは[UltraVNC Server]と[UltraVNC Viewer]を選択することになります。リモートアシスタンスが必要な場合は、[UltraVNC Server]と[UltraVNC Viewer]を選択する必要があります。次へ]をクリックすると、次のステップのインストールが始まります。

インストール後、デスクトップにショートカットが表示されます。青色のものがサービスのショートカットで、薄緑色のものがリモート接続ツールです。また、システムトレイに空色の目のアイコンがあるプログラムがありますが、これはvncサーバーです。

小さな目のアイコンを右クリックしてメニューを表示し、[サービスの開始]をクリックしてコンピューターを再起動します。

Admin Properties]をクリックすると、接続のためのパスワードが、運用パスワードと閲覧専用パスワードに分かれて設定されます。

3. Node.jsをインストールする

npm パッケージマネージャーを選択します。

node.jsのインストールが完了したら、ws, optimistモジュールをインストールする必要があります（websockify.jsファイルの実行に必要です）。

npm install ws

npm install optimist

npm install mime-types

wsとoptimistをインストールすると、C:Users Indministratorの下にnode_modulesディレクトリが作成されます。

4. noVNCとwebsockifyのインストール

noVNC.zip を node_modules ディレクトリに展開し、websockify-master.zip を noVNC ディレクトリに展開します。

5. websockify.jsを実行する

ポート9000のhttpリンクをポート5900に転送する（UltraVNC Serverのデフォルトポートは5900です）

C:\Usersroot-JPNODE_modules-JPNECwebsockify-js-master;node websockify.js --web C:\Usersroot-JPNEC 9000 localhost:5900

ブラウザで http://192.168.1.163:9000/会出现这样的提示 をご覧ください。

を配置する必要があります。 websockify.js の中に filename += '/index.html' から 

filename += '/vnc.html';

リンクをクリックすると、UltraVNC Doneで設定したパスワードを入力することができます。


6. ファイアウォール新規受信ルール

アクセスが拒否された場合、ポート9000へのアクセスを許可する必要があります。

7. Windows起動時の設定

Windows自動起動batスクリプトへのリンク

#1. デスクトップ新規自己起動バッチファイル start.bat
/{br エコーオフ
start "cmd" "cd C:\Usersroot_modulesnoVNCwebsockify-js-master

実行ファイルを開き、次のように入力します。 shell:startup 入力します。起動ファイルstart.batをフォルダに入れる

IV. オープンなmicroPionを経由してnoVNCにアクセスする

ワンクリック生成スクリプトを実行し、open MicroPionサーバーでクライアント証明書を生成します。 

novnc01
# View intranet IP information
[root@open micropion-novnc ~]# ifconfig eth0|awk 'NR==2{print $2}'
172.17.43.166
# View public IP information
[root@open micropion-novnc ~]# curl ifconfig.me
182.92.226.114

[root@open微皮恩-novnc ~]#git clone https://github.com/Nyr/open微皮恩-install.git

[root@open micropion-novnc ~]# ls open micropion-installLICENSE.txt openmicropion-install.sh README.md

[root@openmicropion-novnc openmicropion-install]# cd openmicropion-install/ && bash openmicropion-install.sh 

# install steps see previous documentation, generate client certificate with one click
[10:54 root@openvpn-novnc ~/openvpn-install]# bash openvpn-install.sh 
Looks like OpenVPN is already installed.

What do you want to do?
   1) Add a new user
   2) Revoke an existing user
   3) Remove OpenVPN
   4) Exit
Select an option: 1

Tell me a name for the client certificate.
Client name: novnc

Using SSL: openssl OpenSSL 1.0.2k-fips 26 Jan 2017
Generating a 2048 bit RSA private key
........................................................................................... +++
........... +++
writing new private key to '/etc/openvpn/server/easy-rsa/pki/private/novnc.key.XHM8ERJnnn'
-----
Using configuration from . /safessl-easyrsa.cnf
Check that the request matches the signature
Signature ok
The Subject's Distinguished Name is as follows
commonName :ASN.1 12:'novnc01'
Certificate is to be certified until Dec 27 02:56:23 2029 GMT (3650 days)

Write out database with 1 new entries
Data Base Updated

Client novnc01 added, configuration is available at: /root/novnc.ovpn


# View intranet IP information
[root@open micropion-novnc ~]# ifconfig eth0|awk 'NR==2{print $2}'
172.17.43.166
# View public IP information
[root@open micropion-novnc ~]# curl ifconfig.me
182.92.226.114

[root@open微皮恩-novnc ~]#git clone https://github.com/Nyr/open微皮恩-install.git

[root@open micropion-novnc ~]# ls open micropion-installLICENSE.txt openmicropion-install.sh README.md

[root@openmicropion-novnc openmicropion-install]# cd openmicropion-install/ && bash openmicropion-install.sh 

# install steps see previous documentation, generate client certificate with one click
[10:54 root@openvpn-novnc ~/openvpn-install]# bash openvpn-install.sh 
Looks like OpenVPN is already installed.

What do you want to do?
   1) Add a new user
   2) Revoke an existing user
   3) Remove OpenVPN
   4) Exit
Select an option: 1

Tell me a name for the client certificate.
Client name: novnc

Using SSL: openssl OpenSSL 1.0.2k-fips 26 Jan 2017
Generating a 2048 bit RSA private key
........................................................................................... +++
........... +++
writing new private key to '/etc/openvpn/server/easy-rsa/pki/private/novnc.key.XHM8ERJnnn'
-----
Using configuration from . /safessl-easyrsa.cnf
Check that the request matches the signature
Signature ok
The Subject's Distinguished Name is as follows
commonName :ASN.1 12:'novnc01'
Certificate is to be certified until Dec 27 02:56:23 2029 GMT (3650 days)

Write out database with 1 new entries
Data Base Updated

Client novnc01 added, configuration is available at: /root/novnc.ovpn

生成された証明書をnovncがインストールされたPCクライアントにアップロードします。

クライアントソフトウェアopenvpn-guiのWindows 7版のダウンロード

https://www.techspot.com/downloads/5182-openvpn.html

接続を行う

別のPCクライアントで証明書を生成し、同様に接続にアクセスする

openvpnが切断された場合、novncの接続も切断されます。

この記事はNoVNC - VNCリモート接続をWebの方法で配信する、が全てです。NoVNC Web way delivering VNC remote connections についての詳しい情報は、BinaryDevelop の過去の記事を検索するか、以下の関連記事を引き続き参照してください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します