經過 Serverless 加速 Blazor WebAssembly

時間 2020-03-19

標籤經過 serverless 加速 blazor webassembly 简体版

原文原文鏈接

本文爲 Serverless 社區成員撰稿。做者楊舜傑，系統架構研發工程師，開源愛好者，.NET 開源項目 shriek-fx 做者css

Blazor ❤ Serverless

我正在開發 Ant Design 的 Blazor 版本，預覽頁面部署在 Github Pages 上，可是加載速度很不理想，每每須要 1 分鐘多鍾才完成。html

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

當尋求解決方案時，瞭解到了 Serverless 能夠輕鬆地部署靜態網站到騰訊雲的對象存儲服務上，通過嘗試以後，體驗很是好！訪問速度就變成了 3 秒鐘，心想 Blazor 與 Serverless 結合後，是必定能成功的。node

Blazor WebAssembly 簡介

Blazor 是 .NET 實現的前端框架，它使一套代碼可分別支持服務端 WebSocket 雙向綁定或者是運行在 WebAssembly上。Blazor WebAssembly 可讓開發者使用跟熟悉的 Razor 模版一樣的開發模型，來開發基於 WebAssembly 的 SPA 應用。目前 Blazor WebAssembly 已是在 WebAssembly 領域中發展得最完善的 Web 框架。git

Serverless 簡介

Serverless 是開發者和企業用戶共同推進的,它可使開發者在構建和運行應用時無需管理服務器等基礎設施，將構建應用的成本進一步下降，函數是部署和運行的基本單位。github

開發者無需關心底層資源便可部署完整可用的 Serverless 應用架構。web

建立 Blazor WebAssembly 應用程序

前置準備

安裝.NET Core SDK 3.1.2 以上版本 下載地址npm

安裝模板

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 (Node.js 版本需不低於 8.6，建議使用最新版本)

安裝 serverless cli

npm install -g serverless

在 Windows 系統上，若是報錯，錯誤提示是由於在此係統上禁止運行腳本...，那麼請執行命令開啓 .ps1 腳本

set-ExecutionPolicy RemoteSigned

添加配置文件

如今，須要在上面咱們的發佈目錄 publish\BlazorServerless （跟 dist 目錄同級）中，建立 serverless.yml 文件，內容以下：

# 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

須要注意的是，若是咱們部署的是依賴路由系統的 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 --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.

(此處會出現二維碼)

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

這樣，最後出現綠色的 Done 字樣，就說明部署成功了！訪問給出的url，就能看到部署在騰訊雲對象存儲服務中的站點了！

訪問時加載速度很是快！