通过 Serverless 加速 Blazor WebAssembly | 社区精选文章
通过 Serverless 加速 Blazor WebAssembly | 社区精选文章
本文为 Serverless 社区成员撰稿。作者杨舜杰，系统架构研发工程师，开源爱好者，.NET开源项目shriek-fx作者。供稿请戳~
作为一种新型的开发架构，Serverless具备低人工、基础设施成本、低故障风险、高扩展性以及交付周期短等优势，但是在真正落地方面还面临成本费用过高、开发支持欠缺以及开源标准不统一等难题。腾讯云基于自身在计费模式、开发体验以及上下游生态等方面的超前探索，正在引领Serverless的行业“新标准”。
Blazor 与?Serverless 初遇
我正在开发 Ant Design 的 Blazor 版本，预览页面部署在 Github Pages 上，但是加载速度很不理想，往往需要 1 分钟多钟才完成。项目地址：
https://github.com/ElderJames/ant-design-blazor[1] 。
当寻求解决方案时，了解到了 Serverless 可以轻松地部署静态网站到腾讯云的对象存储服务上，经过尝试之后，体验非常好！访问速度就变成了 3 秒钟，于是开始尝试将 Blazor 与 Serverless 结合，将?Blazor WebAssembly 部署在腾讯云 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 以上版本，下载地址： https://dotnet.microsoft.com/download/dotnet-core
安装模版
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 BlazorServerlessdotnet run访问 https://localhost:5001 就能浏览了。
可以看到，加载时要加载 2.1MB 的文件，首次加载时对网速的压力还是很大的。如果部署在境外，例如 Github Pages，可能就需要等上好几分钟了。
所幸，我们可以用 Serverless 把它部署到国内服务器上，解决了加载问题。
发布项目
现在，我们需要发布这个项目，生成需要部署的文件。
dotnet publish -o publish这样，publish\BlazorServerless\dist 目录里的文件就是我们需要部署的文件了！
部署到腾讯云 Serverless 平台
前置准备
首先确保系统包含以下环境：
- Node.js[3] (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，就能看到部署在腾讯云对象存储服务中的站点了！
至此，?Blazor WebAssembly 迁移至 Serverless 就完成了，访问时加载速度非常快！
作者介绍
杨舜杰，系统架构研发工程师，开源爱好者，微软技术爱好者，.NET开源项目shriek-fx作者。
拥有多年互联网金融行业CQRS架构实践经验，热衷于学习和探讨企业应用架构设计和领域驱动设计。热爱开源项目贡献和技术社区分享。
最近在开发Ant Design的Blazor实现版本，ant-design-blazor，欢迎关注。
敲黑板：参与 Serverless 社区内容贡献，即可 100% 获得社区提供的精美礼品包，还有机会成为 Serverless 社区核心贡献者，参与社区的日常运营与管理！供稿请戳~
免费上云，就用 Serverless Framework
目前，Serverless Framework 服务暂时免费，且 Serverless Framework 服务用到云函数 SCF、API 网关、对象存储 COS 等产品，均提供免费额度。
具体免费详情可查阅：
/document/product/1154/38792
立即使用 Serverless，只需三步
Serverless Framework 是构建和运维 Serverless 应用的框架，简单三步，即可通过 Serverless Framework 快速实现服务部署。
1、创建本地应用
- 通过 npm 安装 Serverless
$?npm?install?-g?serverless- 基于 tencent_nodejs 模板创建 hello_world
$?serverless?create?--template?tencent-nodejs?--path?my-service2、安装相关依赖
- 执行 npm install 安装相关依赖
$?cd?my-service$?npm?install3. 部署
- 扫描微信二维码一键登录腾讯云账号，部署函数到云端
$?serverless?deploy- 触发云函数
$?serverless?invoke?-f?hello_world部署完成后，即可在命令行中看到部署情况，也可以在腾讯云控制台看到对应资源。
本文分享自 ServerlessCloudNative 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！