Docker容器：將帶UI的程式直接轉為Web應用，so easy

摘要：使用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能力。 詳見：​ ​ ​http://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 的軟體。這是一個“虛擬螢幕”，都在記憶體中模擬的螢幕。見：

​ ​http://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

就可以了。

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