《进击吧!Blazor!》系列入门教程 第一章 8.部署

《进击吧!Blazor!》是本人与张善友老师合作的Blazor零基础入门教程视频,此教程能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力。
视频地址:https://space.bilibili.com/483888821/channel/detail?cid=151273
Blazor WebAssembly 是单页应用 (SPA) 框架,用于使用 .NET 生成交互式客户端 Web 应用,采用 C# 代替 JavaScript 来编写前端代码
本系列文章基于《进击吧!Blazor!》编写,升级.Net5,但因篇幅有限,省略了部分代码,完整示例代码:https://github.com/TimChen44/Blazor-ToDo

作者:陈超超
Ant Design Blazor 项目贡献者,拥有十多年从业经验,长期基于.Net技术栈进行架构与开发产品的工作,现就职于正泰集团。
邮箱:timchen@live.com
欢迎各位读者有任何问题联系我,我们共同进步。

部署是开发的最后一部,我们这次就来聊聊Blazor的部署方法。

发布

VS已经为我们预制了多个目标的发布工具,使用这些工具可以很容易的完成发布和部署。

1.首先在ToDo.Server项目上右键,选择发布...功能
在这里插入图片描述

2.接着选择要发布的目标,常用的环境都支持,我们就以Azure为例
在这里插入图片描述
3.根据目标不同填写一些配置,VS也会帮我们保存配置信息便于下次使用。
在这里插入图片描述
4.配置一些依赖,比如本例中需要配置数据库,最后点击”发布“按钮,接着喝杯茶等待一下。
在这里插入图片描述
5.经过VS后台的一顿操作,发布完成,并且会自动打开发布的站点,效果如下
在这里插入图片描述
到这里,这篇文章结束了,各位再见!😜

这个😅,我们本着“搞事情”的精神,"没有困难制造困难"的理念来重构我们的发布,各位走起~~~~

首先可以确定上面VS为我们提供的发布工具确实非常方便,比较适合小团队开发一些小规模的系统,但是通常企业中使用会遇到以下的问题

  • 负责发布的运维工程师与负责编码的开发工程师不是同一拨人,不可能让运维工程师用VS开着源码进行发布,代码安全,生产环境安全双双无法保证。
  • 自动化的IC/CD普及度的增加,生成和发布过程挪到了各DevOps平台,所以也不适合在VS中操作。

广告时间:推荐大家尝试一下微软的Azure DevOps,支持本地部署,支持所有语言,预制各平台发布流程等等,配置一个项目的IC/CD过程犹如前面的操作一样,鼠标点点就完事,懒人的福音。

综上述,我们可以采用比较灵活的的做法,先将项目发布成文件,然后将这些文件部署到不同的环境中。这也符合自动化的IC/CD的常规流程,先集成再部署。

如果使用Docker,可以在IC时直接Build出Image,也可以在CD时Build出Image,我觉得没有标准,适合自己就行。

发布到文件夹

那么我们继续使用VS的发布工具将项目打包

1.选择发布到文件夹选项,并设定输出位置
在这里插入图片描述
2.点击发布完成编译并输出。
在这里插入图片描述
3.点击上面的”铅笔“图标可以进行详细配置
在这里插入图片描述
目标框架 设置使用那个.net框架进行编译
部署模式 它分为框架依赖独立两个选共享
框架依赖 模式下生成的文件需要.net运行时才能运行,优点体积较小,程序本省不依赖目标运行时,方便移植
独立 模式下编译器会把.net运行时与程序打包在一起,运行平台无需.net运行时,缺点是体积较大,编译的程序依赖于目标运行时
目标运行时 选择针对那个平台编译,可以是win、linux、osx系统,以及x64、x86、arm指令集
生成单个文件 勾选后可以把程序打包在一个文件中,运行的时候程序会自动解包并运行
裁剪未使用的程序集 将一些项目中引用但是代码中并未使用的程序集剔除以减少程序包的体积

我们的示例程序使用配置 部署模式依赖框架目标运行时可移植

