Docker容器:將帶UI的程序直接轉為Web應用,so easy

語言: CN / TW / HK

摘要:使用Docker容器,將帶UI的程序,直接轉換為Web應用。很方便,跟大家分享一下。

本文分享自華為雲社區《​ ​使用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

就可以了。

​點擊關注,第一時間瞭解華為雲新鮮技術~​