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

上一次演示了如何使用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 。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/307085.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql无法创建新用户_如何mysql禁止创建新用户

展开全部使用户不具有e69da5e6ba9062616964757a686964616f31333337376264Create User权限或者deny Create User权限下面是权限列表mysql> show privileges \G*************************** 1. row ***************************Privilege: AlterContext: TablesComment: To al…

TIOBE 11 月榜单:Python 挤掉 Java,Java的下跌趋势确立了?

喜欢就关注我们吧&#xff01;TIOBE 公布了 2020 年 11 月的编程语言排行榜。Python 已成功跃居榜单第二名&#xff0c;本月排名率为 12.12%&#xff1b;Java 被挤到第三位&#xff0c;排名率降至 11.68%。自有 TIOBE 榜单以来&#xff0c;C 和 Java 之前一直占据着前两名的位置…

mysql mysqladmin 介绍_Mysql—mysqladmin 命令详解

mysqladmin是一个执行管理操作的客户端程序。它可以用来检查服务器的配置和当前状态、创建和删除数据库等。mysqladmin工具的使用格式&#xff1a;mysqladmin [option] command [command option] command ......1.查看mysql的安装目录&#xff0c;进入mysql命令行输入&#xff…

一路踩坑,被迫聊聊 C# 代码调试技巧和远程调试

一&#xff1a;背景 1. 讲故事每次项目预交付的时候&#xff0c;总会遇到各种奇葩的坑&#xff0c;我觉得有必要梳理一下以及如何快速解决的&#xff0c;让后来人避避坑&#xff0c;这篇就聊聊自己的所闻所遇&#xff1a;我去&#xff0c;本地环境代码跑的哧溜&#xff0c;上了…

mysql decimal型转化为float_5分钟搞懂MySQL数据类型之数值型DECIMAL类型

速成指南5分钟搞懂MySQL数据类型之数值型--DECIMAL类型DECIMAL类型的语法&#xff1a;DECIMAL[(M[,D])] [UNSIGNED] [ZEROFILL]。其中M指定的是数字的总位数(精度&#xff0c;最大65&#xff0c;默认值10)&#xff0c;D指定的是小数点后数字的位数(最大30&#xff0c;并且不能大…

mysql 变量 数据类型_浅谈mysql(二)数据类型

//我。。。我才是不是傲娇呢//如有问题还请多多指教。上回我们说到我们如何使用MySQL&#xff0c;关键是要看它的用途。用途衍生语句。之后文章的思路&#xff0c;也是如此&#xff0c;从用途出发&#xff0c;然后再到语句。那么&#xff0c;我们先问几个问题&#xff0c;我们用…

Java面试必问JVM调优,那.NET5呢?

JVM调优已经是普通Java工程师的必修课了&#xff0c;而.NET开源快5年了&#xff0c;CLR层面的优化到目前都不多见&#xff0c;甚至常用的性能调优工具都还没玩过。.NET5马上来了&#xff0c;要想在互联网大潮中逆袭&#xff0c;光靠平台是不够的&#xff0c;开发者也得给力才行…

win10新建管理员账户_【经验篇001】Win10专业版如何开启超级管理员账户

关注我们前言介绍我们在使用Win10系统的时候&#xff0c;有时候安装一些特殊的专业类软件&#xff0c;需要系统赋予软件特殊的权限&#xff0c;那就需要使用超级管理员帐户&#xff0c;Win10系统安装时候&#xff0c;Administrator账户默认是禁用的&#xff0c;所以我们就需要开…

SQL Server in Docker - 还原数据库

SQL Server in Docker 还原数据库上一回演示了如果在Docker环境下安装SQL Server(使用Docker运行SQL Server)&#xff0c;这次我们来演示下如何还原一个数据库备份文件到数据库实例上。使用winscp上传bak文件到linux服务器上一回我们启动docker容器的时候使用了-v参数挂账了本地…

Xamarin 从零开始部署 iOS 上的 Walterlv.CloudKeyboard 应用

本文将告诉大家如何从零开始在 iOS 上部署 Walterlv.CloudKeyboard 应用。这个 Walterlv.CloudKeyboard 应用是一个云输入法应用&#xff0c;在 GitHub 完全开源&#xff0c;采用 Xamarin 开发&#xff0c;用途是让手机接收电脑端的打字输入的输入法。因为我没有在 iOS 上找到任…

