這篇文章給大家介紹如何通過(guò)Serverless加速Blazor WebAssembly，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、莒南網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁(yè)面制作、成都商城網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為莒南等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

Blazor ? Serverless

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

項(xiàng)目地址：https://github.com/ElderJames/ant-design-blazor，求 Star。

當(dāng)尋求解決方案時(shí)，了解到了 Serverless 可以輕松地部署靜態(tài)網(wǎng)站到騰訊云的對(duì)象存儲(chǔ)服務(wù)上，經(jīng)過(guò)嘗試之后，體驗(yàn)非常好！訪問(wèn)速度就變成了 3 秒鐘，心想 Blazor 與 Serverless 結(jié)合后，是一定能成功的。

• Blazor WebAssembly 簡(jiǎn)介

Blazor 是 .NET 實(shí)現(xiàn)的前端框架，它使一套代碼可分別支持服務(wù)端 WebSocket 雙向綁定或者是運(yùn)行在 WebAssembly上。Blazor WebAssembly 可以讓開(kāi)發(fā)者使用跟熟悉的 Razor 模版同樣的開(kāi)發(fā)模型，來(lái)開(kāi)發(fā)基于 WebAssembly 的 SPA 應(yīng)用。目前 Blazor WebAssembly 已經(jīng)是在 WebAssembly 領(lǐng)域中發(fā)展得最完善的 Web 框架。

• Serverless 簡(jiǎn)介

Serverless 是開(kāi)發(fā)者和企業(yè)用戶共同推動(dòng)的,它可以使開(kāi)發(fā)者在構(gòu)建和運(yùn)行應(yīng)用時(shí)無(wú)需管理服務(wù)器等基礎(chǔ)設(shè)施，將構(gòu)建應(yīng)用的成本進(jìn)一步降低，函數(shù)是部署和運(yùn)行的基本單位。

開(kāi)發(fā)者無(wú)需關(guān)心底層資源即可部署完整可用的 Serverless 應(yīng)用架構(gòu)。

創(chuàng)建 Blazor WebAssembly 應(yīng)用程序

前置準(zhǔn)備

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

安裝模板

Blazor WebAssembly 目前還在 preview 階段，所以正式發(fā)布的.NET Core SDK 還沒(méi)有內(nèi)置模版，但是我們可以手動(dòng)安裝模版。

運(yùn)行命令

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

創(chuàng)建項(xiàng)目

運(yùn)行命令

dotnet new blazorwasm -o BlazorServerless

可以看到在 BlazorServerless 已經(jīng)創(chuàng)建好了 Web WebAssembly 應(yīng)用。我們進(jìn)入目錄，：

cd BlazorServerless
dotnet run

訪問(wèn) https://localhost:5001 就能瀏覽了。

可以看到，加載時(shí)要加載 2.1MB 的文件，首次加載時(shí)對(duì)網(wǎng)速的壓力還是很大的。如果部署在境外，例如 Github Pages，可能就需要等上好幾分鐘了。

所幸，我們可以用 Serverless 把它部署到國(guó)內(nèi)服務(wù)器上，解決了加載問(wèn)題。

發(fā)布項(xiàng)目

現(xiàn)在，我們需要發(fā)布這個(gè)項(xiàng)目，生成需要部署的文件。

dotnet publish -o publish

這樣，publish\BlazorServerless\dist 目錄里的文件就是我們需要部署的文件了！

部署到 Serverless 平臺(tái)

前置準(zhǔn)備

首先確保系統(tǒng)包含以下環(huán)境：

• Node.js(Node.js 版本需不低于 8.6，建議使用最新版本)

安裝 serverless cli

npm install -g serverless

在 Windows 系統(tǒng)上，如果報(bào)錯(cuò)，錯(cuò)誤提示是因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本...，那么請(qǐng)執(zhí)行命令開(kāi)啟 .ps1 腳本

set-ExecutionPolicy RemoteSigned

添加配置文件

現(xiàn)在，需要在上面我們的發(fā)布目錄 publish\BlazorServerless （跟 dist 目錄同級(jí)）中，創(chuàng)建 serverless.yml 文件，內(nèi)容如下：

# 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

需要注意的是，如果我們部署的是依賴路由系統(tǒng)的 SPA 站點(diǎn)，error 項(xiàng)也要指向 index.html，這樣在直接訪問(wèn)子路由時(shí)，還能回到index頁(yè)面加載路由。否則會(huì)有 404 錯(cuò)誤。

配置完成后，文件目錄如下：

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

部署并瀏覽

在上圖所示，即 serverless.yml 文件所在目錄下，通過(guò) serverless 命令進(jìn)行部署，添加 --debug 參數(shù)查看部署詳情：

serverless --debug

如果這個(gè)目錄是第一次授權(quán)，或者沒(méi)有創(chuàng)建環(huán)境變量文件設(shè)置授權(quán)信息，則會(huì)出現(xiàn)一個(gè)二維碼，不管有沒(méi)有注冊(cè)過(guò)騰訊云，都能通過(guò)微信掃碼授權(quán)開(kāi)通，非常方便。

以下是輸入以上命令后的控制臺(tái)的輸出：

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.

(此處會(huì)出現(xiàn)二維碼)

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

這樣，最后出現(xiàn)綠色的 Done 字樣，就說(shuō)明部署成功了！訪問(wèn)給出的url，就能看到部署在騰訊云對(duì)象存儲(chǔ)服務(wù)中的站點(diǎn)了！

訪問(wèn)時(shí)加載速度非常快！

關(guān)于如何通過(guò)Serverless加速Blazor WebAssembly就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

標(biāo)題名稱：如何通過(guò)Serverless加速BlazorWebAssembly
網(wǎng)站路徑：http://chinadenli.net/article16/gdjjdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、云服務(wù)器、Google、虛擬主機(jī)、定制開(kāi)發(fā)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)