个人网站制作与设计论文,建网站的流程及注意事项,网站 建设 深圳,知道域名怎么进入网站Blazor ❤ Serverless我正在开发 Ant Design 的 Blazor 版本#xff0c;预览页面部署在 Github Pages 上#xff0c;但是加载速度很不理想#xff0c;往往需要 1 分钟多钟才完成。项目地址#xff1a;https://github.com/ElderJames/ant-design-blazor[1] 求 Star。当寻求解… Blazor ❤ Serverless我正在开发 Ant Design 的 Blazor 版本预览页面部署在 Github Pages 上但是加载速度很不理想往往需要 1 分钟多钟才完成。项目地址https://github.com/ElderJames/ant-design-blazor[1] 求 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 以上版本 下载地址[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[3] (Node.js 版本需不低于 8.6建议使用最新版本)安装 serverless clinpm install -g serverless
在 Windows 系统上如果报错错误提示是因为在此系统上禁止运行脚本...那么请执行命令开启 .ps1 脚本set-ExecutionPolicy RemoteSigned
添加配置文件现在需要在上面我们的发布目录 publish\BlazorServerless 跟 dist 目录同级中创建 serverless.yml 文件内容如下# serverless.ymlblazor-wasm:component: serverless/tencent-websiteinputs:code:src: ./dist # Upload static filesindex: index.htmlerror: index.htmlregion: ap-guangzhoubucketName: 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 --debugDEBUG ─ Resolving the templates static variables.DEBUG ─ Collecting components from the template.DEBUG ─ Downloading any NPM components found in the template.DEBUG ─ Analyzing the templates components dependencies.DEBUG ─ Creating the templates components graph.DEBUG ─ Syncing template state.DEBUG ─ Executing the templates 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-guangzhouDEBUG ─ Uploading directory D:\code\net\blazor\BlazorServerless\publish\BlazorServerless\dist to bucket blazor-bucket-1256169759DEBUG ─ 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.comenv:116s » blazor-wasm » done这样最后出现绿色的 Done 字样就说明部署成功了访问给出的 url就能看到部署在腾讯云对象存储服务中的站点了访问时加载速度非常快参考资料[1]ant-design-blazor: https://github.com/ElderJames/ant-design-blazor[2]下载地址: https://dotnet.microsoft.com/download/dotnet-core[3]Node.js: https://nodejs.org/dist/v12.16.1/node-v12.16.1-x64.msi
