探索Blazor WebAssembly应用的测试与发布
1. 测试软件与Blazor WebAssembly组件
在软件开发中,测试是确保代码质量和可靠性的关键环节。对于Blazor WebAssembly组件的测试,我们需要了解不同类型的测试及其重要性。
1.1 测试类型
- 单元测试 :聚焦于被测试单元(CUT),确保单个组件或功能的正确性。
- 端到端(E2E)测试 :涉及整个应用,模拟用户真实操作场景,验证系统的整体功能。
1.2 测试工具与框架
- bUnit :用于Blazor组件的单元测试,提供了丰富的功能和便捷的API。通过bUnit,我们可以轻松地设置测试项目,编写和运行单元测试。
- Playwright for .NET :支持NUnit和MSTest测试框架,可用于编写E2E测试。它有详细的文档,帮助我们快速上手并利用其各种特性。若你对Playwright for .NET感兴趣,可访问其官网: https://playwright.dev/dotnet/docs/intro 。
1.3 测试中的模拟与伪造
在编写测试时,有时需要模拟和伪造服务与功能,以满足被测试单元的依赖。Moq框架是一个常用的模拟工具,而bUnit也提供了内置的模拟和伪造服务。
2. Blazor WebAssembly应用发布前的检查
在将Blazor WebAssembly应用发布到线上之前,需要进行一些重要的检查和配置,以确保应用的性能和稳定性。
2.1 AOT编译
- 原理 :默认情况下,Blazor WebAssembly应用通过WebAssembly中的.NET中间语言(IL)解释器在浏览器中运行。AOT编译则是在浏览器运行之前将.NET代码编译为WebAssembly,避免了解释过程,从而提高性能。
- 优缺点 :AOT编译可以提升应用在复杂计算和大数据处理时的性能,但会增加应用的初始大小,导致首次加载时间变长。因此,仅在应用进行大量客户端计算时才考虑使用。
- 启用方法 :打开Blazor项目的.csproj文件,添加以下属性:
<PropertyGroup>
<RunAOTCompilation>true</RunAOTCompilation>
</PropertyGroup>
2.2 代码裁剪
- 作用 :在发布阶段自动执行,去除生成的IL代码中未使用的部分,显著减小应用大小。
- 注意事项 :如果应用使用了C#的反射功能,裁剪操作可能会误删目标类型,导致不确定的行为。此时,可能需要配置裁剪器忽略特定程序集或完全禁用裁剪操作。
- 忽略特定程序集裁剪:在项目文件中添加以下内容:
<ItemGroup>
<TrimmerRootAssembly Include="Name_Of_Your_Assembly" />
</ItemGroup>
- 完全禁用裁剪:在项目文件中添加:
<PublishTrimmed>false</PublishTrimmed>
2.3 压缩
- 默认行为 :发布Blazor WebAssembly应用时,输出会自动压缩,以减小应用大小并提高启动时间。
- 禁用情况 :当应用发布到本身会提供压缩文件的主机(如AWS CloudFront CDN)时,可能需要禁用Visual Studio的压缩功能,以避免增加WebAssembly运行时的开销。禁用方法是在项目文件中添加:
<PropertyGroup>
<BlazorEnableCompression>false</BlazorEnableCompression>
</PropertyGroup>
2.4 URL重写
- 问题描述 :当用户直接从浏览器地址栏访问特定页面时,可能会出现404错误,因为服务器没有对应的映射。
- 解决方案 :配置主机将任何请求映射到index.html文件。在部署到Azure Static Web Apps时,我们将看到如何配置回退URL到index.html。若计划在IIS上托管应用,可参考: https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-7.0#iis 。
2.5 禁用时区支持
默认情况下,Blazor WebAssembly运行时包含一个数据文件以确保时区数据的正确性。禁用此功能可以减小应用的初始大小,并提高日期解析和格式化等操作的性能。在.csproj文件中添加以下属性并设置为false:
<PropertyGroup>
<BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>
</PropertyGroup>
3. 了解Blazor WebAssembly ASP.NET Core Hosted
除了独立的Blazor WebAssembly项目,还有一种Blazor WebAssembly ASP.NET Core Hosted项目模板。
3.1 项目结构
该模板创建一个Blazor WebAssembly项目、一个共享类库项目和一个ASP.NET Core API项目。API项目负责将Blazor WebAssembly应用提供给客户端,只需托管服务器项目,Blazor WebAssembly项目将在其中被引用。
3.2 优点
- 开发效率 :适合从头开始构建项目,需要同时开发API和Blazor应用的场景,将两者作为一个整体单元进行开发,加速开发过程。
- 服务器端预渲染 :Blazor WebAssembly通常在浏览器客户端渲染UI和组件,而服务器端预渲染可以在服务器上渲染应用的初始HTML内容,并在第一次响应时发送给客户端。这不仅提高了用户体验和性能,还能实现搜索引擎优化(SEO)。
3.3 创建方法
- Visual Studio :选择Blazor WebAssembly项目模板后,确保勾选“ASP.NET Core Hosted”。
- .NET CLI :使用以下命令:
dotnet new blazorwasm --hosted -o <project-name>
4. 发布Blazor WebAssembly到Azure App Service
Azure App Service是一个平台即服务(PaaS)解决方案,支持多种部署选项,可用于大规模部署Web应用。
4.1 部署选项
- 持续部署 :支持从GitHub、Azure DevOps和Bitbucket等多个源进行持续部署,代码仓库有更改时自动构建和部署应用。了解更多: https://learn.microsoft.com/en-us/azure/app-service/deploy-continuous-deployment?tabs=github 。
- FTP部署 :可使用FTP或FTPS客户端上传项目。详情见: https://learn.microsoft.com/en-us/azure/app-service/deploy-ftp?tabs=portal 。
- 容器部署 :通过内置的Docker支持,完全支持部署容器化应用。更多信息: https://learn.microsoft.com/en-us/azure/app-service/deploy-ci-cd-custom-container 。
- 通过Visual Studio进行Web部署 :直接从Visual Studio将项目发布到Azure App Service。
4.2 部署步骤
- 打开浏览器,访问Azure门户: https://portal.azure.com 。
- 在主页上,打开左侧菜单,点击“创建资源”。
- 在“创建资源”页面,选择“Web应用”服务。
- 在“创建Web应用”页面,进行以下配置:
- 选择订阅。
- 创建一个具有唯一名称的新资源组。
- 定义Azure App Service的名称(全局唯一)。
- 选择“代码”作为发布方法。
- 选择.NET 7作为运行时堆栈。
- 选择Windows作为操作系统。
- 选择应用将托管的Azure区域。
- 定价计划选择“免费F1(共享基础设施)”。
- 点击“查看 + 创建”,验证完成后再次点击“创建”。
- 等待Azure App Service资源创建完成。
- 点击“转到资源”,打开项目的Azure App Service资源页面,然后点击“下载发布配置文件”。
- 在Visual Studio中打开解决方案,右键点击服务器项目(如BooksStore.Server),选择“发布…”。
- 在“发布”对话框中,选择“导入配置文件”,浏览并选择步骤7中下载的配置文件。
- 点击“发布”按钮,Visual Studio将以发布模式构建项目并开始部署。
部署完成后,浏览器将自动打开并导航到新应用的URL,格式为: https://{AZURE_APP_SERVICE_NAME}.azurewebsites.net 。
通过以上步骤,你已经成功发布了第一个Blazor WebAssembly项目。接下来,我们将探讨另一个有趣的服务——Azure Static Web Apps,用于发布Blazor WebAssembly独立项目。
5. 发布到Azure Static Web Apps
Azure Static Web Apps是一项专门用于托管静态Web应用的服务,它提供了简单的部署流程和丰富的功能,非常适合Blazor WebAssembly独立项目的发布。
5.1 优点
- 简单部署 :与GitHub集成,支持自动部署,当代码仓库有更新时,自动构建和部署应用。
- 全球分发 :通过内容分发网络(CDN)全球分发应用,提高用户访问速度。
- 免费层 :提供免费层,适合小型项目和开发测试。
5.2 部署步骤
- 准备工作
- 确保你有一个GitHub账户,并且项目已经托管在GitHub上。
- 拥有一个Azure账户,如果没有,可以通过 https://azure.microsoft.com/en-us/free/ 创建免费账户。
- 创建Azure Static Web Apps资源
- 打开Azure门户: https://portal.azure.com 。
- 点击“创建资源”,搜索“Static Web Apps”并选择。
- 在“创建静态Web应用”页面,进行以下配置:
- 选择订阅和资源组。
- 输入应用名称。
- 选择GitHub作为部署源,并授权Azure访问你的GitHub账户。
- 选择项目所在的组织、仓库和分支。
- 构建预设选择“Blazor”。
- 输入应用位置(通常为项目根目录)和API位置(如果有API)。
- 配置URL重写
- 在项目根目录下创建一个
staticwebapp.config.json文件,用于配置URL重写规则。 - 示例配置如下:
- 在项目根目录下创建一个
{
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/static/**", "/favicon.ico"]
}
}
- 此配置将所有请求重写为`index.html`,除了`/static`目录下的文件和`favicon.ico`。
- 提交更改并等待部署
- 将
staticwebapp.config.json文件提交到GitHub仓库。 - Azure将自动检测到更改并开始部署应用。部署完成后,你可以通过Azure Static Web Apps提供的URL访问应用。
- 将
6. 持续集成与持续交付(CI/CD)
在软件开发中,持续集成(CI)和持续交付(CD)是提高开发效率和代码质量的重要实践。
6.1 CI/CD概念
- 持续集成 :开发人员频繁地将代码集成到共享仓库,每次集成都会触发自动化构建和测试,确保代码的兼容性和稳定性。
- 持续交付 :在持续集成的基础上,将通过测试的代码自动部署到生产环境或预生产环境,实现快速、可靠的软件交付。
6.2 使用GitHub Actions实现CI/CD
- 创建工作流文件 :在项目的
.github/workflows目录下创建一个YAML文件,定义CI/CD工作流。 - 示例工作流文件如下 :
name: Blazor WebAssembly CI/CD
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Setup .NET
uses: actions/setup-dotnet@v1
with:
dotnet-version: '7.0.x'
- name: Build project
run: dotnet build --configuration Release
- name: Publish project
run: dotnet publish -c Release -o publish
- name: Deploy to Azure Static Web Apps
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: "upload"
app_location: "publish"
api_location: ""
output_location: ""
- 此工作流在每次推送到
main分支时触发,完成项目的构建、发布和部署到Azure Static Web Apps的操作。
7. 总结
通过本文,我们全面了解了Blazor WebAssembly应用的测试和发布过程。从测试工具的选择和使用,到发布前的各项检查和配置,再到不同平台的发布方法和CI/CD实践,每一个环节都对确保应用的质量和性能至关重要。希望这些内容能帮助你顺利开发和发布高质量的Blazor WebAssembly应用。
在实际项目中,根据项目的需求和特点,选择合适的测试策略和发布平台,不断优化开发流程,将有助于提高开发效率和用户体验。同时,持续关注技术的发展和更新,学习新的工具和方法,将使你在Blazor WebAssembly开发领域保持领先地位。
探索Blazor WebAssembly应用的测试与发布(下半部分)
8. 测试与发布的关键要点回顾
在前面的内容中,我们详细介绍了Blazor WebAssembly应用的测试和发布相关知识,下面通过表格形式对关键要点进行回顾:
| 类别 | 具体内容 | 操作方法 |
| ---- | ---- | ---- |
| 测试 | 单元测试 | 聚焦被测试单元,使用bUnit框架进行测试 |
| | 端到端(E2E)测试 | 涉及整个应用,使用Playwright for .NET框架,参考官网文档: https://playwright.dev/dotnet/docs/intro |
| 发布前检查 | AOT编译 | 打开.csproj文件,添加 <RunAOTCompilation>true</RunAOTCompilation> |
| | 代码裁剪 | 忽略特定程序集: <ItemGroup><TrimmerRootAssembly Include="Name_Of_Your_Assembly" /></ItemGroup> ;完全禁用: <PublishTrimmed>false</PublishTrimmed> |
| | 压缩 | 一般默认开启,禁用时添加 <BlazorEnableCompression>false</BlazorEnableCompression> |
| | URL重写 | 部署到Azure Static Web Apps时配置 staticwebapp.config.json 文件;IIS托管参考: https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-7.0#iis |
| | 禁用时区支持 | 在.csproj文件中添加 <BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport> |
| 项目类型 | Blazor WebAssembly ASP.NET Core Hosted | Visual Studio:选择模板后勾选“ASP.NET Core Hosted”;.NET CLI: dotnet new blazorwasm --hosted -o <project-name> |
| 发布平台 | Azure App Service | 按步骤在Azure门户创建资源,下载发布配置文件,在Visual Studio中导入并发布 |
| | Azure Static Web Apps | 准备GitHub和Azure账户,在Azure门户创建资源,配置URL重写,提交更改等待部署 |
| CI/CD | 持续集成与持续交付 | 使用GitHub Actions,在 .github/workflows 目录下创建YAML文件定义工作流 |
9. 测试与发布流程的mermaid流程图
graph LR
classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px
classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px
classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px
A([开始]):::startend --> B(测试阶段):::process
B --> B1(单元测试):::process
B --> B2(端到端测试):::process
B1 --> C(发布前检查):::process
B2 --> C
C --> C1(AOT编译):::process
C --> C2(代码裁剪):::process
C --> C3(压缩):::process
C --> C4(URL重写):::process
C --> C5(禁用时区支持):::process
C1 --> D(选择项目类型):::process
C2 --> D
C3 --> D
C4 --> D
C5 --> D
D --> D1(Blazor WebAssembly独立项目):::process
D --> D2(Blazor WebAssembly ASP.NET Core Hosted项目):::process
D1 --> E(选择发布平台):::process
D2 --> E
E --> E1(Azure App Service):::process
E --> E2(Azure Static Web Apps):::process
E1 --> F(持续集成与持续交付):::process
E2 --> F
F --> G([结束]):::startend
10. 常见问题与解决方案
在Blazor WebAssembly应用的测试和发布过程中,可能会遇到一些常见问题,下面为你提供相应的解决方案。
10.1 测试相关问题
- 问题 :单元测试中依赖的服务无法正常模拟。
- 解决方案 :使用Moq框架或bUnit的内置模拟和伪造服务,确保正确配置模拟对象的行为。
- 问题 :端到端测试运行缓慢。
- 解决方案 :检查测试环境和网络状况,优化测试代码,避免不必要的等待和重复操作。
10.2 发布相关问题
- 问题 :AOT编译后应用初始大小过大。
- 解决方案 :仅在应用进行大量客户端计算时启用AOT编译;检查代码是否存在不必要的依赖和引用。
- 问题 :URL重写配置后仍出现404错误。
- 解决方案 :检查
staticwebapp.config.json文件的配置是否正确,确保规则符合项目需求;在IIS托管时,检查IIS的配置是否正确。
- 解决方案 :检查
11. 未来发展趋势
随着技术的不断发展,Blazor WebAssembly应用的测试和发布也将迎来新的变化和挑战。
11.1 测试工具的发展
未来,测试工具将更加智能化和自动化,能够自动识别和处理各种测试场景,减少人工干预。例如,可能会出现基于人工智能的测试框架,能够自动生成测试用例和执行测试。
11.2 发布平台的优化
发布平台将提供更加便捷和高效的部署方式,支持更多的云服务和容器技术。同时,平台的安全性和稳定性也将得到进一步提升,确保应用的可靠运行。
11.3 CI/CD的普及
持续集成和持续交付将成为软件开发的标准实践,更多的开发者将采用CI/CD工具和流程,实现快速、可靠的软件交付。
12. 总结与展望
通过本文的介绍,我们深入了解了Blazor WebAssembly应用的测试和发布过程,包括测试类型、测试工具、发布前检查、项目类型选择、发布平台以及CI/CD等方面的知识。掌握这些内容,将有助于你开发和发布高质量的Blazor WebAssembly应用。
在未来的开发中,我们应不断关注技术的发展趋势,积极采用新的工具和方法,优化测试和发布流程,提高开发效率和应用质量。同时,遇到问题时要善于总结和解决,不断积累经验,提升自己的技术水平。希望你在Blazor WebAssembly开发的道路上取得更好的成绩!
Blazor WASM测试与发布指南
9

被折叠的 条评论
为什么被折叠?