如果编译过程使用自动化工具进行打包,除了打包命令中额外增加参数外,我们也可以在.csproj文件中做以下配置来实现上面的参数

<PropertyGroup>
	<PublishSingleFile>True</PublishSingleFile><!-- 生成单个文件  -->
	<PublishTrimmed>True</PublishTrimmed><!-- 裁剪未使用的程序集  -->
	<SelfContained>true</SelfContained><!-- 框架依赖:独立  -->
	<RuntimeIdentifier>win-x86</RuntimeIdentifier><!-- 目标运行时  -->
</PropertyGroup>

4.程序以文件形式输出在我们给定的路径

部署

使用 ASP.NET Core 进行托管部署

如果使用ASP.NET Core的Kestrel Web 服务器托管程序,我们只需运行我们上面发布输出的ToDo.Server.exe文件即可
在这里插入图片描述
到这里有个小问题,就是我们不想使用默认的5000和5001端口,这个我们就需要人为的给定端口。

修改ToDo.ServerProgram.cs文件

public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
        {
   
   
            webBuilder
            .UseUrls("http://*:4000", "https://*:4001")
            .UseStartup<Startup>();
        });

我们使用.UseUrls来给定Url地址,这里*代表适配所有IP或域名,端口分别设定为40004001

这里又冒出一个小问题,目前端口硬编码在程序中,发布后无法修改,遇到这个问题,我们可以通过启动参数、配置文件等多个方法实现发布后修改,在这里我贴上通过

### Blazor入门教程和资源 #### 什么是BlazorBlazor是一种用于构建交互式客户端Web应用程序的框架,允许使用C#而不是JavaScript来编写前端代码[^2]。对于.NET开发者而言,这意味着可以在前后端统一使用熟悉的技术栈。 #### 安装与配置环境 为了开始学习Blazor, 首先需要安装Visual Studio (建议版本为最新稳定版),并确保选择了“.NET跨平台开发”的工作负载。此外还需要下载并设置好.NET SDK。完成这些准备工作之后就可以创建第一个Blazor应用了。 #### 创建首个Blazor WebAssembly App 通过命令行工具或者IDE界面新建项目向导中的模板选项轻松建立新的Blazor WebAssembly工程: ```bash dotnet new blazorwasm -o MyFirstBlazorApp cd MyFirstBlazorApp dotnet run ``` 这段简单的脚本会初始化一个新的基于WebAssembly运行模式下的Blazor程序,并启动本地服务器供测试访问。 #### 学习组件化编程思维 在深入研究之前理解Blazor的核心概念——组件非常重要。每一个`.razor`文件代表了一个独立可重用的小部件(Component),它们之间可以通过参数传递数据相互协作形成复杂UI结构。例如下面展示的是如何定义一个带有属性绑定特性的简单按钮控件: ```csharp // Button.razor <button @onclick="OnClick"> Click me! </button> @code { [Parameter] public EventCallback OnClick { get; set; } } ``` 此段代码片段展示了基本的Razor语法以及事件处理机制的应用方式[^3]。 #### 掌握状态管理技巧 随着应用程序规模的增长,有效的状态管理和共享变得至关重要。官方推荐的方式之一就是利用依赖注入(Dependency Injection)特性配合专门的服务类(Service Class)来进行全局变量存储及操作。比如要实现计数器功能可以这样做: ```csharp public class CounterService : ICounterService { private int _count; public event Action<int> CountChanged; public void IncrementCount() { _count++; CountChanged?.Invoke(_count); } // ... other methods ... } // Register service in Program.cs or Startup.cs builder.Services.AddSingleton<ICounterService, CounterService>(); ``` 上述例子说明了服务注册过程和服务内部方法的设计思路。 #### 参考优秀开源库扩展能力 除了掌握基础知识点外,积极借鉴社区力量也是快速提升技能水平的有效途径。像[MASA.Blazor](https://github.com/BlazorComponent/MASA.Blazor)[^1], 这样的高质量第三方组件集合能够帮助加速开发进度同时提高用户体验质量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值