NoVNC以Web方式交付VNC遠(yuǎn)程連接的方法

更新時(shí)間：2021年09月29日 16:07:13 作者：Linux丶晨星

noVNC是一個(gè) HTML5 VNC 客戶端，采用 HTML 5 WebSockets, Canvas 和 JavaScript 實(shí)現(xiàn)，這篇文章主要介紹了NoVNC以Web方式交付VNC遠(yuǎn)程連接的方法，感興趣的朋友一起看看吧

https://github.com/novnc/noVNC

一、noVNC是什么

noVNC是一個(gè) HTML5 VNC 客戶端，采用 HTML 5 WebSockets, Canvas 和 JavaScript 實(shí)現(xiàn)，noVNC 被普遍用在各大云計(jì)算、虛擬機(jī)控制面板中，比如 OpenStack Dashboard 和 OpenNebula Sunstone 都用的是 noVNC。
noVNC采用WebSockets實(shí)現(xiàn)，但是目前大多數(shù)VNC服務(wù)器都不支持 WebSockets，所以noVNC是不能直接連接 VNC 服務(wù)器的，需要一個(gè)代理來(lái)做WebSockets和TCP sockets 之間的轉(zhuǎn)換。這個(gè)代理在noVNC的目錄里，叫做websockify 。

**目標(biāo)：**通過(guò)瀏覽器遠(yuǎn)程訪問(wèn)Windows桌面。

**原理：**瀏覽器不支持VNC，所以不能直接連接VNC，但是可以使用代理，使用noVNC通過(guò)WebSocket建立連接，而VNC Server不支持WebSocket，所以需要開(kāi)啟Websockify代理來(lái)做WebSocket和TCP Socket之間的轉(zhuǎn)換。

二、CentOS 7 安裝novnc

1. 環(huán)境

[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. 安裝配置

安裝桌面環(huán)境

如何在CentOS7上安裝桌面環(huán)境

安裝tigervnc

#安裝依賴軟件包
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

啟動(dòng)VNC服務(wù)并輸入密碼

[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/.vnc/xstartup
Creating default config /root/.vnc/config
Starting applications specified in /root/.vnc/xstartup
Log file is /root/.vnc/novnc:1.log

#當(dāng)執(zhí)行vncserver :1設(shè)置為1時(shí)，下面要運(yùn)行VNC是的端口號(hào)應(yīng)該是5900+1，那就是5901，VNC的默認(rèn)端口是5900。

#寫(xiě)入開(kāi)機(jī)自啟動(dòng)
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:5901            0.0.0.0:*               LISTEN      8380/Xvnc           
tcp6       0      0 :::5901                 :::*                    LISTEN      8380/Xvnc

安裝noVNC

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

創(chuàng)建安全連接(一路回車)

VNC的默認(rèn)會(huì)話不是安全的，我們需要?jiǎng)?chuàng)建一個(gè)安全的VNC連接，會(huì)發(fā)現(xiàn)提示需要輸入內(nèi)容，這些字段我們并不需要都進(jìn)行填寫(xiě)，當(dāng)啟動(dòng)noVNC時(shí)，websockify將自動(dòng)裝載證書(shū)。

#要將生成的self.pem文件放到noVNC/utils底下
cd ./noVNC/utils/
openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem

運(yùn)行noVNC

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

測(cè)試進(jìn)行訪問(wèn)連接

http://ip:6080/vnc.html

設(shè)置開(kāi)機(jī)自啟動(dòng)

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

安裝numpy，解決連接速度慢：

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

#安裝python依賴
yum install python-dev python-devel -y
#上傳壓縮包解壓
unzip numpy-1.11.2.zip
cd numpy-1.11.2/
python setup.py install

3. 一鍵安裝腳本

[root@novnc scripts]# cat novnc_install.sh 
#!/bin/bash
##############################################################
# File Name: novnc_install.sh
# Version: V1.0
# Author: lcx
# Organization: www.in365robot.com
##############################################################
# 環(huán)境優(yōu)化
setenforce 0
systemctl stop firewalld
systemctl disable firewalld

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

#啟動(dòng)VNC服務(wù)并輸入密碼
echo '請(qǐng)輸入密碼:'
vncserver :1

# download noVNC
git clone git://github.com/kanaka/noVNC
# 創(chuàng)建安全連接
cd ./noVNC/utils/
openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem
# run noVNC
cd ../
./utils/launch.sh --vnc localhost:5901 &
echo '請(qǐng)?jiān)L問(wèn) http://ip:6080/vnc.html '
# 自啟動(dòng)
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

三、Windows 安裝novnc

實(shí)現(xiàn)目標(biāo)：通過(guò)瀏覽器遠(yuǎn)程訪問(wèn)Windows桌面

準(zhǔn)備一臺(tái)Windows7 32位的虛擬機(jī)

