使用Jexus 容器化您的 Blazor 應用程式

張善友發表於2020-05-05

在本文中,我們將介紹如何將 Blazor 應用程式放入Jexus 容器以進行開發和部署。我們將使用 .NET Core  CLI,因此無論平臺如何,使用的命令都將是相同的。

Blazor 託管模型

Blazor 有兩個託管模型,它們的要求不同,本文主要基於WebAssembly模型介紹容器化。

  • Blazor WebAssembly:一個 Web 框架,用於在瀏覽器中使用 WebAssembly 執行客戶端。
  • Blazor 伺服器:執行伺服器端並使用 SignalR 與瀏覽器通訊的 Web 框架。

WebAssembly 託管模型的目標是在瀏覽器中託管整個應用程式。Blazor WebAssembly 應用程式中的專案包括 HTML、JavaScript、.NET 執行時版本和二進位制檔案。它們都在瀏覽器中執行,因此您可以將它託管為靜態網站。不需要伺服器執行時或直譯器。

Blazor WebAssembly 仍處於預覽模式,是最後一個預覽版,5.19 將正式釋出,因此您必須手動安裝模板才能建立 Blazor WebAssembly 應用程式。

dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4

現在,您已經安裝了模板,您可以使用以下 .NET CLI 命令建立新的 Web 組裝應用程式:

dotnet new blazorwasm -o wasmtest

這將建立一個新的 Blazor WebAssembly 應用程式,名稱為"wasmtest"。您可以將"wasmtest" 更改為專案名稱。

生成並測試應用後,即可釋出應用。執行點網釋出命令:

dotnet publish -c Release

你會看到如下輸出:

PS C:\workshop\idt2019\wasmtest> dotnet publish -c Release -o publish
用於 .NET Core 的 Microsoft (R) 生成引擎版本 16.5.0+d4cbfca49
版權所有(C) Microsoft Corporation。保留所有權利。

  C:\workshop\idt2019\wasmtest\wasmtest.csproj 的還原在 93.3 ms 內完成。
   wasmtest -> C:\workshop\idt2019\wasmtest\bin\Release\netstandard2.1\wasmtest.dll
   wasmtest (Blazor output) -> C:\workshop\idt2019\wasmtest\bin\Release\netstandard2.1\wwwroot
   wasmtest -> C:\workshop\idt2019\wasmtest\publish\

 

在這裡,你可以看到我們的程式的檔案都發布到了路徑C:\workshop\idt2019\wasmtest\publish\, 我們的所有成果輸出都是靜態檔案,都放在資料夾wwwroot 目錄下:

PS C:\workshop\idt2019\wasmtest\publish> ls wwwroot


     目錄: C:\workshop\idt2019\wasmtest\publish\wwwroot


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----         2020/5/4     12:38                css
d-----         2020/5/4     12:38                sample-data
d-----         2020/5/4     12:38                _framework
-a----         2020/5/4     12:34          32038 favicon.ico
-a----         2020/5/4     12:34            651 index.html

可以從任何靜態web 站點上執行這個檔案,我們就使用一個Jexus 容器來執行blazor 應用。Jexus 是一款國產的 Linux 平臺上的高效能WEB伺服器 和負載均衡閘道器,以支援 ASP.NET、 ASP.NET CORE、 PHP 為特色, 同時具備反向代理、 入侵 檢測等重要功能。 可以這樣說, Jexus是 .NET、 .NET CORE 跨平臺的最優秀的宿主伺服器,如 果我們認為它是 Linux平臺 的 IIS ,這並不為過,因為, Jexus 不但非常快,而且擁有 IIS 和 其它 Web 伺服器所不具備的高度的安全性,這是政府機構和重要企業對web伺服器最必要也是最重要的 品質需求。張志敏同學在維護這個Jexus映象,得到了Jexus作者宇內流雲的認可, Docker Hub 地址: https://hub.docker.com/r/beginor/jexus-x64

 

我們來建立一個Jexus 託管靜態網站的配置wasmtest:

######################
# Web Site: wasmtest.csharpkit.com
########################################

port=80
root=/ /var/www/wasmtest/
hosts= wasmtest.csharpkit.com
NoFile=/index.html

UseGZIP=true

 

建立一個容器打包映象的Dockerfile:

FROM beginor/jexus-x64:6.2.1.12

COPY ./jexus/wasmtest /usr/jexus/siteconf/wasmtest

COPY ./publish/wwwroot /var/www/wasmtest

CMD [ "jws", "start"]

 

此檔案將拉下jexus 映象,然後將jexus網站的配置檔案複製到容器檔案系統中的(預設的jexus 配置資料夾)。它將在每次生成映象時執行此操作,因此如果你需要對專案進行更改,則需要重新生成映象。

這就是我們需要啟動和執行Blazor WebAssembly靜態檔案所需的以前,現在我們就來建立一個映象:

docker build –f ./Dockfile –t geffzhang/wasmtest:lastest .

 

PS C:\workshop\idt2019\wasmtest> docker build -f .\Dockerfile -t geffzhang/wasmtest:lastest .
Sending build context to Docker daemon  29.42MB
Step 1/4 : FROM beginor/jexus-x64:6.2.1.12
6.2.1.12: Pulling from beginor/jexus-x64
68ced04f60ab: Already exists                                                     08da89b1ce63: Pull complete                                                      e1c7e1fba2a2: Pull complete                                                      7bb8aca5914e: Pull complete                                                      Digest: sha256:385f8a80d06dc25cc72e072e57983316c7c4faa5e793825fc3bea3fe09701e0c
Status: Downloaded newer image for beginor/jexus-x64:6.2.1.12
  ---> d2b984e7898c
Step 2/4 : COPY ./jexus/wasmtest /usr/jexus/siteconf/wasmtest
  ---> 1ffe6bdc10de
Step 3/4 : COPY ./publish/wwwroot /var/www/wasmtest
  ---> a60b338191aa
Step 4/4 : CMD [ "jws", "start"]
  ---> Running in da8c19f7849b
Removing intermediate container da8c19f7849b
  ---> a04cf465b883
Successfully built a04cf465b883
Successfully tagged geffzhang/wasmtest:lastest
SECURITY WARNING: You are building a Docker image from Windows against a non-Windows Docker host. All files and directories added to build context will have '-rwxr-xr-x' permissions. It is recommended to double check and reset permissions for sensitive files and directories.

 

我們可以執行它:

 

docker run –name wasm1 –p 80:80 –d geffzhang/wasmtest:lastest

 

PS C:\workshop\idt2019\wasmtest> docker run --name wasm1 -p 80:80 -d geffzhang/wasmtest:lastest
101ecc49b5913d69300a7554022ecef681760922640fc39faf6195d69e04bb56

 

這將容器作為守護程式執行,因此他將能夠持續執行,直到你停止它。現在我們有了一個靜態的Jexus 伺服器在埠80上執行應用程式。你可以通過瀏覽器上看到它:

image

在生產環境中,我們可以通過Jexus配置更多的操作,上面這些步驟是託管你的Blazor WebAssembly 應用程式在容器中進行開發。

程式碼參見:https://github.com/BlazorHub/wasmtest

相關文章