noVNC實現瀏覽器遠程訪問VNC服務

參考

https://www.cnblogs.com/binaway/p/9772673.html
https://blog.jialezi.net/?post=65

一，簡介

1，VNC介紹

VNC (Virtual Network Console)是虛擬網絡控制台的縮寫。它 是一款優秀的遠程控制工具軟件。VNC 是在基於 UNIX 和 Linux 操作系統的免費的開源軟件，遠程控制能力強大，高效實用，其性能可以和 Windows 和MAC中的任何遠程控制軟件媲美。
VNC基本上是由兩部分組成：一部分是客戶端的應用程序(vnc viewer)；另外一部分是服務器端的應用程序(vnc server)。VNC的基本運行原理和一些Windows下的遠程控制軟件很相像。VNC的服務器端應用程序在UNIX和Linux操作系統中適應性很強，圖形界面十分友好。在任何安裝了客戶端的應用程序(vncviewer)的Linux平台的計算機都能十分方便地和安裝了服務器端的應用程序(vncserver)的計算機相互連接。

2，noVNC介紹

noVNC提供一種在網頁上通過html5的Canvas，訪問機器上vncserver提供的vnc服務，需要做tcp到websocket的轉化，才能在html5中顯示出來。網頁就是一個客戶端，類似win下面的vncviewer，只是此時填的不是裸露的vnc服務的ip+port，而是由noVNC提供的websockets的代理，在noVNC代理服務器上要配置每個vnc服務，noVNC提供一個標識，去反向代理所配置的vnc服務。
noVNC 被普遍用在各大雲計算、虛擬機控制面板中，比如 OpenStack Dashboard 和 OpenNebula Sunstone 都用的是 noVNC。

二，准備工作

1. 遠程目標主機：Windows10，統信UOS
2. UltraVNC：http://www.uvnc.com/ （Windows環境下的VNC Server，還有TightVNC、TigerVNC、RealVNC等，其中RealVNC不能通過noVNC）
3. Node.js：https://nodejs.org/en/download/ （用於執行Websockify.js）
4. NoVNC：https://github.com/novnc/noVNC
5. Websockify https://github.com/novnc/websockify-js.git

三，Windows10安裝及配置noVNC

1. 下載安裝UltraVNC
   下載地址

https://www.uvnc.eu/download/1360/UltraVNC_1_3_60_X64_Setup.exe

安裝一直下一步即可，安裝完畢server端自動運行
設置密碼
右下角右鍵單擊VNC圖標選擇Admin Properties

設置頁碼如下

2. 安裝node.js
下載地址

https://nodejs.org/dist/v16.14.0/node-v16.14.0-x64.msi

下載windows下64位版本，雙擊安裝即可
node.js安裝完成后，需要安裝ws、optimist模塊（執行websockify.js文件所需）
在目錄C:\Users\Administrator>下執行安裝程序

npm install ws
npm install optimist
npm install mime-types

安裝完ws和optimist后會在C:\Users\Administrator\下生成node_modules目錄
3. 下載noVNC
進入目錄C:\Users\Administrator>使用git下載noVNC

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

4. 下載websockify-js
   進入目錄C:\Users\Administrator>使用git下載websockify-js

git clone https://github.com/novnc/websockify-js.git

5. 執行websockify.js
   執行websockify.js：轉發9000端口的http鏈接到5900端口（UltraVNC Server的默認端口為5900）
   執行完整命令格式如下

C:\Users\Administrator>node c:\Users\Administrator\node_modules\websockify-js\websockify\websockify.js --web c:\Users\Administrator\node_modules\noVNC 9000 192.168.8.161:5900

命令行解析

C:\Users\Administrator> # 當前目錄
node # 使用node啟動js
c:\Users\Administrator\node_modules\websockify-js\websockify\websockify.js # js文件路徑
--web c:\Users\Administrator\node_modules\noVNC # noVNC地址
9000 # 啟動端口為9000
192.168.8.161:5900 # 轉發的VNC地址和端口

6. 在瀏覽器輸入地址加端口訪問
   
   
   輸入密碼，成功登錄Windows遠程桌面

統信UOS安裝及配置noVNC

系統版本及配置查看

1. 更新系統組件

apt update
apt upgrade -y

2. 安裝LXDE環境，vncserver，git等

apt-get install xorg lxde-core tightvncserver git vim -y

3. 啟動VNC

tightvncserver :1

然后需要我們輸入VNC的登錄密碼，輸入密碼要注意輸入的時候是不可見的，我們要看清楚自己鍵盤然后輸入回車后再輸入一次。
出現這一行"Would you like to enter a view-only password (y/n)"問我們是否需要一個只可讀的賬戶密碼，我們可以輸入y輸入密碼，也可以輸入n不輸入，這個不要緊。
修改VNC密碼
首先清除~/.vnc目錄下文件passwd內容
然后使用命令修改

vncpasswd

4. 暫停VNC

tightvncserver -kill :1

5. 配置xstartup系統文件
   編輯系統文件

vim ~/.vnc/xstartup

然后在文件的最下面添加腳本代碼

lxterminal &
/usr/bin/lxsession -s LXDE &

6. 重啟VNC

tightvncserver :1

8. 安裝noVNC

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

9. 運行noVNC

./noVNC/utils/novnc_proxy --vnc localhost:5901

命令解析

./noVNC/utils/novnc_proxy --vnc # 啟動noVNC
localhost:5901 # 對應的VNC主機和端口

腳本的啟動參數

腳本的啟動參數：
--listen PORT                          Port for proxy/webserver to listen on
                                               Default: 6080
--vnc VNC_HOST:PORT                    VNC server host:port proxy target
                                               Default: localhost:5900
--cert CERT                            Path to combined cert/key file
                                               Default: self.pem
--web WEB                              Path to web files (e.g. vnc.html)
                                               Default: ./
--ssl-only                             Disable non-https connections.

web頁面訪問測試
如果不指定--listen參數默認的端口為6080
使用以下地址訪問

http://ip:6080/vnc.html