26、探索Blazor WebAssembly应用的测试与发布

Blazor WASM测试与发布指南

探索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重写
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 部署选项
4.2 部署步骤
  1. 打开浏览器,访问Azure门户: https://portal.azure.com
  2. 在主页上,打开左侧菜单,点击“创建资源”。
  3. 在“创建资源”页面,选择“Web应用”服务。
  4. 在“创建Web应用”页面,进行以下配置:
    • 选择订阅。
    • 创建一个具有唯一名称的新资源组。
    • 定义Azure App Service的名称(全局唯一)。
    • 选择“代码”作为发布方法。
    • 选择.NET 7作为运行时堆栈。
    • 选择Windows作为操作系统。
    • 选择应用将托管的Azure区域。
    • 定价计划选择“免费F1(共享基础设施)”。
  5. 点击“查看 + 创建”,验证完成后再次点击“创建”。
  6. 等待Azure App Service资源创建完成。
  7. 点击“转到资源”,打开项目的Azure App Service资源页面,然后点击“下载发布配置文件”。
  8. 在Visual Studio中打开解决方案,右键点击服务器项目(如BooksStore.Server),选择“发布…”。
  9. 在“发布”对话框中,选择“导入配置文件”,浏览并选择步骤7中下载的配置文件。
  10. 点击“发布”按钮,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 部署步骤
  1. 准备工作
  2. 创建Azure Static Web Apps资源
    • 打开Azure门户: https://portal.azure.com
    • 点击“创建资源”,搜索“Static Web Apps”并选择。
    • 在“创建静态Web应用”页面,进行以下配置:
      • 选择订阅和资源组。
      • 输入应用名称。
      • 选择GitHub作为部署源,并授权Azure访问你的GitHub账户。
      • 选择项目所在的组织、仓库和分支。
      • 构建预设选择“Blazor”。
      • 输入应用位置(通常为项目根目录)和API位置(如果有API)。
  3. 配置URL重写
    • 在项目根目录下创建一个 staticwebapp.config.json 文件,用于配置URL重写规则。
    • 示例配置如下:
{
    "navigationFallback": {
        "rewrite": "/index.html",
        "exclude": ["/static/**", "/favicon.ico"]
    }
}
- 此配置将所有请求重写为`index.html`,除了`/static`目录下的文件和`favicon.ico`。
  1. 提交更改并等待部署
    • 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开发的道路上取得更好的成绩!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值