Shulou(Shulou.com)05/31 Report--

This article introduces how to accelerate Blazor WebAssembly through Serverless. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Blazor ❤ Serverless

I am developing a Blazor version of Ant Design, and the preview page is deployed on Github Pages, but the loading speed is not ideal and often takes more than a minute to complete.

Project address: https://github.com/ElderJames/ant-design-blazor, ask Star.

When looking for a solution, I learned that Serverless can easily deploy static websites to Tencent Cloud's object storage service. After trying, the experience is very good! The access speed is changed to 3 seconds, thinking that after the combination of Blazor and Serverless, it will be a success.

Introduction to Blazor WebAssembly

Blazor is the front-end framework for .NET implementation, which enables a set of code to support server-side WebSocket two-way binding or running on WebAssembly, respectively. Blazor WebAssembly allows developers to use the same development model as familiar Razor templates to develop WebAssembly-based SPA applications. At present, Blazor WebAssembly is the most well-developed Web framework in the field of WebAssembly.

Introduction to Serverless

Serverless is jointly promoted by developers and enterprise users. It enables developers to build and run applications without managing the server and other infrastructure, further reducing the cost of building applications. Function is the basic unit of deployment and operation.

Developers can deploy a fully available Serverless application architecture without paying attention to the underlying resources.

Create pre-preparation for Blazor WebAssembly application

Install the download address of .NET Core SDK version 3.1.2 or above

Installation template

Blazor WebAssembly is still in the preview phase, so the official release of the .NET Core SDK does not have a built-in template, but we can install the template manually.

Run command

Dotnet new-I Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1 create a project

Run command

Dotnet new blazorwasm-o BlazorServerless

You can see that the Web WebAssembly application has been created in BlazorServerless. We enter the catalog and:

Cd BlazorServerlessdotnet run

Visit https://localhost:5001 and you can browse it.

As you can see, when you load the 2.1MB file, the pressure on the network speed is still great when it is loaded for the first time. If deployed overseas, such as Github Pages, it may take several minutes to wait.

Fortunately, we can use Serverless to deploy it to domestic servers, solving the loading problem.

Publish a project

Now we need to release the project and generate the files that need to be deployed.

Dotnet publish-o publish

So, the files in the publish\ BlazorServerless\ dist directory are the files we need to deploy!

Pre-preparation for deployment to Serverless platform

First, make sure that the system contains the following environments:

Node.js (Node.js version should be no less than 8.6, it is recommended to use the latest version)

Install serverless clinpm install-g serverless

On Windows systems, if an error is reported because scripts are disabled on this system, execute the command to start the .ps1 script.

Set-ExecutionPolicy RemoteSigned add profile

Now, we need to create the serverless.yml file in our release directory publish\ BlazorServerless (at the same level as the dist directory) above, as follows:

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

It is important to note that if we deploy a SPA site that depends on the routing system, the error entry also points to index.html, so that when accessing the child routes directly, we can also go back to the index page to load the routes. Otherwise there will be a 404 error.

After the configuration is complete, the file directory is as follows:

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

Deploy and browse

In the figure above, under the directory where the serverless.yml file resides, use the serverless command to deploy, and add the-- debug parameter to view the deployment details:

Serverless-debug

If this directory is authorized for the first time, or if you have not created an environment variable file to set the authorization information, a QR code will appear. Whether you have registered with Tencent Cloud or not, it can be activated through Wechat code scanning authorization, which is very convenient.

The following is the output of the console after entering the above command:

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. (the QR code will appear here) 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

In this way, the word green Done finally appears, which means that the deployment is successful! Visit the given url and you can see the sites deployed in Tencent Cloud COS service!

The loading speed is very fast when accessing!

On how to accelerate Blazor WebAssembly through Serverless to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.