本文分享自华为云社区《使用Docker容器，将带UI的程序，直接转为Web应用》，作者：tsjsdbd。

我们可以通过 Docker 容器，将 App 的 UI 界面，投射到任意的网络目的端。

即：

其原理是利用 X11 协议，把界面投射转化为网络协议，到达目的端显示出来。

但是这种方案，有一个硬性要求：就是目的端必须要安装一个“投屏软件（X11 Server）”，比如：VcXsrv 或者 MobaXterm。

那么用户想要看到 App 的界面，他就得额外安装一个软件，用户体验并不是最佳的。

一、VNC 方案

Windows 的远程桌面，相信大家都用过吧。 VNC 就是 Linux 版的远程桌面。它可以将屏幕，通过网络共享给客户端。

在服务端，安装 vncserver。 在客户端，安装 vncviewer。

不过，windows 是自带了一个 远程桌面客户端。对 VNC 的话，用户就得安装一个 vnc-viewer 客户端。和 X11 方案差不多，还是不够方便。

二、noVNC 方案

好消息是，VNC-Viewer 有一个 WEB 版的客户端，叫做 noVNC。它直接打开网页，就获得 VNC-Viewer 能力。详见：https://novnc.com/info.html

于是，我们可以将方案拓展为：

毕竟，浏览器基本上每个客户都会有。这就好比，微信大家都有，所以“单独安装一个 App”vs“微信小程序” ，肯定是后者在使用更便捷一样的道理。

所以你可以看到各大云厂商，比如华为云的 ECS 虚机，也都自带了使用 noVNC 的方式来展示虚机的界面。可见 noVNC 的产品化可靠性还是 OK 的。

三、具体操作

这里我为了方便，准备将各种 Server 都安装到一个 Docker 容器里面，如下：

1.  使用 Ubuntu:20.04 的基础镜像

因为最终我们要通过 HTML 访问这个容器，所以启动的时候，我们得记得开放端口：

docker run -it -p 80:8080 ubuntu:20.04 /bin/bash复制

在这个容器里面，启动上图中的各种 Server。

2.  Xvfb 虚拟屏幕

首先，安装一个叫做 xvfb 的软件。这是一个“虚拟屏幕”，都在内存中模拟的屏幕。

见：

https://en.wikipedia.org/wiki/Xvfb

安装：

apt-get install -y xvfb复制

然后启动“虚拟屏幕”：

Xvfb :0 -screen 0 1920x1080x24 -listen tcp -ac +extension GLX +extension RENDER复制

其中，1920x1080x24 表示：屏幕大小（分辨率）。 24 则是像素深度。

这个屏幕大小，到时候可以根据 App 的界面效果自己调整。

3.  X11vnc 服务器

然后，我们安装 x11 服务器（因为安装这个有交互，所以之类设置了 无交互模式）

export DEBIAN_FRONTEND=noninteractive
apt-get install -y x11vnc复制

然后启动 x11 服务器：

x11vnc -forever -shared -noipv6 -passwd tsjsdbd复制

其中标红的 password 换成你自己喜欢的密码。

4.  noVNC 服务器

最后，我们通过 noVNC 服务器，将 VNC 翻译为 HTML 服务，

安装：

apt-get install -y novnc复制

然后启动：

websockify --web /usr/share/novnc 8080 localhost:5900复制

5.  启动带 UI 的 App

apt-get install x11-apps
DISPLAY=:0.0 xclock复制

这里的 DISPLAY 变量的作用，是表示把 App 的界面，投射到咱们的这个“虚拟屏幕”上。

详细请看我之前的那篇文章。

6.  从浏览器访问

从浏览器，访问我们的容器。地址（因为我们启动容器用来 http 默认端口 80，所以这里 URL 不用设置端口了。）：

http://容器 ip/vnc.html

这里填，第 3 步咱设置的密码。然后可以看到 App 的界面啦：

四、Dockerfile

这里为了大家方便，直接提供一个 Dockerfile

FROM ubuntu:20.04
ENV DEBIAN_FRONTEND=noninteractive
RUN apt-get install -y novnc x11vnc xvfb
EXPOSE 8080
ENTRYPOINT ["/bin/bash"]复制

然后写个 start-novnc.sh 脚本：

#!/bin/bash
set -e
#虚拟屏幕
Xvfb :0 -screen 0 1920x1080x24 -listen tcp -ac +extension GLX +extension RENDER > /dev/null 2>&1 &
#vnc服务器
x11vnc -forever -shared -noipv6 -passwd tsjsdbd > /dev/null 2>&1 &
#novnc
websockify --web /usr/share/novnc 8080 localhost:5900 > /dev/null 2>&1 &复制

最后你启动 app 的时候，记得带上：

DISPLAY==========================================BN
=:0.0 your-ui-app复制

就可以了。

点击关注，第一时间了解华为云新鲜技术~