使用Azure静态Web应用部署Blazor Webassembly应用

编程之家收集整理的这篇文章主要介绍了使用Azure静态Web应用部署Blazor Webassembly应用编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

上一次演示了如何使用Azure静态web应用部署VUE前端项目(使用 Azure静态web应用+Github全自动部署VUE站点)。我们知道静态web应用支持VUE,react,angular等项目的部署。除了支持这些常见前端框架,静态web应用同样支持微软推出的最新的前端框架Blazor Webassembly。今天就来演示下如何通过静态web应用部署Blazor项目。

新建blazor项目

使用VS新建一个blazor项目,因为是演示项目所以啥都不用改。

B0sagU.png


项目名称:WebStaticAppp_Blazor,完成新建。

B0sU3T.png

新建github仓库

我们把代码存放在github上,所以需要新建一个空repository。仓库名称命名为staticwebapp_balzor。

B0sJNq.png


回到上面创建的blazor项目,把代码推送到github仓库。推送成功后目录结构如下:

B0sY40.png

新建静态web应用

在azure portal找到静态web应用(预览),点击创建弹出创建资源界面:

B0sNCV.png


名称:staticwebapp-blazor
区域:选个离你近的
SKU:免费

登录Github账号

在源代码管理信息界面点击“使用Github登录”,弹出Github授权页面,确认授权。

B0sluQ.png


授权成功后就可以选择刚才创建的仓库。
储存库:staticwebapp_blazor。
分支:master。
生成预设;Blazor。
应用位置:WebStaticApp_Blazor。
API位置:默认。因为我们没有部署api,所以默认不用管他。
应用项目位置:wwwroot。
最后点击查看创建。等待创建资源,过一会portal会提示资源创建成功。

B0sMjg.png


资源创建成功后,我们打开github上的项目,点击Actions,可以看到Azure Static Web App CI/CD这个job正在运行。等到这个job提示绿色对勾的时候就表示执行成功了。

@H_502_61@


返回portal查看刚新建的静态web应用,点击概述,查看URL。

B0vdDe.png


把URL贴到浏览器里访问一下,熟悉的Blazor默认项目首页显示出来了。

B0vcgf.png


我们把首页修改一下:然后推送到仓库。

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

推送成功后,仓库的actions会立马执行新的CI/CD任务,等到提示成功后,再次访问一下上面的URL,界面已经变化为我们修改的样式,说明部署成功了。

B0sGEn.png

总结

通过简单的演示,我们熟悉了如何使用Azure静态web应用来部署blazor项目。流程上同部署VUE几乎一致,就是预设模板那里需要选择blazor而已,相当方便。当然了只有前端界面没有api服务是无法真正用来生产的,下一次我们演示下如何使用Azure静态web应用集成并调用Azure Functions 。

关注我的公众号一起玩转技术

总结

以上是编程之家为你收集整理的使用Azure静态Web应用部署Blazor Webassembly应用全部内容,希望文章能够帮你解决使用Azure静态Web应用部署Blazor Webassembly应用所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

相关文章

猜你在找的Azure相关文章

这个错误发生在SPFX webpart需要请求Azure AD token的时候,全部错误信息如下: {&quot;error&quot;:&quot;invalid_grant&quot;,&quo
Azure是微软提供的一个云服务平台。是全球除了AWS外最大的云服务提供商。Azure是微软除了windows之外另外一个王牌,微软错过了移动端,还好抓住了云服务。这里的Azure是Azure国际不是
前几次我们演示了如何通过Azure静态web应用功能发布vue跟blazor的项目(使用 Azure静态web应用+Github全自动部署VUE站点、使用Azure静态Web应用部署Blazor We
什么是Azure Blob Stoage Azure Blob Stoage 是微软Azure的对象存储服务。国内的云一般叫OSS,是一种用来存储非结构化数据的服务,比如音频,视频,图片,文本等等。用
Azure Cosmos DB 是 Microsoft 提供的全球分布式多模型数据库服务。Cosmos DB是一种NoSql数据库,但是它兼容多种API。它支持SQL, MongoDB、Cassand
内容审查器 Azure 内容审查器也是一项认知服务。它支持对文本、图形、视频进行内容审核。可以过滤出某些不健康的内容,关键词。使你的网站内容符合当地的法律法规,提供更好的用户体验。 文本内容审核 其中
上一篇 Azure 内容审查器之文本审查我们已经介绍了如果使用Azure进行文字内容的审核。对于社区内容,上传的图片是否含有羞羞内容也是需要过虑的。但是最为一般开发者自己很难实现这种级别的智能识别。但
什么事Azure静态web应用 Azure 静态 Web 应用是一种服务,可从 GitHub 存储库自动构建完整的堆栈 Web 应用,并将其部署到 Azure,目前它还是预览版。 Azure 静态 W
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注