通过 Serverless 加速 Blazor WebAssembly

Blazor ❤ Serverless

我正在开发 Ant Design 的 Blazor 版本，预览页面部署在 Github Pages 上，但是加载速度很不理想，往往需要 1 分钟多钟才完成。

项目地址：https://github.com/ElderJames/ant-design-blazor，求 Star。

当寻求解决方案时，了解到了 Serverless 可以轻松地部署静态网站到腾讯云的对象存储服务上，经过尝试之后，体验非常好！访问速度就变成了 3 秒钟，心想 Blazor 与 Serverless 结合后，是一定能成功的。

Blazor WebAssembly 简介

Blazor 是 .NET 实现的前端框架，它使一套代码可分别支持服务端 WebSocket 双向绑定或者是运行在 WebAssembly上。Blazor WebAssembly 可以让开发者使用跟熟悉的 Razor 模版同样的开发模型，来开发基于 WebAssembly 的 SPA 应用。目前 Blazor WebAssembly 已经是在 WebAssembly 领域中发展得最完善的 Web 框架。

Serverless 简介

Serverless 是开发者和企业用户共同推动的,它可以使开发者在构建和运行应用时无需管理服务器等基础设施，将构建应用的成本进一步降低，函数是部署和运行的基本单位。

开发者无需关心底层资源即可部署完整可用的 Serverless 应用架构。

创建 Blazor WebAssembly 应用程序

前置准备

安装.NET Core SDK 3.1.2 以上版本 下载地址

安装模板

Blazor WebAssembly 目前还在 preview 阶段，所以正式发布的.NET Core SDK 还没有内置模版，但是我们可以手动安装模版。

运行命令

复制代码

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

创建项目

运行命令

复制代码

dotnet new blazorwasm -o BlazorServerless

可以看到在 BlazorServerless 已经创建好了 Web WebAssembly 应用。我们进入目录，：

复制代码

cd BlazorServerless
dotnet run

访问 https://localhost:5001 就能浏览了。

可以看到，加载时要加载 2.1MB 的文件，首次加载时对网速的压力还是很大的。如果部署在境外，例如 Github Pages，可能就需要等上好几分钟了。

所幸，我们可以用 Serverless 把它部署到国内服务器上，解决了加载问题。

发布项目

现在，我们需要发布这个项目，生成需要部署的文件。

复制代码

dotnet publish -o publish

这样，publish\BlazorServerless\dist 目录里的文件就是我们需要部署的文件了！

部署到腾讯云 Serverless 平台

前置准备

首先确保系统包含以下环境：

Node.js (Node.js 版本需不低于 8.6，建议使用最新版本)

安装 serverless cli

复制代码

npm install -g serverless

在 Windows 系统上，如果报错，错误提示是因为在此系统上禁止运行脚本...，那么请执行命令开启 .ps1 脚本

复制代码

set-ExecutionPolicy RemoteSigned

添加配置文件

现在，需要在上面我们的发布目录 publish\BlazorServerless （跟 dist 目录同级）中，创建 serverless.yml 文件，内容如下：

复制代码

# serverless.yml

blazor-wasm:
  component: "@serverless/tencent-website"
  inputs:
    code:
      src: ./dist # Upload static files
      index: index.html
      error: index.html
    region: ap-guangzhou
    bucketName: blazor-bucket

需要注意的是，如果我们部署的是依赖路由系统的 SPA 站点，error 项也要指向 index.html，这样在直接访问子路由时，还能回到index页面加载路由。否则会有 404 错误。

配置完成后，文件目录如下：

复制代码

/BlazorServerless
  ├── publish/BlazorServerless
  |    ├── dist
  |    |   ├── _framework
  |    |   ├── css
  |    |   ├── sample-data
  |    |   └── index.html
  |    └── serverless.yml
  └── README.md

部署并浏览

在上图所示，即 serverless.yml 文件所在目录下，通过 serverless 命令进行部署，添加 --debug 参数查看部署详情：

复制代码

serverless --debug

如果这个目录是第一次授权，或者没有创建环境变量文件设置授权信息，则会出现一个二维码，不管有没有注册过腾讯云，都能通过微信扫码授权开通，非常方便。

