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

就可以了。

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