容器化Blazor应用程序
Blazor是微软推出的一个热门的新框架,用于在C#中创建交互式前端应用程序。在这篇文章中,我们将展示如何将Blazor应用程序放入容器中进行开发和部署。我们将使用.NET Core CLI,因此所显示的命令无论在哪个平台上都能正常工作。
Blazor托管模式
Blazor的开发有两种托管模式,它们的要求是不同的,所以我将根据这两种模式来划分这篇文章。
Blazor WebAssembly。一个使用WebAssembly在浏览器中运行客户端的网络框架。
Blazor服务器。一个在服务器端运行的网络框架,使用SignalR与浏览器进行通信。
WebAssembly托管模式
WebAssembly托管模式的目标是在浏览器中托管整个应用程序。Blazor WebAssembly应用程序的工件是HTML、JavaScript、.NET运行时的一个版本,以及你的二进制文件。它们都在浏览器中运行,所以你可以把它作为一个静态网站来托管。不需要服务器运行时间或解释器。
Blazor WebAssembly仍处于预览模式,所以你必须手动安装模板来创建Blazor WebAssembly应用程序。当你看到这篇文章时,这可能已经改变了。如果Blazor模板仍然不可用,你可以从命令行中运行以下程序,以获得预览版。
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2
现在你已经安装了模板,你可以用以下.NET CLI命令创建一个新的WebAssembly应用程序。
dotnet new blazorwasm -o wasmtest
这将创建一个新的Blazor WebAssembly应用程序,名称为 "wasmtest"。你可以把 "wasmtest "改为你的项目名称。
当你建立并测试了你的应用程序后,它就可以发布了。运行dotnet publish命令。
dotnet publish -c Release
你应该看到一个像这样的屏幕。

在这里我们可以看到工件的路径,如果我们想把它作为一个.NET核心应用程序运行的话(dotnet run)。
/home/jeremy/Projects/wasmtest/bin/Debug/netstandard2.1/publish/
这里有一个很酷的功能:静态文件作为工件。我们也有一个Blazor输出文件夹。这个文件夹是发布静态文件的地方。
在我的例子中,项目名称为wasmtest(你的会不同),该文件夹位于这里。
bin/Release/netstandard2.1/publish/wasmtest/dist
"dist "文件夹只包含静态文件。

你可以从任何静态网络主机上运行这个文件。我将为容器创建一个新的文件夹,和一个工件文件夹,然后将dist文件夹中的所有内容复制到工件中。
mkdir -p ~/Projects/wasmcontainer/artifacts
cp -r ~/Projects/wasmtest/bin/Release/netstandard2.1/publish/wasmtest/dist/* ~/Projects/wasmcontainer/artifacts/
在我们的wasmcontainer文件夹中,我们将创建一个简单的Docker文件。
FROM nginx
COPY artifacts /usr/share/nginx/html
这个文件拉下nginx镜像,然后把你机器上的artifacts文件复制到容器文件系统中的/usr/share/nginx/html (默认nginx文件夹)。每次构建镜像时都会这样做,所以如果你对工件做了修改,你就需要重建镜像。
这就是我们使用Blazor WebAssembly静态文件所需要的一切。现在,我们将创建一个镜像。
docker build -t jeremy/wasmtest:latest .

然后我们就可以运行它了。
docker run --name wasm1 -p 80:80 -d jeremy/wasmtest:latest
这将作为一个守护程序运行容器,所以它将一直运行到你决定停止它。
现在我们有一个静态的nginx服务器在80端口运行我们的应用程序。你可以浏览到它,并在你的本地机器上看到它。

在生产环境中,你会希望对NGINX的配置做更多的事情。然而,这些步骤将在一个容器中托管你的Blazor WebAssembly应用程序,用于开发。
Blazor服务器托管模式
对于服务器模式,你需要.NET Core运行时间3.0或更高。一个Blazor服务器应用程序是用blazorserver模板创建的。在这种情况下,我将应用程序命名为servertest。
dotnet new blazorserver -o servertest
一旦你完成了对应用程序的修改,并准备好部署它,运行以下命令来发布。
dotnet publish -c Release

工件将位于。
/app/bin/Release/netcoreapp3.1/publish/
我们将像之前那样创建另一个文件夹。
mkdir -p ~/Projects/servercontainer/artifacts
cp -r bin/Release/netcoreapp3.1/publish/* ~/Projects/servercontainer/artifacts/
下面是工件的样子。

现在我们将在servercontainer文件夹中创建另一个Docker文件,看起来像这样。
FROM mcr.microsoft.com/dotnet/core/aspnet:3.1
COPY artifacts/ app/
ENTRYPOINT ["dotnet", "app/servertest.dll"]
这个文件只比我们上一个Dockerfile多了一行。它带来了aspnet运行时镜像,复制了工件,然后为应用程序设置了一个入口点,在我的例子中是servertest.dll,因为项目名称是servertest。
我们可以用以下命令建立我们的镜像。
docker build -t jeremy/servertest:latest .
它应该看起来像这样。

然后我们用下面的命令来运行它。
docker run --name server1 -p 80:80 -d jeremy/servertest:latest
我们再次把它作为一个守护进程来运行,所以它将一直运行到容器停止为止。这将在80端口上运行你的Blazor服务器应用程序。

就这么简单!
总结
为Blazor的部署构建容器是一个简单的过程。重要的是,要记住每种容器的不同托管模式,并相应地构建你的镜像。这里展示的镜像可以用于开发和测试;但是,如果你想在生产环境中部署这些镜像,你应该做以下工作。
- 使用SSL而不是通过80端口开放
- 为Blazor WASM配置NGINX(至少是缓存优化)。
- 为您的Blazor服务器应用程序配置NGINX或其他反向代理
我希望这篇文章能够帮助说明如何将您的Blazor应用程序容器化。