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

就可以了。

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