在本文中,我们将介绍如何将 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. MySQL学习之路2-数据库and数据表的基本操作

    数据库基本操作 查看.选择数据库: show databases; use <databasename>; 创建数据库:create database <dbname> cha ...

  2. 中阶 d05 tomcat 安装 eclipse上配置tomcat

    eclipse使用参考 https://www.bilibili.com/video/av49438855/?p=24 1. 直接解压 ,然后找到bin/startup.bat 2. 可以安装 启动之 ...

  3. File类心得

    File类心得 在程序中设置路径时会有系统依赖的问题,java.io.File类提供一个抽象的.与系统独立的路径表示.给它一个路径字符串,它会将其转换为与系统无关的抽象路径表示,这个路径可以指向一个文 ...

  4. Python 文件拼接

    # -*- coding:utf-8 -*- import re import csv file = open('make_setup.cfg', 'w+') with open("tyb. ...

  5. 【Tool】IDEA 连接数据库

    窗口 View - DataBase 右侧的窗口弹出,点加号选择数据库 没有装载驱动包,提示下载 可以选择老版本的驱动,或者新版的 老版本驱动只需要填入数据库,账户和密码即可测试链接,显示连接成功 新 ...

  6. 【LeetCode】23.合并K个排序链表

    题目描述 23.合并K个排序链表 合并k个排序链表,返回合并后的排序链表.请分析和描述算法的复杂度. 示例: 输入: [ 1->4->5, 1->3->4, 2->6 ] ...

  7. 5000+图片找到你喜欢的那个TA,Python爬虫+颜值打分

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 罗罗攀 PS:如有需要Python学习资料的小伙伴可以加点击下方链接 ...

  8. cheat sheet 简介

    cheat sheet 速查表 /小抄 如果期末考试老师只让你让带一张A4纸,合法"作弊",纸上能写多少全凭自己本事,你会写什么?大部分人应该把整个课程的知识重点梳理一遍,方便记忆 ...

  9. A - Free DIY Tour HDU - 1224

    题目大意:每一个城市都有一定的魅力值,然后有一个有向图,根据这个有向图从1到n+1所获得的魅力的最大值,并输出路径(要求只能从编号娇小的城市到编号较大的城市). 题解:很容易想到最短路+路径纪录.但是 ...

  10. Gradle系列之Groovy基础篇

    原文发于微信公众号 jzman-blog,欢迎关注交流. 上一篇学习了 Gradle 的入门知识,Gradle 基于 Groovy,今天学习一下 Groovy 的基础知识,Groovy 是基于 JVM ...