上一次演示了如何使用Azure靜態web應用部署VUE前端項目（使用Azure靜態web應用全自動部署VUE站點）。我們知道靜態web應用支持VUE，react，angular等項目的部署。除了支持這些常見前端框架，靜態web應用同樣支持微軟推出的最新的前端框架Blazor Webassembly。今天就來演示下如何通過靜態web應用部署Blazor項目。

新建blazor項目

使用VS新建一個blazor項目，因為是演示項目所以啥都不用改。

項目名稱：

WebStaticAppp_Blazor，完成新建。

新建github倉庫

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

回到上面創建的blazor項目，把代碼推送到github倉庫。推送成功后目錄結構如下：

新建靜態web應用

在azure portal找到靜態web應用（預覽），點擊創建彈出創建資源界面：

名稱：staticwebapp-blazor
區域：選個離你近的
SKU：免費

登錄Github賬號

在源代碼管理信息界面點擊“使用Github登錄”，彈出Github授權頁面，確認授權。

授權成功后就可以選擇剛才創建的倉庫。
儲存庫：staticwebapp_blazor。
分支：master。
生成預設；Blazor。
應用位置：WebStaticApp_Blazor。
API位置：默認。因為我們沒有部署api，所以默認不用管他。
應用項目位置：wwwroot。
最后點擊查看創建。等待創建資源，過一會portal會提示資源創建成功。

查看Acitons

資源創建成功后，我們打開github上的項目，點擊Actions，可以看到Azure Static Web App CI/CD這個job正在運行。等到這個job提示綠色對勾的時候就表示執行成功了。

返回portal查看剛新建的靜態web應用，點擊概述，查看URL。

把URL貼到瀏覽器里訪問一下，熟悉的Blazor默認項目首頁顯示出來了。

修改代碼重新推送

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

@page "/" <h1>Azure static web app with BLAZOR .</h1>

推送成功后，倉庫的actions會立馬執行新的CI/CD任務，等到提示成功后，再次訪問一下上面的URL，界面已經變化為我們修改的樣式，說明部署成功了。

總結

通過簡單的演示，我們熟悉了如何使用Azure靜態web應用來部署blazor項目。流程上同部署VUE幾乎一致，就是預設模板那里需要選擇blazor而已，相當方便。當然了只有前端界面沒有api服務是無法真正用來生產的，下一次我們演示下如何使用Azure靜態web應用集成并調用Azure Functions 。

關注我的公眾號一起玩轉技術???

總結

以上是生活随笔為你收集整理的使用Azure静态Web应用部署Blazor Webassembly应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。