在本文中,我们将介绍如何将 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上运行应用程序。你可以通过浏览器上看到它:

在生产环境中,我们可以通过Jexus配置更多的操作,上面这些步骤是托管你的Blazor WebAssembly 应用程序在容器中进行开发。

代码参见:https://github.com/BlazorHub/wasmtest

使用Jexus 容器化您的 Blazor 应用程序的更多相关文章

  1. Asp.NetCore轻松学-使用Docker进行容器化托管

    前言 没有 docker 部署的程序是不完整的,在写了 IIS/Centos/Supervisor 3篇托管介绍文章后,终于来到了容器化部署,博客园里面有关于 docker 部署的文章比比皆是,作为硬 ...

  2. ASP.NET Core应用程序容器化、持续集成与Kubernetes集群部署(一)(转载)

    本文结构 ASP.NET Core应用程序的构建 ASP.NET Core应用程序容器化所需注意的问题 应用程序的配置信息 端口侦听 ASP.NET Core的容器版本 docker镜像构建上下文(B ...

  3. docker4dotnet #2 容器化主机

    .NET 猿自从认识了小鲸鱼,感觉功力大增.上篇<docker4dotnet #1 前世今生&世界你好>中给大家介绍了如何在Windows上面配置Docker for Window ...

  4. 面向UI编程:ui.js 1.0 粗糙版本发布,分布式开发+容器化+组件化+配置化框架,从无到有的艰难创造

    时隔第一次被UI思路激励,到现在1.0的粗糙版本发布,掐指一算整整半年了.半年之间,有些细节不断推翻重做,再推翻再重做.时隔今日,终于能先出来个东西了,这个版本很粗糙,主体功能大概能实现了,但是还是有 ...

  5. .NET Core容器化@Docker

    温馨提示:本文适合动手演练,效果更佳.  1. 引言 我们知道. NET Core最大的特性之一就是跨平台,而对于跨平台,似乎大家印象中就是可以在非Windows系统上部署运行.而至于如何操作,可能就 ...

  6. .NET Core容器化之多容器应用部署@Docker-Compose

    1.引言 紧接上篇.NET Core容器化@Docker,这一节我们先来介绍如何使用Nginx来完成.NET Core应用的反向代理,然后再介绍多容器应用的部署问题. 2. Why Need Ngin ...

  7. .NET Core+MySql+Nginx 容器化部署

    .NET Core容器化@Docker .NET Core容器化之多容器应用部署@Docker-Compose .NET Core+MySql+Nginx 容器化部署 GitHub-Demo:Dock ...

  8. .NET微服务 容器化.NET应用架构指南(支持.NET Core2)

    介绍 企业通过使用容器,日益实现成本节约.解决部署问题并改进 DevOps 和生产操作. 通过创建 Azure 容器服务.Azure Service Fabric 等产品,同时与 Docker.Mes ...

  9. 容器化的 DevOps 工作流

    对于 devops 来说,容器技术绝对是我们笑傲江湖的法宝.本文通过一个小 demo 来介绍如何使用容器技术来改进我们的 devops 工作流. devops 的日常工作中难免会有一些繁琐的重复性劳动 ...

随机推荐

  1. C语言实现链栈以及基本操作

    链栈,即用链表实现栈存储结构.链栈的实现思路同顺序栈类似,顺序栈是将数顺序表(数组)的一端作为栈底,另一端为栈顶:链栈也如此,通常我们将链表的头部作为栈顶,尾部作为栈底,如下下图所示: 将链表头部作为 ...

  2. sprigboot 异常 Failed to start component [StandardEngine[Tomcat].StandardHost[localhost].Tomc...

    java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start com ...

  3. alg-最长公共子序列

    class Solution { public: std::string LongestCommonSubsequence(const std::string& s1, const std:: ...

  4. 2019-06-02 Python之微信好友数据分析以及运用Pyecharts可视化

    一.库的使用说明 pass 二.微信好友信息的获取 def get_friends_info(self): #获取好像信息,返回lis列表 bot = Bot() lis = [['name', 'r ...

  5. Python发送http请求时遇到问题总结

    1.报错信息为“ERROR 'str' object has no attribute 'endwith'”,排查发现endswith方法名写错了,少了s,写成了 'endwith' if inter ...

  6. SpringBoot系列(八)分分钟学会Springboot多种解决跨域方式

    SpringBoot系列(八) 分分钟学会SpringBoot多种跨域解决方式 往期推荐 SpringBoot系列(一)idea新建Springboot项目 SpringBoot系列(二)入门知识 s ...

  7. 最新超详细VMware虚拟机安装完整教程

    一.基础介绍 VMWare虚拟机软件是一个“虚拟PC”软件,它使你可以在一台机器上同时运行二个或更多Windows.DOS.LINUX系统.与“多启动”系统相比,VMWare采用了完全不同的概念.多启 ...

  8. 形象地展示信号与系统中的一些细节和原理——卷积、复数、傅里叶变换、拉普拉斯变换、零极图唯一确定因果LTI系统

    看懂本文需要读者具备一定的微积分基础.至少开始学信号与系统了本文主要讲解欧拉公式.傅里叶变换的频率轴的负半轴的意义.傅里叶变换的缺陷.为什么因果LTI系统可以被零极图几乎唯一确定等等容易被初学者忽略但 ...

  9. 你知道什么是 GitHub Action 么?

    本文是 GitHub Action 的入门教程,如您已有相关使用经验可以直接关掉. GitHub Action 是 GitHub 于 2018 年 10 月推出的一个 CI\CD 服务. 之前一直都是 ...

  10. Ansible playbook 编程

    Ansible playbook 编程详解与各种小案例 主机规划 添加用户账号 说明: 1. 运维人员使用的登录账号: 2. 所有的业务都放在 /app/ 下「yun用户的家目录」,避免业务数据乱放: ...