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能力。詳見：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
就可以了。