百胜招聘 网站开发,seo专员有前途吗,网页微信版网址,沧州网络上一次演示了如何使用Azure静态web应用部署VUE前端项目#xff08;使用Azure静态web应用全自动部署VUE站点#xff09;。我们知道静态web应用支持VUE#xff0c;react#xff0c;angular等项目的部署。除了支持这些常见前端框架#xff0c;静态web应用同样支持微软推出的最… 上一次演示了如何使用Azure静态web应用部署VUE前端项目使用Azure静态web应用全自动部署VUE站点。我们知道静态web应用支持VUEreactangular等项目的部署。除了支持这些常见前端框架静态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 /
h1Azure static web app with BLAZOR ./h1
推送成功后仓库的actions会立马执行新的CI/CD任务等到提示成功后再次访问一下上面的URL界面已经变化为我们修改的样式说明部署成功了。总结通过简单的演示我们熟悉了如何使用Azure静态web应用来部署blazor项目。流程上同部署VUE几乎一致就是预设模板那里需要选择blazor而已相当方便。当然了只有前端界面没有api服务是无法真正用来生产的下一次我们演示下如何使用Azure静态web应用集成并调用Azure Functions 。关注我的公众号一起玩转技术
