Docker容器:将带UI的程序直接转为Web应用,so easy
摘要:使用Docker容器,将带UI的程序,直接转换为Web应用。很方便,跟大家分享一下。
本文分享自华为云社区《使用Docker容器,将带UI的程序,直接转为Web应用》,作者:tsjsdbd。
我们可以通过Docker容器,将App的UI界面,投射到任意的网络目的端。
即:
![](https://pic2.zhimg.com/80/v2-00f3162b8756e2733dc76e69b2b68bd1_720w.jpg)
其原理是利用X11协议,把界面投射转化为网络协议,到达目的端显示出来。
但是这种方案,有一个硬性要求:就是目的端必须要安装一个“投屏软件(X11 Server)”,比如:VcXsrv 或者 MobaXterm。
那么用户想要看到App的界面,他就得额外安装一个软件,用户体验并不是最佳的。
一、VNC方案
Windows的远程桌面,相信大家都用过吧。 VNC就是Linux版的远程桌面。它可以将屏幕,通过网络共享给客户端。
在服务端,安装vncserver。 在客户端,安装vncviewer。
![](https://pic3.zhimg.com/80/v2-3286227b7a8fb263222cd61d8e5c4ae2_720w.jpg)
不过,windows是自带了一个 远程桌面客户端。对VNC的话,用户就得安装一个 vnc-viewer客户端。和X11方案差不多,还是不够方便。
二、noVNC方案
好消息是,VNC-Viewer有一个WEB版的客户端,叫做 noVNC。它直接打开网页,就获得VNC-Viewer能力。详见:https://novnc.com/info.html
于是,我们可以将方案拓展为:
![](https://pic3.zhimg.com/80/v2-113804ed55d0bbe9cc371430b76040b2_720w.jpg)
毕竟,浏览器基本上每个客户都会有。这就好比,微信大家都有,所以“单独安装一个App”vs“微信小程序” ,肯定是后者在使用更便捷一样的道理。
所以你可以看到各大云厂商,比如华为云的ECS虚机,也都自带了使用noVNC的方式来展示虚机的界面。可见noVNC的产品化可靠性还是OK的。
三、具体操作
这里我为了方便,准备将各种Server都安装到一个Docker容器里面,如下:
![](https://pic2.zhimg.com/80/v2-b6a3ba02f244b69adbd6f5263b19ea19_720w.jpg)
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
![](https://pic1.zhimg.com/80/v2-4150aa4347dc25f08c6e2478face18b0_720w.jpg)
这里填,第3步咱设置的密码。然后可以看到App的界面啦:
![](https://pic2.zhimg.com/80/v2-63005b306ae3898d1eb3c202803b9839_720w.jpg)
四、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
就可以了。
相关文章
- 带你掌握Redis数据类型:string和Hash
- 深度剖析数仓CN增量备份技术
- 教你3种Kafka的指定副本作为Leader的实现方式
- 详解用OpenCV绘制各类几何图形
- 当TIME_WAIT状态的TCP正常挥手,收到SYN后…
- 解密数据仓库LLVM技术神奇之处
- 数仓中长跳转问题复现及解决方案
- Redis现网那些坑:用个缓存,还要为磁盘故障买单?
- 云原生时代,政企混合云场景IT监控和诊断的难点和应对之道
- “pip不是内部或外部命令,也不是可运行的程序或批处理文件” 到底有多么神秘
- 混合编程:如何用pybind11调用C++
- 理论+实践,带你掌握动态规划法
- 分享两个常见的搜索算法:BFS和DFS
- 亿级数据量场景下,如何优化数据库分页查询方法?
- 权威可信 | 华为云云测通过中国电子技术标准院软件测试工具能力评价
- 详解基于机器学习的恶意代码检测技术
- 一文带你认识30个重要的数据结构和算法
- MySQL是怎么保证redo log和binlog是完整的?
- OpenHarmony移植:如何适配utils子系统之KV存储部件
- 从5个函数带你理解K8s DeltaFIFO