通過 Serverless 加速 Blazor WebAssembly

本文為 Serverless 社區成員撰稿，作者楊舜杰，系統架構研發工程師，開源愛好者，.NET 開源專案 shriek-fx 作者

Blazor ? Serverless

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

專案地址：https://github.com/ElderJames/ant-design-blazor，求 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 以上版本 下載地址

安裝模板

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，就能看到部署在騰訊云物件存盤服務中的站點了！

訪問時加載速度非常快！

傳送門：

• GitHub: github.com/serverless
• 官網：serverless.com

歡迎訪問：Serverless 中文網，您可以在 最佳實踐 里體驗更多關于 Serverless 應用的開發！

推薦閱讀：《Serverless 架構：從原理、設計到專案實戰》

標籤：其他

上一篇：實操教程丨使用Pod安全策略強化K8S安全

下一篇：Prometheus（一）原理