DotNetBrowser 是一個基于 Chromium 的 .NET WebView。它允許您在 .NET 桌面應(yīng)用中嵌入現(xiàn)代網(wǎng)頁內(nèi)容，并通過代碼對其進(jìn)行控制。

與普通的 .NET 應(yīng)用不同，運(yùn)行 Chromium 的應(yīng)用依賴一些系統(tǒng)級組件，這些組件并不包含在您的項(xiàng)目中。應(yīng)用可能在您的電腦上運(yùn)行良好，但在一個干凈的服務(wù)器或 CI 環(huán)境中卻無法運(yùn)行。

Docker 通過將應(yīng)用程序與其所需的完整運(yùn)行環(huán)境一起打包來解決這個問題。本文將介紹如何使用 Docker 部署 DotNetBrowser 應(yīng)用。

為什么選擇 Docker

DotNetBrowser 構(gòu)建于 Chromium 之上，這意味著它繼承了 Chromium 的系統(tǒng)要求。在 Linux 上，這包括原生庫和用于渲染內(nèi)容的 X 服務(wù)器。在典型的桌面設(shè)置中，這些部分已經(jīng)由操作系統(tǒng)提供。但在 CI 或服務(wù)器環(huán)境中，它們通常是缺失的。

Docker 允許您顯式地定義和打包環(huán)境。這使您的應(yīng)用程序更具可預(yù)測性，并減少了經(jīng)典的“在我機(jī)器上能跑”的問題。當(dāng)您需要在官方支持列表之外的 Linux 發(fā)行版上運(yùn)行時，它也能派上用場。

準(zhǔn)備工作

我們將構(gòu)建一個小型的 .NET 應(yīng)用程序，并使用 Docker 進(jìn)行打包。要跟著操作，您需要：

• Docker Engine。
• .NET 8 SDK。
• DotNetBrowser 許可證。

創(chuàng)建 DotNetBrowser 應(yīng)用

對于本例，我們將使用以下項(xiàng)目結(jié)構(gòu)：

Example.Docker/
├── <App files>            # 應(yīng)用程序源文件
├── Dockerfile             # Docker 構(gòu)建文件
└── startup.sh             # 用于啟動應(yīng)用的腳本

讓我們從創(chuàng)建一個簡單的 Avalonia 桌面應(yīng)用開始。為了簡化操作，我們將使用官方的 DotNetBrowser Avalonia 模板，而不是從頭開始設(shè)置一切。

首先，安裝模板：

dotnet new install DotNetBrowser.Templates

然后創(chuàng)建一個新項(xiàng)目：

dotnet new dotnetbrowser.avalonia.app -o Example.Docker -li <your_license_key>

這將在 Example.Docker 文件夾中生成一個可立即運(yùn)行的 Avalonia 應(yīng)用程序。開箱即用，它會打開一個窗口并在 DotNetBrowser 中加載一個網(wǎng)頁。

由于應(yīng)用將在 Docker 容器中運(yùn)行，我們需要一種方式來確認(rèn)它在沒有可見窗口時也能正常運(yùn)行?？梢栽陧撁婕虞d完成后將網(wǎng)頁標(biāo)題打印到控制臺。

在 MainWindow.axaml.cs 中添加代碼：

// 頁面加載完成后打印標(biāo)題。
browser.Navigation.FrameLoadFinished += (_, e) =>
{
    if (e.Frame.IsMain)
    {
        Console.WriteLine($"Title: {browser.Title}");
    }
};

// 加載網(wǎng)頁。
browser.Navigation.LoadUrl("https://www.google.com");

完成此操作后，應(yīng)用程序就可以打包了。下一步是生成 Release 構(gòu)建：

dotnet publish -c Release -o out

生成的 out/ 目錄將在運(yùn)行時被容器使用。

創(chuàng)建 Dockerfile

現(xiàn)在，我們需要定義應(yīng)用程序運(yùn)行的環(huán)境。在 Docker 中，這是通過 Dockerfile 完成的。

我們的目標(biāo)是構(gòu)建一個包含以下內(nèi)容的鏡像：

• .NET 運(yùn)行時
• Chromium 的 Linux 原生依賴項(xiàng)
• 一個虛擬顯示服務(wù)器
• 已發(fā)布的應(yīng)用程序文件

讓我們一步步構(gòu)建它。

基礎(chǔ)環(huán)境配置

以基礎(chǔ)鏡像開始您的 Dockerfile：

FROM mcr.microsoft.com/dotnet/runtime:8.0