c 命令导出数据到mysql_MySQL命令行导出数据库

MySQL命令行导出数据库&#xff1a;1&#xff0c;进入MySQL目录下的bin文件夹&#xff1a;cd MySQL中到bin文件夹的目录如我输入的命令行&#xff1a;cd C:\Program Files\MySQL\MySQL Server 4.1\bin(或者直接将windows的环境变量path中添加该目录)2&#xff0c;导出数据库&am…

mysql权限create细化_mysql权限精细化分配-阿里云开发者社区

mysql中可以给你一个用户授予如select,insert,update,delete等其中的一个或者多个权限,主要使用grant命令,用法格式为&#xff1a;grant 权限 on 数据库对象 to 用户一、grant 普通数据用户&#xff0c;查询、插入、更新、删除 数据库中所有表数据的权利grant select on testdb…

Win10 Terminal + WSL 2 安装配置指南,精致开发体验

自从 Windows Terminal 正式发布后就再没有用过 Windows 系统自带的终端了。主要是 Terminal 简洁且灵活&#xff0c;更重要的是支持特殊字体&#xff0c;通过一些简单的配置可以使得终端看起来更舒适养眼。自从 Win 10 有了 Linux 子系统&#xff08;WSL&#xff09;&#xff…

mysql数据转储方法_Mysql数据库各种导出导入数据方式的区别(我的理解错误还望指正)...

mysqldump,NAVICAT转储&#xff0c;select * outfile在千级数据&#xff0c;万级&#xff0c;百万级数据下的表现。千级数据mysqldump导出sql文件导出是出了拒绝访问的错误&#xff1b;为对应目录(.sql文件要保存的目录)的对应用户添加(正在使用的用户)添加写入权限即可。mysql…

JetBrains 开发者调查 - 编程语言趋势

几个月前在公众号里发布了 StackOverflow 2020 开发者调查结果&#xff0c;其结果对 .NET Core 很友好。今天我们看看 JetBrains 2017-2020 四年的开发者调查结果统计&#xff0c;JetBrains 是偏 Java 系的&#xff0c;尤其是本家的 Kotlin 语言。 我们看一下在编程语言方面的趋…

mycli mysql_MyCLI :易于使用的 MySQL/MariaDB 客户端

导读MyCLI 是一个易于使用的命令行客户端&#xff0c;可用于受欢迎的数据库管理系统 MySQL、MariaDB 和 Percona&#xff0c;支持自动补全和语法高亮。它是使用 prompt_toolkit库写的&#xff0c;需要 Python 2.7、3.3、3.4、3.5 和 3.6 的支持。MyCLI 还支持通过 SSL 安全连接…

asp.net core 5.0的一些模块

.net 5就要发布了&#xff0c;把asp.net core 3.1的一些模块改成了5.0来适配&#xff0c;基本都是体力活&#xff0c;没有太大改动。ORMdapper一个轻量级的ORM&#xff0c;重点实现SQL语句实体映射&#xff0c;用sql不失灵活高效&#xff0c;映射用实体不失简便快捷&#xff0c…

mysql报4934_mysql-Mariadb语法错误1064(42000)

因此,当我尝试在MariaDB中运行此脚本时收到以下错误&#xff1a;“ ERROR 1064(42000)&#xff1a;您的SQL语法有错误&#xff1b;请查看与您的MariaDB服务器版本相对应的手册以获取正确的语法在附近使用CREATE TABLE customers (customer_id int NOT NULL,customer_f在第1行奇…

究竟是什么可以比反射还快实现动态调用?

戏精分享 C#表达式树&#xff0c;第一季正式完稿 前不久&#xff0c;我们发布了《只要十步&#xff0c;你就可以应用表达式树来优化动态调用》。观众们普遍反映文章的内容太多复杂不太容易理解。因此&#xff0c;我们以此为契机发布了《戏精分享 C#表达式树》系列视频。现在&am…

mysql查询语句不返回_PHP-CI MySQL查询联接表,并且where语句不返回所...

我有3个表要联接,但是当我在第三个表上使用where语句,而第三个表没有它时,即使我使用的是left,它也不会返回第一和第二个表中的行加入.Table 1---------------------------------| acc_PID | acc_name | acc_type |---------------------------------| 1 | Account 1 | 1 || 2 …