在本文中，我們將介紹如何將 Blazor 應(yīng)用程序放入Jexus 容器以進(jìn)行開發(fā)和部署。我們將使用 .NET Core ?CLI，因此無(wú)論平臺(tái)如何，使用的命令都將是相同的。

Blazor 托管模型

Blazor 有兩個(gè)托管模型，它們的要求不同，本文主要基于WebAssembly模型介紹容器化。

• Blazor WebAssembly：一個(gè) Web 框架，用于在瀏覽器中使用 WebAssembly 運(yùn)行客戶端。

• Blazor 服務(wù)器：運(yùn)行服務(wù)器端并使用 SignalR 與瀏覽器通信的 Web 框架。

WebAssembly 托管模型的目標(biāo)是在瀏覽器中托管整個(gè)應(yīng)用程序。Blazor WebAssembly 應(yīng)用程序中的項(xiàng)目包括 HTML、JavaScript、.NET 運(yùn)行時(shí)版本和二進(jìn)制文件。它們都在瀏覽器中運(yùn)行，因此您可以將它托管為靜態(tài)網(wǎng)站。不需要服務(wù)器運(yùn)行時(shí)或解釋器。

Blazor WebAssembly 仍處于預(yù)覽模式，是最后一個(gè)預(yù)覽版，5.19 將正式發(fā)布，因此您必須手動(dòng)安裝模板才能創(chuàng)建 Blazor WebAssembly 應(yīng)用程序。

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

現(xiàn)在，您已經(jīng)安裝了模板，您可以使用以下 .NET CLI 命令創(chuàng)建新的 Web 組裝應(yīng)用程序：

dotnet new blazorwasm -o wasmtest

這將創(chuàng)建一個(gè)新的 Blazor WebAssembly 應(yīng)用程序，名稱為"wasmtest"。您可以將"wasmtest" 更改為項(xiàng)目名稱。

生成并測(cè)試應(yīng)用后，即可發(fā)布應(yīng)用。運(yùn)行點(diǎn)網(wǎng)發(fā)布命令：

dotnet publish -c Release

你會(huì)看到如下輸出：

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

? C:\workshop\idt2019\wasmtest\wasmtest.csproj 的還原在 93.3 ms 內(nèi)完成。
?? 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\?

在這里，你可以看到我們的程序的文件都發(fā)布到了路徑C:\workshop\idt2019\wasmtest\publish\， 我們的所有成果輸出都是靜態(tài)文件，都放在文件夾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

可以從任何靜態(tài)web 站點(diǎn)上運(yùn)行這個(gè)文件，我們就使用一個(gè)Jexus 容器來(lái)運(yùn)行blazor 應(yīng)用。Jexus 是一款國(guó)產(chǎn)的 Linux 平臺(tái)上的高性能WEB服務(wù)器 和負(fù)載均衡網(wǎng)關(guān)，以支持 ASP.NET、 ASP.NET CORE、 PHP 為特色， 同時(shí)具備反向代理、 入侵 檢測(cè)等重要功能?？梢赃@樣說(shuō)， Jexus是 .NET、 .NET CORE 跨平臺(tái)的最優(yōu)秀的宿主服務(wù)器，如 果我們認(rèn)為它是 Linux平臺(tái) 的 IIS ，這并不為過(guò)，因?yàn)?#xff0c; Jexus 不但非常快，而且擁有 IIS 和 其它 Web 服務(wù)器所不具備的高度的安全性，這是政府機(jī)構(gòu)和重要企業(yè)對(duì)web服務(wù)器最必要也是最重要的 品質(zhì)需求。張志敏同學(xué)在維護(hù)這個(gè)Jexus鏡像，得到了Jexus作者宇內(nèi)流云的認(rèn)可， Docker Hub 地址：https://hub.docker.com/r/beginor/jexus-x64。

?

我們來(lái)創(chuàng)建一個(gè)Jexus 托管靜態(tài)網(wǎng)站的配置wasmtest：

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

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

UseGZIP=true

?

創(chuàng)建一個(gè)容器打包鏡像的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網(wǎng)站的配置文件復(fù)制到容器文件系統(tǒng)中的（默認(rèn)的jexus 配置文件夾）。它將在每次生成鏡像時(shí)執(zhí)行此操作，因此如果你需要對(duì)項(xiàng)目進(jìn)行更改，則需要重新生成鏡像。

這就是我們需要啟動(dòng)和運(yùn)行Blazor WebAssembly靜態(tài)文件所需的以前，現(xiàn)在我們就來(lái)創(chuàng)建一個(gè)鏡像：

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.

?

我們可以運(yùn)行它：?

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

?

這將容器作為守護(hù)進(jìn)程運(yùn)行，因此他將能夠持續(xù)運(yùn)行，直到你停止它。現(xiàn)在我們有了一個(gè)靜態(tài)的Jexus 服務(wù)器在端口80上運(yùn)行應(yīng)用程序。你可以通過(guò)瀏覽器上看到它：

在生產(chǎn)環(huán)境中，我們可以通過(guò)Jexus配置更多的操作，上面這些步驟是托管你的Blazor WebAssembly 應(yīng)用程序在容器中進(jìn)行開發(fā)。

代碼參見：https://github.com/BlazorHub/wasmtest

總結(jié)

以上是生活随笔為你收集整理的使用Jexus 容器化您的 Blazor 应用程序的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。