ubuntu22.04 桌面可视化(vncserver+novnc 方式)

参考：【noVNC】使用noVNC实现浏览器网页访问vnc（基于web的远程桌面）

Ubuntu20.04之VNC的安装使用与常见问题_ubuntu 安装vnc-CSDN博客

noVNC网页访问Ubuntu_ubuntu novnc-CSDN博客

服务器端配置

[法一：直接用ubuntu22.04远程桌面功能](#法一：直接用ubuntu22.04远程桌面功能)

[法二：TightVNC Server 参考链接](#法二：TightVNC Server 参考链接)

客户端配置

[法一：vnc-viewer 参考链接 (不推荐)](#法一：vnc-viewer 参考链接 (不推荐))

[法二 noVNC (用浏览器做client)](#法二 noVNC (用浏览器做client))

[总结 vncserver + novnc](#总结 vncserver + novnc)

一句话原理：基于client+server架构实现的远程桌面技术，其中服务端用于提供图像数据，客户端则用于接收图像数据。

VNC (Virtual Network Console)方法分为server端和client端两部分，基于TCP的通信，需要分别在客户端和服务器进行配置。

服务器端配置

法一：直接用ubuntu22.04远程桌面功能

法二： TightVNC Server 参考链接

安装启动关闭设置密码修改密码

bash 复制代码

# 1. 安装
sudo apt install tigervnc-standalone-server #在ubuntu上安装tigervnc-server

# 2. 首次启动vnc-server
vncserver # 首次启动需要定义一个6-8位的密码，超8位密码会被自动截断
#Tip: 如忘记密码/想修改密码，通过下面的命令修改vncserver的密码
# vncpasswd

# 3. 关闭vnc-server
vncserver -kill :*

# 4. 完成下面的vnc-server配置 然后重新启动vncserver 否则连接的客户端上显示是一片空白

# 5. 完整参数运行vnc-server
 vncserver :1 -geometry 1920x1080 -depth 24 -localhost no
# 注：-localhost no参数一定要有，没有的话可能无法正常连接，其余参数就是分辨率之类的了，可自定	义参数,如果输出下面的类似内容则说明服务器端正常运行
# New 'bytexd:1 (edxd)' desktop at :1 on machine bytexd
# Use xtigervncviewer -SecurityTypes VncAuth -passwd /home/edxd/.vnc/passwd :1 to connect to the VNC server.

# 这里说明一下启动的服务器端口
# 端口号就是5900+服务器索引，如   vncserver :1指令开启的服务器的端口就是5901，
#类推，vncserver :2的端口就是5902

# !!!
# 加sudo启动是root用户 不加sudo 就是当前的普通用户

vnc server 配置

使用gnome(只能用于root用户)

> ls /usr/share/xsessions/ # 检查桌面环境

bash 复制代码

#<<<<<<<<<<<<<<<配置文件1>>>>>>>>>>>>>>>>

# 1.1 创建并添加xstartup文件到/etc/vnc/xstartup  
sudo mkdir /etc/vnc #创建VNC目录
sudo nano /etc/vnc/xstartup #创建并编辑xstartup文件

# 1.2 向/etc/vnc/xstartup文件中添加下面的内容
###### 内容开始
#!/bin/sh

test x"$SHELL" = x"" && SHELL=/bin/bash
test x"$1"     = x"" && set -- default

unset SESSION_MANAGER
unset DBUS_SESSION_BUS_ADDRESS

vncconfig -iconic &
"$SHELL" -l << EOF
export XDG_SESSION_TYPE=x11
export GNOME_SHELL_SESSION_MODE=ubuntu
dbus-launch --exit-with-session gnome-session --session=ubuntu
EOF
vncserver -kill $DISPLAY

###### 内容结束

# 1.3 设置为可执行文件
sudo chmod +x /etc/vnc/xstartup

#<<<<<<<<<<<<<<<配置文件2>>>>>>>>>>>>>>>>

# 2.1 创建并添加xstartup文件到~/.vnc/xstartup
sudo vim ~/.vnc/xstartup #创建并编辑xstartup文件

# 2.2 向~/.vnc/xstartup文件中添加下面的内容

#!/bin/sh
[ -x /etc/vnc/xstartup ] && exec /etc/vnc/xstartup
[ -r $HOME/.Xresources ] && xrdb $HOME/.Xresources

# 2.3 设置为可执行文件
sudo chmod a+x ~/.vnc/xstartup

使用xfce

bash 复制代码

# 安装xfce
 sudo apt install xfce4 xfce4-goodies -y

#<<<<<<<<<<<<<<<配置文件>>>>>>>>>>>>>>>>

# 1 创建并添加xstartup文件到~/.vnc/xstartup
sudo vim ~/.vnc/xstartup #创建并编辑xstartup文件

# 2 向~/.vnc/xstartup文件中添加下面的内容

###########################内容开始
#!/bin/sh
# 加载个人 X 资源
[ -r $HOME/.Xresources ] && xrdb $HOME/.Xresources

# 启动剪贴板支持
vncconfig -iconic &

# 启动轻量级 XFCE 桌面 (不要再调用 /etc/vnc/xstartup)
exec startxfce4
###########################内容结束


# 3 设置为可执行文件
sudo chmod a+x ~/.vnc/xstartup

客户端配置

法一：vnc-viewer 参考链接 (不推荐)

下载安装vnc-viewer后, vnc-viewer作为客户端，通过tcp协议连接服务器。这是标准的client-server的连接方式。

连接时需要知道服务器的ip地址 + vncserver使用的端口号 + vncserver配置的密码

法二 noVNC (用浏览器做client)

noVNC项目是通过取消VNC Client的安装，直接通过浏览器访问noVNC，然后由noVNC间接访问VNC server来达到client web化。从上面部署方式看到，VNC server仍然保留且没有任何修改，处理的始终是TCP流量，但是浏览器和noVNC之间是在http基础上使用WebSocket交互，由于VNC server 无法处理websocket流量，因此引入了 websockify ，noVNC的姐妹项目，负责把WebSocket流量转换为普通的TCP流，使VNC server正常工作。noVNC其实是一个HTML形式的APP，websockify并充当了一个mini web server的角色，当浏览器访问时，会通过网络加载运行noVNC。

参考： All in Web | 基于web的远程桌面-noVNC - 知乎

一句话原理： noVNC 把VNC server 包装为一个网页服务(noVNC是html, websockify是提供服务，实现websocket转tcp与VNC server进行交互)

具体使用方式用户通过浏览器 访问服务器对外开放的网页链接

好处：用户这里不用配置，有浏览器就行

配置：还是在服务器 进行配置

bash 复制代码

# 1 下载noVNC的代码
git clone https://github.com/novnc/noVNC.git

# 2 启动noVNC
# 启动脚本是：novnc_proxy

chmod +755 /noVNC/utils/novnc_proxy  # 添加可执行权限

# 启动noVNC
# 第一次会帮我们下载Websokify  需要安装git环境
# --vnc 指定了vnc server 的ip+端口号 
./novnc_proxy  --vnc localhost:5900 # 直接用ubuntu22.04 远程桌面就是5900. 用vncserver :1 对应的端口号就是 5901


# 3 开放6080端口
# noVNC 对外提供服务的端口是6080
sudo firewall-cmd --add-port=6080/tcp  --permanent
sudo firewall-cmd --reload

客户端浏览器访问地址 http://IP地址:6080/vnc.html

总结 vncserver + novnc

bash 复制代码

###### 服务器一键启动 vncserver + novnc ######
# vncserver
# (root用户)
sudo vncserver :1 -geometry 1920x1080 -depth 24 -localhost no
# (普通用户)
vncserver :1 -geometry 1920x1080 -depth 24 -localhost no

# noVNC 代码的utils目录下
./novnc_proxy  --vnc localhost:5901

###### 客户端浏览器访问链接 ######
http://IP地址:6080/vnc.html

ubuntu22.04 桌面可视化(vncserver+novnc 方式)

服务器端配置

法一： 直接用ubuntu22.04远程桌面功能

法二： TightVNC Server 参考 链接

客户端配置

法一：vnc-viewer 参考 链接 (不推荐)

法二 noVNC (用浏览器做client)

总结 vncserver + novnc

法一：直接用ubuntu22.04远程桌面功能

法二： TightVNC Server 参考链接

法一：vnc-viewer 参考链接 (不推荐)