noVNC 远程连接使用教程

noVNC是一个HTML5 VNC客户端，采用 HTML 5 WebSockets，Canvas和JavaScript实现，noVNC被普遍用在如云计算虚拟机控制面板中，比如OpenStack Dashboard等。

介绍

noVNC 采用 WebSockets 实现，但目前大多数 VNC 服务器都不支持 WebSockets，所以 noVNC 是不能直接连接 VNC 服务器的，需要一个代理来做 WebSockets 和 TCP sockets 之间的转换，即 websockify。

数据流

vnc.html -> <noVNC-ip>:6080 -> websockify.py -> <vnc-server-ip>:5901

vncserver 安装

Linux VNC 服务搭建与使用

noVNC

部署

# 依赖安装
yum -y install git python3 python3-devel
pip3 install numpy

# 源码下载
wget https://github.com/novnc/noVNC/archive/refs/tags/v1.2.0.tar.gz
wget https://github.com/novnc/websockify/releases/tag/v0.9.0.tar.gz
tar -zxvf noVNC-1.2.0.tar.gz
tar -zxvf websockify-0.9.0.tar.gz

# 将 websockify 放到指定位置，也可以通过启动 noVNC 服务时自动下载
mv websockify-0.9.0/ ./noVNC-1.2.0/utils/websockify

# 自签发 pem 证书
cd noVNC-1.2.0/utils/
openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem
cd ..

启动 noVNC

$ ./utils/launch.sh --listen 6080 --vnc <vncserver-ip>:5901
Using local websockify at /opt/noVNC-1.2.0/utils/websockify/run
Starting webserver and WebSockets proxy on port 6080
/opt/noVNC-1.2.0/utils/websockify/websockify/websocket.py:31: UserWarning: no 'numpy' module, HyBi protocol will be slower
  warnings.warn("no 'numpy' module, HyBi protocol will be slower")
WebSocket server settings:
  - Listen on :6080
  - Web server. Web root: /opt/noVNC-1.2.0
  - No SSL/TLS support (no cert file)
  - proxying from :6080 to <ip>:5901


Navigate to this URL:

    http://<novnc-ip>:6080/vnc.html?host={hostname}&port=6080

Press Ctrl-C to exit

说明：

1. vncserver-ip 是部署 vncserver 的地址
2. novnc-ip 是部署 noVNC 的地址
3. 两种页面
   1. vnc.html 完整界面，有操作按钮
   2. vnc_lite.html 精简界面，只有虚拟机内容
4. 页面通过访问 http://<novnc-ip>:6080/vnc.html?host={hostname}&port=6080 既可以访问到对应的机器

noVNC token

若要通过 noVNC 访问局域网中的所有机器，只需要配置一台 noVNC 代理，通过 token 区分指向不同的主机。

• 生产 cert，并创建 token 目录

# 签发证书
cd ./utils/websockify
openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem

# 创建 token 目录
mkdir token
vi ./token/token.conf

• token.conf 内容如下

use1password: <ip1>:5901
use2password: <ip2>:5902

其中，token 文件格式

token1: host1:port1
...

• 启动 novnc

./utils/launch.sh --listen 6080

• 启动 websockify

./run --token-plugin TokenFile --token-source ./token/token.conf 6081

在浏览器输入

• http://<novnc-ip>:6080/vnc_lite.html?host=<ip>&port=6081&path=websockify/?token=use1password&password=<pwd>

其中：

1. vncserver-ip 是部署 vncserver 的地址
2. host 为 websockify 所在的服务器ip，port 为其端口
3. path 为访问路径，默认为 websockify/
4. token 为 token.conf 中配置的 token
5. password 是 vncserver 指定的密码，可以实现无密码登录到桌面，参考

FaQ

nginx 代理图片显示延后问题

• F5 刷新可以显示出来
• 配置 Nginx 缓存

    # In the location block related to noVNC
    add_header Cache-Control no-cache;