webvnc利器-noVNC集成实战

/ 工具 / 没有评论 / 2199浏览

远程

webvnc利器-noVNC集成实战

我们在做一个虚拟机管理平台，底层虚拟化使用KVM，我们希望在网页上操作虚拟机。一开始用applet嵌在网页内实现webvnc，不过由于applet的在浏览器上运行安全性限制，我们需要一个新的方案。此时调研了guacamole和novnc。

guacamole在我之前的一个博文里有介绍，guacamole介绍

noVNC集成更加方便轻量，而且功能上完全满足一般的虚拟机管理平台的需求，OpenStack就是用noVNC，下面简单介绍下我们如何集成noVNC。

noVNC github链接

noVNC的工作原理

noVNC提供一种在网页上通过html5的Canvas，访问机器上vncserver提供的vnc服务，需要做tcp到websocket的转化，才能在html5中显示出来。网页就是一个客户端，类似win下面的vncviewer，只是此时填的不是裸露的vnc服务的ip+port，而是由noVNC提供的websockets的代理，在noVNC代理服务器上要配置每个vnc服务，noVNC提供一个标识，去反向代理所配置的vnc服务。

我们的计算节点有 192.168.1.101 192.168.1.102 。noVNC代理 放在 192.168.1.11, websockify代理通过内网带宽把qemu-kvm的vnc tcp转化成websockets 在6080上提供反向代理服务。在192.168.1.11写好所有虚拟机的配置文件，任意放在一个目录下比如：/srv/nfs4/vnc_tokens，这个目录下一台虚拟机提供一个配置文件，配置文件的内容

02f63e037a3c485c8fd5c0164c6ef67b: 192.168.1.101:5908

然后启动代理服务

nohup python /root/noVNC/utils/websockify --web /root/noVNC --target-config=/srv/nfs4/vnc_tokens 6080 >> /root/noVNC/novnc.log &

这样在内网中，我们通过noVNC提供的vnc_auto.html写上

host=192.168.1.11
port=6080
path=02f63e037a3c485c8fd5c0164c6ef67b

然后通过192.168.1.11:6080/vnc_auto.html就可以访问192.168.1.101:5908的这台机器的界面了。

以上是一般的demo，下面讲如何在以上的基础上集成到已有的项目：

  1. 我在路由器上把公网的6080端口映射到192.168.1.11的6080端口上来。
  2. 把noVNC下面的vnc_auto.html以及一些对应的css,js和images拷到已有的项目中
  3. 在已有的项目中加一个action，每次点击远程桌面的时候，页面会传一个vm的标识到action中，action判断这个vm是否属于登录的这个用户，然后在数据库中取出这台vm的vnc服务的ip+port，写成一个配置文件target-config指定目录下，最后把websockets代理机器的ip+port以及vm vnc的password通过action传到vnc_auto.html中
  4. 此时就可以通过web访问vnc界面了， enjoy~

之后要做的：

  1. novnc的加密传输
  2. 多台代理，集成nginx进行反向代理 nginx-module
  3. vnc password前后端的加密握手

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为: 2021/02/07 06:52

→ ← ↓ ↑