在本文中,我们将介绍如何将 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++静态库和动态库

    静态库与动态库 首先简单介绍一下gcc 指令 ubuntu 下安装gcc g++ 方法 sudo apt install gcc g++ gcc 的简单使用 建立hello.c 源文件 gcc hel ...

  2. MODIS系列之NDVI(MOD13Q1)一:数据下载(一)基于插件

    引言: 写MODIS数据处理这个系列文章的初衷,主要是为了分享本人处理MODIS数据方面的一些经验.鉴于网上对这方面系统性的总结还比较少,我搜集资料时也是走了许多的弯路,因此希望通过此文让初学者能够更 ...

  3. canvas 实现光线沿不规则路径运动

    canvas 实现光线沿不规则路径运动 此文章为原创,请勿转载 1.svg实现 2.canvas实现 3.坑点 svg让动画沿着不规则路径运动 查阅svg文档后发现,svg动画运动有两种实现方式,且都 ...

  4. springboot 项目使用阿里云短信服务发送手机验证码

    1.注册阿里云账户进行账号实名认证 2.申请短信签名和模板 3.创建access_key和access_secret 4.然后就是代码编写 一.找到产品与服务里面的云通信模块,然后找到短信服务,开通短 ...

  5. 常用vscode 插件第一季

    VSCODE 常用插件第一季 1.chinese 此插件中文(简体)语言包为 VS Code 提供本地化界面. https://marketplace.visualstudio.com/items?i ...

  6. L9循环神经网络进阶 ModernRNN

    GRU RNN存在的问题:梯度较容易出现衰减或爆炸(BPTT) ⻔控循环神经⽹络:捕捉时间序列中时间步距离较⼤的依赖关系 RNN: Ht=ϕ(XtWxh+Ht−1Whh+bh) H_{t} = ϕ(X ...

  7. codeforces 122C perfect team

    You may have already known that a standard ICPC team consists of exactly three members. The perfect ...

  8. Project configuration is not up-to-date with pom.xml.错误

    完整错误信息:Description Resource Path Location TypeProject configuration is not up-to-date with pom.xml. ...

  9. 漫画:工作这么多年,你居然不知道 Maven 中 Optional 和 Exclusions 的区别?

    欢迎关注笔者的公众号: 小哈学Java, 专注于推送 Java 领域优质干货文章!! Maven 依赖排除(Exclusions) 因为 Maven 构建项目具有依赖可传递的特性,当你在 pom.xm ...

  10. 菜鸡试飞----SRCの信息收集手册

    whois信息 微步在线 https://x.threatbook.cn/ 站长之家 http://whois.chinaz.com/ dns信息-----检测是否存在dns域传送漏洞 子域名的收集 ...