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
Install. NET Core SDK 3.1.2 and above Download address
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.
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1
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.
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
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
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:
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!
Recommended reading: Serverless architecture: from principle, design to project implementation