上一次演示瞭如何使用Azure靜態web應用部署VUE前端項目（使用Azure靜態web應用全自動部署VUE站點）。咱們知道靜態web應用支持VUE，react，angular等項目的部署。除了支持這些常見前端框架，靜態web應用一樣支持微軟推出的最新的前端框架Blazor Webassembly。今天就來演示下如何經過靜態web應用部署Blazor項目。前端
新建blazor項目
使用VS新建一個blazor項目，由於是演示項目因此啥都不用改。react
項目名稱：
git
WebStaticAppp_Blazor，完成新建。github
新建github倉庫web
咱們把代碼存放在github上，因此須要新建一個空repository。倉庫名稱命名爲staticwebapp_balzor。api
回到上面建立的blazor項目，把代碼推送到github倉庫。推送成功後目錄結構以下：
瀏覽器
新建靜態web應用
在azure portal找到靜態web應用（預覽），點擊建立彈出建立資源界面：
前端框架
名稱：staticwebapp-blazor
區域：選個離你近的
SKU：免費
app
登陸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 。
關注個人公衆號一塊兒玩轉技術