上一次演示了如何使用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：免费
微信
登陆Github帐号
在源代码管理信息界面点击“使用Github登陆”，弹出Github受权页面，确认受权。
受权成功后就能够选择刚才建立的仓库。
储存库：staticwebapp_blazor。
分支：master。
生成预设；Blazor。
应用位置：WebStaticApp_Blazor。
API位置：默认。由于咱们没有部署api，因此默认不用管他。
应用项目位置：wwwroot。
最后点击查看建立。等待建立资源，过一会portal会提示资源建立成功。
app
查看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 。
关注个人公众号一块儿玩转技术
本文分享自微信公众号 - dotNET跨平台（opendotnet）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。