以下是输入以上命令后的控制台的输出：

复制代码

PS D:\code\net\blazor\BlazorServerless\publish\BlazorServerless> serverless --debug

  DEBUG ─ Resolving the template's static variables.
  DEBUG ─ Collecting components from the template.
  DEBUG ─ Downloading any NPM components found in the template.
  DEBUG ─ Analyzing the template's components dependencies.
  DEBUG ─ Creating the template's components graph.
  DEBUG ─ Syncing template state.
  DEBUG ─ Executing the template's components graph.

(此处会出现二维码)

Please scan QR code login from wechat.
Wait login...
Login successful for TencentCloud.
  DEBUG ─ Preparing website Tencent COS bucket blazor-bucket-1256169759.
  DEBUG ─ Bucket "blazor-bucket-1256169759" in the "ap-guangzhou" region already exist.
  DEBUG ─ Setting ACL for "blazor-bucket-1256169759" bucket in the "ap-guangzhou" region.
  DEBUG ─ Ensuring no CORS are set for "blazor-bucket-1256169759" bucket in the "ap-guangzhou" region.
  DEBUG ─ Ensuring no Tags are set for "blazor-bucket-1256169759" bucket in the "ap-guangzhou" region.
  DEBUG ─ Configuring bucket blazor-bucket-1256169759 for website hosting.
  DEBUG ─ Uploading website files from D:\code\net\blazor\BlazorServerless\publish\BlazorServerless\dist to bucket blazor-bucket-1256169759.
  DEBUG ─ Starting upload to bucket blazor-bucket-1256169759 in region ap-guangzhou
  DEBUG ─ Uploading directory D:\code\net\blazor\BlazorServerless\publish\BlazorServerless\dist to bucket blazor-bucket-1256169759
  DEBUG ─ Website deployed successfully to URL: http://blazor-bucket-1256169759.cos-website.ap-guangzhou.myqcloud.com.

  blazor-wasm:
    url: http://blazor-bucket-1256169759.cos-website.ap-guangzhou.myqcloud.com
    env:

  116s » blazor-wasm » done

这样，最后出现绿色的 Done 字样，就说明部署成功了！访问给出的url，就能看到部署在腾讯云对象存储服务中的站点了！

访问时加载速度非常快！

Serverless 极速部署，只需三步

Serverless Framework 是构建和运维 Serverless 应用的框架。简单三步，即可通过 Serverless Framework 快速实现服务部署。

1. 安装 Serverless

macOS/Linux 系统：推荐使用二进制安装

$ curl -o- -L https://slss.io/install | bash

Windows 系统：可通过 npm 安装

$ npm install -g serverless

2. 创建云上应用

在空文件夹下输入 serverless 命令

$ serverless

访问命令行中输出的链接，即可访问成功部署后的应用。

3. 查看部署信息

进入到部署成功的文件夹，运行如下命令，查看部署状态和资源信息：

$ sls info

传送门：

GitHub: github.com/serverless

官网：serverless.com

欢迎访问：Serverless 中文网，您可以在最佳实践里体验更多关于 Serverless 应用的开发！

通过 Serverless 加速 Blazor WebAssembly

Blazor ❤ Serverless

创建 Blazor WebAssembly 应用程序

前置准备

安装模板

创建项目

发布项目

部署到腾讯云 Serverless 平台

前置准备

安装 serverless cli

添加配置文件

部署并浏览

正在进行

推荐阅读

腾讯云 CKafka 联合云函数重磅上线 DataHub，让数据流转更简便

EventBridge 最佳实践场景三：基于 EventBridge 设计零售业务中台

EventBridge 最佳实践场景二：使用 EventBridge + SCF 实现服务器异常的自动回滚

EventBridge 最佳实践场景一：Oceanus 告警消息实时推送

腾讯云营销大促一站式解决方案，专注微信生态业务成功

Serverless 可观测性升级，云函数支持应用性能观测 APM

活动

万物皆可 Serverless！

Tencent Serverless Hours | 第 13 期

社区调查：Serverless 使用率大幅增长