容器化Blazor应用程序的方法

386 阅读5分钟

容器化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

你应该看到一个像这样的屏幕。

Containerizing Blazor Apps

在这里我们可以看到工件的路径,如果我们想把它作为一个.NET核心应用程序运行的话(dotnet run)。

/home/jeremy/Projects/wasmtest/bin/Debug/netstandard2.1/publish/

这里有一个很酷的功能:静态文件作为工件。我们也有一个Blazor输出文件夹。这个文件夹是发布静态文件的地方。

在我的例子中,项目名称为wasmtest(你的会不同),该文件夹位于这里。

bin/Release/netstandard2.1/publish/wasmtest/dist

"dist "文件夹只包含静态文件。

Containerizing Blazor Apps

你可以从任何静态网络主机上运行这个文件。我将为容器创建一个新的文件夹,和一个工件文件夹,然后将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 .

Containerizing Blazor Apps

然后我们就可以运行它了。

docker run --name wasm1 -p 80:80 -d jeremy/wasmtest:latest

这将作为一个守护程序运行容器,所以它将一直运行到你决定停止它。

现在我们有一个静态的nginx服务器在80端口运行我们的应用程序。你可以浏览到它,并在你的本地机器上看到它。

Containerizing Blazor Apps

在生产环境中,你会希望对NGINX的配置做更多的事情。然而,这些步骤将在一个容器中托管你的Blazor WebAssembly应用程序,用于开发。

Blazor服务器托管模式

对于服务器模式,你需要.NET Core运行时间3.0或更高。一个Blazor服务器应用程序是用blazorserver模板创建的。在这种情况下,我将应用程序命名为servertest。

dotnet new blazorserver -o servertest

一旦你完成了对应用程序的修改,并准备好部署它,运行以下命令来发布。

dotnet publish -c Release

Containerizing Blazor Apps

工件将位于。

/app/bin/Release/netcoreapp3.1/publish/

我们将像之前那样创建另一个文件夹。

mkdir -p ~/Projects/servercontainer/artifacts
cp -r bin/Release/netcoreapp3.1/publish/* ~/Projects/servercontainer/artifacts/

下面是工件的样子。

Containerizing Blazor Apps

现在我们将在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 .

它应该看起来像这样。

Containerizing Blazor Apps

然后我们用下面的命令来运行它。

docker run --name server1 -p 80:80 -d jeremy/servertest:latest

我们再次把它作为一个守护进程来运行,所以它将一直运行到容器停止为止。这将在80端口上运行你的Blazor服务器应用程序。

Containerizing Blazor Apps

就这么简单!

总结

为Blazor的部署构建容器是一个简单的过程。重要的是,要记住每种容器的不同托管模式,并相应地构建你的镜像。这里展示的镜像可以用于开发和测试;但是,如果你想在生产环境中部署这些镜像,你应该做以下工作。

  • 使用SSL而不是通过80端口开放
  • 为Blazor WASM配置NGINX(至少是缓存优化)。
  • 为您的Blazor服务器应用程序配置NGINX或其他反向代理

我希望这篇文章能够帮助说明如何将您的Blazor应用程序容器化。