{"componentChunkName":"component---src-templates-blog-detail-tsx","path":"/blog/2020-03-11-blazor-webAssembly","result":{"data":{"currentBlog":{"id":"a6f28826-bc2f-552b-80ef-d961efacd2b0","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020318/1584508672111-Blazor.jpg","authors":["Elder James"],"categories":["user-stories"],"date":"2020-03-11T00:00:00.000Z","title":"通过 Serverless 加速 Blazor WebAssembly","description":"本文为 Serverless 社区成员撰稿。作者杨舜杰，系统架构研发工程师，开源爱好者，.NET开源项目 shriek-fx 作者","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Serverless","Blazor"],"keywords":"Serverless Blazor,Blazor WebAssembly,Serverless加速","outdated":true},"wordCount":{"words":215,"sentences":50,"paragraphs":49},"fileAbsolutePath":"/opt/build/repo/content/blog/2020-03-11-blazor-webAssembly.md","fields":{"slug":"/blog/2020-03-11-blazor-webAssembly/","keywords":["nodejs","serverless","website","blazor","bucket","serverless","BlazorServerless","Serverless","Blazor"]},"html":"

Blazor ❤ Serverless

\n

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

\n

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

\n

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

\n\n

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

\n\n

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

\n

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

\n

创建 Blazor WebAssembly 应用程序

\n

前置准备

\n

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

\n

安装模板

\n

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

\n

运行命令

\n\n \n 复制代码\n \n \n
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1
\n

创建项目

\n

运行命令

\n\n \n 复制代码\n \n \n
dotnet new blazorwasm -o BlazorServerless
\n

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

\n\n \n 复制代码\n \n \n
cd BlazorServerless\ndotnet run
\n

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

\n

\"img\"

\n

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

\n

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

\n

发布项目

\n

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

\n\n \n 复制代码\n \n \n
dotnet publish -o publish
\n

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

\n

\"img\"

\n

部署到腾讯云 Serverless 平台

\n

前置准备

\n

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

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

安装 serverless cli

\n\n \n 复制代码\n \n \n
npm install -g serverless
\n

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

\n\n \n 复制代码\n \n \n
set-ExecutionPolicy RemoteSigned
\n

添加配置文件

\n

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

\n\n \n 复制代码\n \n \n
# serverless.yml\n\nblazor-wasm:\n  component: "@serverless/tencent-website"\n  inputs:\n    code:\n      src: ./dist # Upload static files\n      index: index.html\n      error: index.html\n    region: ap-guangzhou\n    bucketName: blazor-bucket
\n

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

\n

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

\n\n \n 复制代码\n \n \n
/BlazorServerless\n  ├── publish/BlazorServerless\n  |    ├── dist\n  |    |   ├── _framework\n  |    |   ├── css\n  |    |   ├── sample-data\n  |    |   └── index.html\n  |    └── serverless.yml\n  └── README.md
\n

\"img\"

\n

部署并浏览

\n

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

\n\n \n 复制代码\n \n \n
serverless --debug
\n

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

\n

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

\n serverless --debug\n\n DEBUG ─ Resolving the template's static variables.\n DEBUG ─ Collecting components from the template.\n DEBUG ─ Downloading any NPM components found in the template.\n DEBUG ─ Analyzing the template's components dependencies.\n DEBUG ─ Creating the template's components graph.\n DEBUG ─ Syncing template state.\n DEBUG ─ Executing the template's components graph.\n\n(此处会出现二维码)\n\nPlease scan QR code login from wechat.\nWait login...\nLogin successful for TencentCloud.\n DEBUG ─ Preparing website Tencent COS bucket blazor-bucket-1256169759.\n DEBUG ─ Bucket "blazor-bucket-1256169759" in the "ap-guangzhou" region already exist.\n DEBUG ─ Setting ACL for "blazor-bucket-1256169759" bucket in the "ap-guangzhou" region.\n DEBUG ─ Ensuring no CORS are set for "blazor-bucket-1256169759" bucket in the "ap-guangzhou" region.\n DEBUG ─ Ensuring no Tags are set for "blazor-bucket-1256169759" bucket in the "ap-guangzhou" region.\n DEBUG ─ Configuring bucket blazor-bucket-1256169759 for website hosting.\n DEBUG ─ Uploading website files from D:\\code\\net\\blazor\\BlazorServerless\\publish\\BlazorServerless\\dist to bucket blazor-bucket-1256169759.\n DEBUG ─ Starting upload to bucket blazor-bucket-1256169759 in region ap-guangzhou\n DEBUG ─ Uploading directory D:\\code\\net\\blazor\\BlazorServerless\\publish\\BlazorServerless\\dist to bucket blazor-bucket-1256169759\n DEBUG ─ Website deployed successfully to URL: http://blazor-bucket-1256169759.cos-website.ap-guangzhou.myqcloud.com.\n\n blazor-wasm:\n url: http://blazor-bucket-1256169759.cos-website.ap-guangzhou.myqcloud.com\n env:\n\n 116s » blazor-wasm » done`, `44825006779107320000`)\"\n >\n \n 复制代码\n \n \n
PS D:\\code\\net\\blazor\\BlazorServerless\\publish\\BlazorServerless> serverless --debug\n\n  DEBUG ─ Resolving the template's static variables.\n  DEBUG ─ Collecting components from the template.\n  DEBUG ─ Downloading any NPM components found in the template.\n  DEBUG ─ Analyzing the template's components dependencies.\n  DEBUG ─ Creating the template's components graph.\n  DEBUG ─ Syncing template state.\n  DEBUG ─ Executing the template's components graph.\n\n(此处会出现二维码)\n\nPlease scan QR code login from wechat.\nWait login...\nLogin successful for TencentCloud.\n  DEBUG ─ Preparing website Tencent COS bucket blazor-bucket-1256169759.\n  DEBUG ─ Bucket "blazor-bucket-1256169759" in the "ap-guangzhou" region already exist.\n  DEBUG ─ Setting ACL for "blazor-bucket-1256169759" bucket in the "ap-guangzhou" region.\n  DEBUG ─ Ensuring no CORS are set for "blazor-bucket-1256169759" bucket in the "ap-guangzhou" region.\n  DEBUG ─ Ensuring no Tags are set for "blazor-bucket-1256169759" bucket in the "ap-guangzhou" region.\n  DEBUG ─ Configuring bucket blazor-bucket-1256169759 for website hosting.\n  DEBUG ─ Uploading website files from D:\\code\\net\\blazor\\BlazorServerless\\publish\\BlazorServerless\\dist to bucket blazor-bucket-1256169759.\n  DEBUG ─ Starting upload to bucket blazor-bucket-1256169759 in region ap-guangzhou\n  DEBUG ─ Uploading directory D:\\code\\net\\blazor\\BlazorServerless\\publish\\BlazorServerless\\dist to bucket blazor-bucket-1256169759\n  DEBUG ─ Website deployed successfully to URL: http://blazor-bucket-1256169759.cos-website.ap-guangzhou.myqcloud.com.\n\n  blazor-wasm:\n    url: http://blazor-bucket-1256169759.cos-website.ap-guangzhou.myqcloud.com\n    env:\n\n  116s » blazor-wasm » done
\n

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

\n

\"img\"

\n

访问时加载速度非常快！

\n
\n
\n
\n
\n

传送门：

\n\n
\n

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

","tableOfContents":""},"previousBlog":{"id":"55953085-8519-57ce-bf38-6f3a36d113c3","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020318/1584508229341-blogging.jpg","authors":["云洋"],"categories":["user-stories"],"date":"2020-03-12T00:00:00.000Z","title":"Serverless 动态博客开发趟「坑」记","description":"本文为 Serverless 社区成员撰稿。作者云洋，从事信息管理工作，多年电子政务信息系统建设管理经验，对 Serverless 技术和架构有浓厚兴趣。","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Serverless","动态博客"],"keywords":"Serverless 动态博客开发,Serverless 动态博客,Serverless 开发","outdated":true},"wordCount":{"words":391,"sentences":74,"paragraphs":74},"fileAbsolutePath":"/opt/build/repo/content/blog/2020-03-12-blog-issues.md","fields":{"slug":"/blog/2020-03-12-blog-issues/","keywords":["serverless","website","部署","serverlesscloud","报错"]}},"nextBlog":{"id":"eb3e239f-0ac6-5381-8a51-26142f95edfc","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020318/1584510373593-lab.jpg","authors":["高晨远"],"categories":["user-stories"],"date":"2020-03-09T00:00:00.000Z","title":"实验室站迁移 Serverless 之路（上）","description":"本文为 Serverless 社区成员撰稿。作者高晨远，研发工程师，熟悉 Python 开发，常写 Web 和爬虫","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Serverless","Python"],"keywords":"Serverless Flask 框架,Serverless 框架,Serverless 迁移方案","outdated":true},"wordCount":{"words":305,"sentences":63,"paragraphs":62},"fileAbsolutePath":"/opt/build/repo/content/blog/2020-03-09-community-chenyuan.md","fields":{"slug":"/blog/2020-03-09-community-chenyuan/","keywords":["go","nodejs","python","serverless","无服务器","无服务器架构","云函数","Serverless","serverless","template","components","requirements"]}},"recommendBlogs":{"edges":[{"node":{"id":"4300b21c-7209-5256-86ff-0d38e3daec9b","frontmatter":{"thumbnail":"https://main.qcloudimg.com/raw/14f1c8eed372e76c1b139703b2f6d0fa.jpg","authors":["KieranMcCarthy"],"categories":["user-stories","engineering-culture"],"date":"2018-01-09T00:00:00.000Z","title":"我是如何在四年时间里，从厨师转行为 Serverless 应用开发者","description":"我是厨师出身，现在成为了一名 Serverless 应用开发者。","authorslink":["https://serverless.com/author/kieranmccarthy/"],"translators":["Aceyclee"],"translatorslink":["https://www.zhihu.com/people/Aceyclee"],"tags":["应用开发","Serverless"],"keywords":"Serverless 应用开发,Serverless 管理,厨师转行为 Serverless 应用开发者","outdated":null},"wordCount":{"words":285,"sentences":38,"paragraphs":36},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-01-09-from-chef-to-serverless-developer-in-4-years.md","fields":{"slug":"/blog/2018-01-09-from-chef-to-serverless-developer-in-4-years/","keywords":["无服务器","无服务器开发","云函数","学习","Serverless","构建","Framework","开发者","服务器","应用","学位","简历"]}}},{"node":{"id":"713a0563-4bf9-5721-bacb-3b4ef609fe4a","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/camp-fire/camp-fire-housing-thumb.jpg","authors":["EricWyne"],"categories":["guides-and-tutorials","user-stories"],"date":"2018-12-05T00:00:00.000Z","title":"Serverless Twitter 机器人帮助为坎普山火受灾者安置住房","description":"加利福尼亚州的坎普山火致使数千人流离失所，为此，我构建了一个简单的 Serverless Twitter 机器人来帮助将受灾者安置在临时住房！","authorslink":["https://serverless.com/author/ericwyne/"],"translators":["Aceyclee"],"translatorslink":["zhihu.com/people/Aceyclee"],"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":157,"sentences":26,"paragraphs":26},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-12-05-serverless-twitter-camp-fire.md","fields":{"slug":"/blog/2018-12-05-serverless-twitter-camp-fire/","keywords":["serverless","无服务器","云函数","Serverless","org","住房","Twitter","函数","受灾","机器人","山火"]}}},{"node":{"id":"98602143-b837-5f50-a24f-3b1ec76044d7","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/sqquid/sqquid-serverless-thumb.jpg","authors":["RonPeled"],"categories":["user-stories"],"date":"2018-12-17T00:00:00.000Z","title":"SQQUID：100% 无服务器初创公司","description":"SQQUID 将 AWS Lambda 和无服务器框架用于其核心产品和营销网站。我们来看看一个完全无服务器的初创公司是怎样的。","authorslink":null,"translators":null,"translatorslink":null,"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":266,"sentences":42,"paragraphs":42},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-12-17-sqquid-one-hundred-percent-serverless.md","fields":{"slug":"/blog/2018-12-17-sqquid-one-hundred-percent-serverless/","keywords":["go","serverless","无服务器","无服务器架构","服务器","架构","Lambda","集成","FaaS","串行","系统"]}}},{"node":{"id":"29dc2e58-d2ba-56f9-aee1-d21b0bc62e0e","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/ao-com-story/ao-serverless-thumbnail.png","authors":["NickGottlieb"],"categories":["user-stories"],"date":"2019-04-24T00:00:00.000Z","title":"AO.com：逐渐转向无服务器优先","description":"AO.com 的 SCV 团队率先尝试无服务器服务。折服于无服务器框架的快速周转时间和低维护成本，整个团队逐渐转向无服务器优先。","authorslink":null,"translators":null,"translatorslink":null,"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":236,"sentences":42,"paragraphs":35},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-04-24-ao-serverless-first.md","fields":{"slug":"/blog/2019-04-24-ao-serverless-first/","keywords":["serverless","无服务器","服务器","团队","Lambda","功能","构建"]}}},{"node":{"id":"752d08d1-387a-5bde-acf3-98141baab294","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020414/1586871710979-%E5%85%AC%E5%85%B1%E7%94%A8.png","authors":["Anycodes"],"categories":["user-stories"],"date":"2019-06-20T00:00:00.000Z","title":"如何用 Serverless 为 Python 云函数打包依赖","description":"在使用无服务器云函数SCF时通常会遇到导入第三方库的问题，很多小伙伴比较头疼是：应该如何打包进去？这里，推荐几个不错的方法。","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["云函数","Serverless"],"keywords":"Serverless,Serverless应用,无服务器云函数","outdated":null},"wordCount":{"words":81,"sentences":43,"paragraphs":43},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-06-20-for-python-cloud-functions.md","fields":{"slug":"/blog/2019-06-20-for-python-cloud-functions/","keywords":["java","serverless","无服务器","无服务器云函数","云函数","serverlesscloud","安装","serverless","pillowtest"]}}},{"node":{"id":"2dc78814-9d77-555b-a1bb-ad202c8ec2d1","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/cloudforecast/thumbnail.png","authors":["FrancoisLagier"],"categories":["user-stories"],"date":"2019-08-07T00:00:00.000Z","title":"Serverless：初创企业的理想选择？（CloudForecast 案例分析）","description":"CloudForecast 是 2018 年成立的一家独立初创企业，本文将介绍他们决定选择 Serverless 的原因。","authorslink":["https://serverless.com/author/francoislagier/"],"translators":["Aceyclee"],"translatorslink":["zhihu.com/people/Aceyclee"],"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":211,"sentences":29,"paragraphs":29},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-08-07-serverless-for-startups.md","fields":{"slug":"/blog/2019-08-07-serverless-for-startups/","keywords":["serverless","云函数","serverless","函数","Serverless","utm","Framework","blog","CloudForecast","cloudforecast"]}}},{"node":{"id":"97450b07-658b-5207-8216-1c7b9b51b115","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020114/1578988490344-v2-8b2cd2c5275aa2c5a3c5083a148a7a9f_1200x500.jpg","authors":["Anycodes"],"categories":["user-stories"],"date":"2019-09-01T00:00:00.000Z","title":"如何通过 Serverless 与自然语言处理，让搜索引擎「看」到你的博客","description":"Serverless 与自然语言处理结合的一个小应用","authorslink":["https://www.zhihu.com/people/liuyu-43-97"],"translators":null,"translatorslink":null,"tags":["个人博客","serverless"],"keywords":"Serverless 自然语言处理","outdated":null},"wordCount":{"words":106,"sentences":34,"paragraphs":34},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-09-01-search-engine-blog.md","fields":{"slug":"/blog/2019-09-01-search-engine-blog/","keywords":["serverless","云函数","keywords","serverlesscloud","summary"]}}},{"node":{"id":"ae4fd2f8-515c-5aec-b584-38427ef33f7e","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020114/1578989800047-part-00492-780.jpg","authors":["Anycodes"],"categories":["guides-and-tutorials","user-stories"],"date":"2019-09-16T00:00:00.000Z","title":"突破传统 OJ 瓶颈，「判题姬」接入云函数","description":"通过 Serverless 实现在线编程","authorslink":["https://www.zhihu.com/people/liuyu-43-97"],"translators":null,"translatorslink":null,"tags":["在线编程","云函数"],"keywords":"Serverless 在线编程,Serverless OJ","outdated":null},"wordCount":{"words":169,"sentences":30,"paragraphs":30},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-09-16-online-Judge.md","fields":{"slug":"/blog/2019-09-16-online-Judge/","keywords":["python","serverless","云函数","代码","函数","serverless"]}}}],"totalCount":64}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"a6f28826-bc2f-552b-80ef-d961efacd2b0","previousBlogId":"55953085-8519-57ce-bf38-6f3a36d113c3","nextBlogId":"eb3e239f-0ac6-5381-8a51-26142f95edfc","categories":["user-stories"]}}}