使用Azure靜態(tài)Web應(yīng)用部署B(yǎng)lazor Webassembly應(yīng)用

上一次演示了如何使用Azure靜態(tài)web應(yīng)用部署VUE前端項(xiàng)目（使用Azure靜態(tài)web應(yīng)用+Github全自動(dòng)部署VUE站點(diǎn)）。我們知道靜態(tài)web應(yīng)用支持VUE，react，angular等項(xiàng)目的部署。除了支持這些常見前端框架，靜態(tài)web應(yīng)用同樣支持微軟推出的最新的前端框架Blazor Webassembly。今天就來演示下如何通過靜態(tài)web應(yīng)用部署B(yǎng)lazor項(xiàng)目。

新建blazor項(xiàng)目

使用VS新建一個(gè)blazor項(xiàng)目，因?yàn)槭茄菔卷?xiàng)目所以啥都不用改。

項(xiàng)目名稱：WebStaticAppp_Blazor，完成新建。

新建github倉庫

我們把代碼存放在github上，所以需要新建一個(gè)空repository。倉庫名稱命名為staticwebapp_balzor。

回到上面創(chuàng)建的blazor項(xiàng)目，把代碼推送到github倉庫。推送成功后目錄結(jié)構(gòu)如下：

新建靜態(tài)web應(yīng)用

在azure portal找到靜態(tài)web應(yīng)用（預(yù)覽），點(diǎn)擊創(chuàng)建彈出創(chuàng)建資源界面：

名稱：staticwebapp-blazor區(qū)域：選個(gè)離你近的SKU：免費(fèi)

登錄Github賬號(hào)

在源代碼管理信息界面點(diǎn)擊“使用Github登錄”，彈出Github授權(quán)頁面，確認(rèn)授權(quán)。

授權(quán)成功后就可以選擇剛才創(chuàng)建的倉庫。儲(chǔ)存庫：staticwebapp_blazor。分支：master。生成預(yù)設(shè)；Blazor。應(yīng)用位置：WebStaticApp_Blazor。API位置：默認(rèn)。因?yàn)槲覀儧]有部署api，所以默認(rèn)不用管他。應(yīng)用項(xiàng)目位置：wwwroot。最后點(diǎn)擊查看創(chuàng)建。等待創(chuàng)建資源，過一會(huì)portal會(huì)提示資源創(chuàng)建成功。

資源創(chuàng)建成功后，我們打開github上的項(xiàng)目，點(diǎn)擊Actions，可以看到Azure Static Web App CI/CD這個(gè)job正在運(yùn)行。等到這個(gè)job提示綠色對(duì)勾的時(shí)候就表示執(zhí)行成功了。

返回portal查看剛新建的靜態(tài)web應(yīng)用，點(diǎn)擊概述，查看URL。

把URL貼到瀏覽器里訪問一下，熟悉的Blazor默認(rèn)項(xiàng)目首頁顯示出來了。

我們把首頁修改一下：然后推送到倉庫。

 page"/"<h1>Azure static web app with BLAZOR.</h1>推送成功后，倉庫的actions會(huì)立馬執(zhí)行新的CI/CD任務(wù)，等到提示成功后，再次訪問一下上面的URL，界面已經(jīng)變化為我們修改的樣式，說明部署成功了。

總結(jié)

通過簡(jiǎn)單的演示，我們熟悉了如何使用Azure靜態(tài)web應(yīng)用來部署blazor項(xiàng)目。流程上同部署VUE幾乎一致，就是預(yù)設(shè)模板那里需要選擇blazor而已，相當(dāng)方便。當(dāng)然了只有前端界面沒有api服務(wù)是無法真正用來生產(chǎn)的，下一次我們演示下如何使用Azure靜態(tài)web應(yīng)用集成并調(diào)用Azure Functions。