Accelerate razor webassembly with Serverless

This article is for members of the Serverless community. Author Yang Shunjie, system architecture R & D Engineer, open source enthusiast, author of. NET open source project shriek FX

Blazor ❤ Serverless

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

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

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

  • Introduction to Blazor WebAssembly

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

  • About Serverless

Serverless is jointly promoted by developers and enterprise users. It enables developers to build and run applications without managing infrastructure such as servers, further reducing the cost of building applications. Functions are the basic unit of deployment and operation.

Developers do not need to care about the underlying resources to deploy a complete and available Serverless application architecture.

Creating a razor webassembly application

Pre preparation

Install. NET Core SDK 3.1.2 and above Download address

Installation template

The Blazor WebAssembly is still in the preview stage, so there is no built-in template for the officially released. NET Core SDK, but we can install the template manually.

Run command

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

Create project

Run command

dotnet new blazorwasm -o BlazorServerless

You can see that the web web assembly application has been created in BlazorServerless. We enter the catalog:

cd BlazorServerless
dotnet run

Visit https://localhost:5001 to browse.

It can be seen that when loading, you need to load 2.1MB files. When loading for the first time, the pressure on the network speed is still great. If deployed overseas, such as Github Pages, it may take several minutes.

Fortunately, we can use Serverless to deploy it to the domestic server to solve the loading problem.

Project release

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

dotnet publish -o publish

In this way, the files in the publish\BlazorServerless\dist directory are the files we need to deploy!

Deploy to Tencent cloud Serverless platform

Pre preparation

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

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

Install serverless cli

npm install -g serverless

On Windows system, if an error is reported, the error prompt is because the script is forbidden to run on this system..., execute the command to start. ps1 script

set-ExecutionPolicy RemoteSigned

Add profile

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

# 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

It should be noted that if we deploy a SPA site that depends on the routing system, the error item should also point to index.html, so that when we directly access the sub route, we can return to the index page to load the route. Otherwise, there will be 404 errors.

After configuration, 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 directory of serverless.yml as shown in the figure above, deploy through serverless command, add -- debug parameter to view the deployment details:

serverless --debug

If this directory is authorized for the first time, or if the environment variable file is not created to set the authorization information, a QR code will appear. No matter whether Tencent cloud is registered or not, it can be opened 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.

(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 "Done" in green at the end indicates that the deployment is successful! Visit the given url, you can see the site deployed in Tencent cloud object storage service!

Loading speed is very fast when accessing!

Portal:

Welcome to: Serverless Chinese network , you can Best practices Experience more about Serverless application development!

Recommended reading: Serverless architecture: from principle, design to project implementation

Tags: github SDK network npm

Posted on Wed, 18 Mar 2020 07:04:27 -0400 by Magicmarkuk