此鏡像基于 Debian，并且已經(jīng)包含了 .NET 運(yùn)行時，因此無需手動安裝。

請記住，Chromium 依賴于 glibc。因此，您不能使用 Alpine 或任何其他依賴于 musl 或其他標(biāo)準(zhǔn) C 庫的 Linux 發(fā)行版。

接下來，為安裝軟件包設(shè)置一個非交互式環(huán)境：

ENV DEBIAN_FRONTEND=noninteractive

這可以確保 apt-get 在安裝過程中不會暫停并等待輸入。

安裝 Chromium 依賴項(xiàng)

Chromium 依賴于幾個原生 Linux 庫。它們負(fù)責(zé)處理窗口、圖形、聲音和安全性等基本系統(tǒng)功能。在最小的 Docker 鏡像中，這些庫默認(rèn)不會安裝。

RUN apt-get update && \
    apt-get -y install --no-install-recommends \
        libgtk2.0-0 \
        libgtk-3-0 \
        libgbm1 \
        libnotify4 \
        libgconf-2-4 \
        libnss3 \
        libxss1 \
        libasound2 \
        libxtst6 \
        xauth \
        xvfb \
        x11-xserver-utils && \
    rm -rf /var/lib/apt/lists/*

我們還安裝了 Xvfb，一個輕量級的虛擬 X 服務(wù)器。它允許 DotNetBrowser 在沒有物理顯示器可用時運(yùn)行。

添加應(yīng)用程序

現(xiàn)在環(huán)境已準(zhǔn)備就緒，我們可以添加應(yīng)用程序了。我們需要定義它的啟動方式并將其文件復(fù)制到容器中。

1. 創(chuàng)建啟動腳本。

我們不直接啟動應(yīng)用程序，而是使用一個小的包裝腳本：

#!/bin/sh

set -e

if [ -z "${DISPLAY:-}" ]; then
  Xvfb :0 -screen 0 1920x1080x24 &
  export DISPLAY=:0
fi

exec dotnet Example.Docker.dll

此腳本通過 DISPLAY 變量檢查是否有 X 服務(wù)器可用：

• 如果未設(shè)置 DISPLAY，它會啟動一個虛擬顯示器，并將應(yīng)用程序指向它。
• 如果設(shè)置了 DISPLAY，則假定有真實(shí)的 X 服務(wù)器可用并正常運(yùn)行。

即使顯示器是虛擬的，Chromium 也會像對待真實(shí)屏幕一樣對待它。所以我們使用 -screen 選項(xiàng)設(shè)置分辨率和色深。

2. 將腳本復(fù)制到鏡像中：

WORKDIR /Example.Docker

COPY startup.sh .
RUN chmod +x startup.sh

我們設(shè)置一個工作目錄，復(fù)制腳本，并使其可執(zhí)行。

3. 復(fù)制先前發(fā)布的應(yīng)用程序文件：

COPY out/ .

4. 定義入口點(diǎn)：

ENTRYPOINT ["/Example.Docker/startup.sh"]

這告訴 Docker 在容器啟動時執(zhí)行什么。

至此，Docker 鏡像已準(zhǔn)備就緒。下一步是構(gòu)建它并觀察其運(yùn)行。

構(gòu)建并運(yùn)行容器

確保 Docker Engine 正在運(yùn)行，然后構(gòu)建鏡像：

docker build -t dnb-app -f Dockerfile .

運(yùn)行容器通常有兩種方式：

• 無頭模式 — 適用于自動化、測試和服務(wù)器端運(yùn)行，不需要用戶界面。
• 桌面模式 — 適用于希望查看應(yīng)用程序窗口并進(jìn)行可視化調(diào)試的場景。

以下是每種模式的工作原理。

無頭模式

無頭模式是 CI 或服務(wù)器環(huán)境中最常見的設(shè)置。在這種模式下，應(yīng)用程序使用虛擬 X 服務(wù)器運(yùn)行，而不是真實(shí)的顯示器。

運(yùn)行容器：

docker run --rm --shm-size=1g dnb-app

由于沒有設(shè)置 DISPLAY，啟動腳本會啟動 Xvfb 并在無頭模式下運(yùn)行應(yīng)用程序。

--shm-size=1g 選項(xiàng)增加了分配給容器的共享內(nèi)存量。Chromium 使用共享內(nèi)存在其進(jìn)程之間進(jìn)行通信。在大多數(shù) Linux 系統(tǒng)上，默認(rèn)情況下共享內(nèi)存足夠大。但在 Docker 中，它被限制為 64 MB —— 對于 Chromium 來說太小了。

在示例應(yīng)用程序中，我們加載 Google 并打印頁面標(biāo)題。當(dāng)容器啟動時，您應(yīng)該看到：

Title: Google

桌面模式

桌面模式適用于您希望看到容器內(nèi)的應(yīng)用程序窗口的情況——例如，調(diào)試渲染問題或測試用戶輸入。在這種情況下，容器需要訪問您主機(jī)的 X 服務(wù)器。

這種方法適用于使用 X11 的 Linux 系統(tǒng)。在 Linux 上，圖形應(yīng)用程序通過 Unix 套接字與 X 服務(wù)器通信，DISPLAY 變量告訴它們使用哪個顯示器。我們將此信息傳遞給容器，以便應(yīng)用程序能夠在您的主機(jī)桌面上顯示其窗口。

首先，允許本地連接到您的 X 服務(wù)器：

xhost +local:root

然后啟動容器：

docker run --rm \
  --shm-size=1g \
  -e DISPLAY=$DISPLAY \
  -v /tmp/.X11-unix:/tmp/.X11-unix \
  dnb-app

這里發(fā)生了什么：

• -e DISPLAY=$DISPLAY 告訴應(yīng)用程序要使用哪個顯示器。
• -v /tmp/.X11-unix:/tmp/.X11-unix 掛載了 X11 通信套接字。

應(yīng)用程序窗口應(yīng)該會出現(xiàn)：

由容器渲染的應(yīng)用程序窗口。

完成后，您可以撤銷 X 服務(wù)器的權(quán)限：

xhost -local:root

完整的示例應(yīng)用程序可在 GitHub 倉庫 中找到。

遠(yuǎn)程調(diào)試

當(dāng)出現(xiàn)問題時，您需要查看 Chromium 內(nèi)部發(fā)生了什么——檢查 DOM、調(diào)試 JavaScript 或監(jiān)控網(wǎng)絡(luò)請求。

在 DotNetBrowser 中，通過引擎選項(xiàng)啟用遠(yuǎn)程調(diào)試：設(shè)置端口并添加 --remote-allow-origins 開關(guān)。

將以下配置添加到 EngineOptions.Builder 中：

IEngine engine = EngineFactory.Create(new EngineOptions.Builder
{
    ChromiumSwitches = { "--remote-allow-origins=http://localhost:9222" },
    RemoteDebuggingPort = 9222
}.Build());

修改應(yīng)用程序后，不要忘記重新構(gòu)建 Docker 鏡像。

當(dāng) Chromium 在容器內(nèi)運(yùn)行時，DevTools 無法直接從您的主機(jī)訪問。Chromium 在本地端口上暴露 DevTools ——但這里的“本地”指的是容器內(nèi)部。要從主機(jī)訪問 DevTools，請使用 SSH 本地端口轉(zhuǎn)發(fā)。

在主機(jī)上，啟動容器并發(fā)布 SSH 端口：

docker run -d -p 2222:22 --shm-size=1g dnb-app

在正在運(yùn)行的容器內(nèi)打開一個 shell：

docker exec -it <container_id> /bin/bash

將 <container_id> 替換為正在運(yùn)行的容器的 ID。您可以通過運(yùn)行 docker ps 找到它。

在容器內(nèi)部安裝并啟動 SSH 服務(wù)器：

apt install -y openssh-server
service ssh start

在容器內(nèi)部，創(chuàng)建一個用于 SSH 訪問的用戶：

useradd --create-home --shell /bin/bash dnb-app
passwd dnb-app

在主機(jī)上，轉(zhuǎn)發(fā)遠(yuǎn)程調(diào)試端口：

ssh -L 9222:localhost:9222 -p 2222 dnb-app@localhost

此命令創(chuàng)建了一個從主機(jī)的 localhost:9222 到容器內(nèi)部的 localhost:9222 的隧道。在使用 DevTools 期間，請保持此 SSH 會話打開。

在主機(jī)上，打開 Google Chrome 并加載 chrome://inspect 以訪問 DevTools。

總結(jié)

DotNetBrowser 應(yīng)用程序不僅僅是一個 .NET 進(jìn)程——它嵌入了一個完整的 Chromium Engine。該 Engine 期望特定的系統(tǒng)庫和一個顯示服務(wù)器。Docker 允許您顯式定義該環(huán)境，并在本地、CI 或生產(chǎn)環(huán)境中運(yùn)行相同的鏡像，獲得一致的結(jié)果。

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論