1. 環(huán)境

UtralVNC：

Windows環(huán)境下的VNC Server，在你需要訪問(wèn)的目標(biāo)機(jī)器上安裝。

此處提示：生產(chǎn)需求為Windows7 32位，在下載UtralVNC軟件時(shí)請(qǐng)下載之前的較舊版本，最新版會(huì)不兼容。

Node.js：

用于執(zhí)行Websockify.js。Websockify還有Python版本的，不過(guò)在Windows下不可以成功。

noVNC：

noVNC是一個(gè)HTML5 VNC客戶端

websockify-js：

noVNC是通過(guò)websockt建立鏈接，而VNC server不支持websocket，所以需要開(kāi)啟websockify代理來(lái)做 WebSockets 和 TCP sockets 之間的轉(zhuǎn)換。

2. 安裝utralNVC server

將UltraVNC軟件復(fù)制到需要遠(yuǎn)程協(xié)助的電腦上雙擊打開(kāi)安裝。

在【Select Components】界面按需要選擇上需要的組件，這里將【UltraVNC Server】和【UltraVNC Viewer】選擇上。當(dāng)需要遠(yuǎn)程協(xié)助時(shí)安裝的電腦必須選擇上【UltraVNC Server】，【UltraVNC Viewer】是用來(lái)遠(yuǎn)程協(xié)助的工具。點(diǎn)擊【next】進(jìn)行下一步安裝。

安裝完成后桌面就會(huì)有快捷方式,天藍(lán)色的是服務(wù)的快捷方式，淺綠色是遠(yuǎn)程連接的工具。同時(shí)系統(tǒng)托盤(pán)上會(huì)有一個(gè)天藍(lán)色的眼睛圖標(biāo)的程序，這個(gè)就是vnc server。

右鍵小眼睛圖標(biāo)打開(kāi)菜單，點(diǎn)擊【Start Service】并重啟電腦。

點(diǎn)擊【Admin Properties】打開(kāi)配置連接的密碼，連接的密碼分為可操作的密碼跟只看的密碼。

3. 安裝Node.js

選擇npm package manager

node.js安裝完成后，需要安裝ws、optimist模塊（執(zhí)行websockify.js文件所需）

npm install ws

npm install optimist

npm install mime-types

安裝完ws和optimist后會(huì)在C:\Users\Administrator\下生成node_modules目錄

4. 安裝noVNC和websockify

把noVNC.zip解壓到node_modules目錄下，再把websockify-master.zip解壓到noVNC目錄下。

5. 執(zhí)行websockify.js

轉(zhuǎn)發(fā)9000端口的http鏈接到5900端口（UltraVNC Server的默認(rèn)端口為5900）

C:\Users\root\node_modules\noVNC\websockify-js-master\websockify>node websockify.js --web C:\Users\root\node_modules\noVNC 9000 localhost:5900

在瀏覽器訪問(wèn)http://192.168.1.163:9000/會(huì)出現(xiàn)這樣的提示

需要把websockify.js中的filename += ‘/index.html'改成filename += ‘/vnc.html';

點(diǎn)擊鏈接輸入U(xiǎn)ltraVNC設(shè)置的密碼完成。

6. 防火墻新建入站規(guī)則

如果被禁止訪問(wèn)，需要允許訪問(wèn)的9000端口進(jìn)入

7. Windows開(kāi)機(jī)自啟動(dòng)設(shè)置

windows自啟動(dòng)bat腳本鏈接

#1. 桌面新建自啟動(dòng)批處理文件start.bat
@echo off
start "cmd" "cd C:\Users\root\node_modules\noVNC\websockify-js-master\websockify\" & node websockify.js --web C:\Users\root\node_modules\noVNC 9000 localhost:5900"

打開(kāi)運(yùn)行，輸入shell:startup 回車。將start.bat啟動(dòng)文件放入文件夾

四、通過(guò)open微皮恩訪問(wèn)noVNC

在open微皮恩服務(wù)端通過(guò)執(zhí)行一鍵生成腳本生成客戶端證書(shū)novnc01

#查看內(nèi)網(wǎng)IP信息
[root@open微皮恩-novnc ~]# ifconfig eth0|awk 'NR==2{print $2}'
172.17.43.166
#查看公網(wǎng)IP信息
[root@open微皮恩-novnc ~]# curl ifconfig.me
182.92.226.114

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

[root@open微皮恩-novnc ~]# ls open微皮恩-install/
LICENSE.txt  open微皮恩-install.sh  README.md

[root@open微皮恩-novnc open微皮恩-install]# cd open微皮恩-install/ && bash open微皮恩-install.sh 

#安裝步驟請(qǐng)看之前文檔，一鍵生成客戶端證書(shū)
[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

將生成的證書(shū)上傳到安裝有novnc的PC客戶端上