Azure 静态 web 应用集成 Azure 函数 API
前几次我们演示了如果通过Azure静态web应用功能发布vue跟blazor的项目。但是一个真正的web应用,总是免不了需要后台api服务为前端提供数据或者处理数据的能力。同样前面我们也介绍了Azure函数服务,Azure函数的http trigger可以对http作出响应,可以完美的承当web api的角色。现在Azure静态web应用可以直接集成Azure函数,使得一次发布可以同时发布前端项目(vue、blazor)及后台api服务(azure函数)。
新建Azure函数
上次已经演示过如何发布Blazor项目,这里不在啰嗦,直接找到我们上次的BlazorWebassembly项目的解决方案,添加一个Azure函数。
Azure函数使用Http trigger。Http trigger可以对http请求作出响应,可以看成是一个webapi。
新建完成之后修改Function1.cs类的代码为:
public static class Function1
{
[FunctionName("sum")]
public static async Task<IActionResult> Run(
[HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)] HttpRequest req,
ILogger log)
{
log.LogInformation("C# HTTP trigger function processed a request.");
string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
dynamic data = JsonConvert.DeserializeObject(requestBody);
int a = data.a;
int b = data.b;
int c = a + b;
return new OkObjectResult(c);
}
}
代码比较简单,通过读取request的body获取提交的a、b两个值,然后相加之后返回结果。
修改Blazor项目
我们开始修改上次存Blazor Webassembly项目。在首页上放置3个文本框及一个按钮。点击按钮的时候把其中两个文本框的值通过http传递到Azure函数中去得到返回值显示在第三个文本框内。
@page "/"
@inject HttpClient Http
<h1>Azure static web app with functions</h1>
A:
<input @bind="a" />+
B:
<input @bind="b" />=
<input @bind="c" />
<button @onclick="sum">求和</button>
@code{
private int a;
private int b;
private string c;
private async Task sum()
{
var result = await Http.PostAsJsonAsync("/api/sum", new
{
A = a,
B = b
});
var sum = await result.Content.ReadAsStringAsync();
c = sum;
}
}
完成之后提交代码到github。想要了解Blazor的相关内容请阅读我的其他关于Blazor入门的文章。
配置静态web应用
打开azure portal,新建一个静态web应用资源,因为前面已经介绍过多次基本的新建过程,这里不在详细介绍。
基本配置跟上次发布Blazor Webassembly应用一样,关键的不同在于API位置需要修改为我们上面新建的Azure函数的项目名称。以便Azure能够找到这个目录。配置好之后点击开始创建。
运行项目
静态web应用资源创建完成后会在github项目上自动添加一个workflow。等待这个workflow显示绿色完成之后就可以正式访问我们的web应用了。
点击静态web应用资源的概述目录,找到url地址复制后在浏览器里打开:
随便输入几个值,点击求和可以看到得到正确的结果。:)
总结
前两次我们演示了通过Azure静态web应用功能发布vue跟Blazor wsam项目。但是他们都是纯静态页面。一般实现一个真正的web应用还需要api服务。Azure静态web应用通过直接对Azure函数的支持简化了项目开发发布流程。我们开发一些简单的项目的时候可以直接使用Azure函数做为api服务,提交代码等待几秒就可以运行了。本来可能需要前后端代码分别部署一次,现在只需要提交一下代码等待几秒就可以运行了。有了云计算程序员真的越来越傻瓜了,笑哭。
Azure 静态 web 应用集成 Azure 函数 API的更多相关文章
- 使用Azure静态Web应用部署Blazor Webassembly应用
上一次演示了如何使用Azure静态web应用部署VUE前端项目(使用 Azure静态web应用+Github全自动部署VUE站点).我们知道静态web应用支持VUE,react,angular等项目的 ...
- 使用 Azure静态web应用+Github全自动部署VUE站点
什么事Azure静态web应用 Azure 静态 Web 应用是一种服务,可从 GitHub 存储库自动构建完整的堆栈 Web 应用,并将其部署到 Azure,目前它还是预览版. Azure 静态 W ...
- 使用 Azure 静态 Web 应用服务免费部署 Hexo 博客
一.前言 最近在折腾 Hexo 博客,试了一下 Azure 的静态 Web 应用服务,发现特别适合静态文档类型的网站,而且具有免费额度,支持绑定域名.本文只是以 Hexo 作为示例,其他类型的框架也是 ...
- 尝鲜一试,Azure静态网站应用服务(Azure Static Web Apps) 免费预览,协同Github自动发布静态SPA
背景 最近在浏览微软的文档的时候发现,微软喜欢用Hugo这个文档框架,有些技术产品的文档页面就用Hugo来做的,同时搭配Github + Azure Static Web Apps Service这个 ...
- Azure Functions(二)集成 Azure Blob Storage 存储文件
一,引言 上一篇文章有介绍到什么是 SeverLess ,ServerLess 都有哪些特点,以及多云环境下 ServerLess 都有哪些解决方案.在这众多解决方案中就包括 Function App ...
- Azure Functions(三)集成 Azure Queue Storage 存储消息
一,引言 接着上一篇文章继续介绍 Azure Functions,今天我们将尝试绑定 Queue Storage,将消息存储到 Queue 中,并且学会适用于 Azure Functions 的 Az ...
- 【Azure 应用服务】NodeJS Express + MSAL 实现API应用Token认证(AAD OAuth2 idToken)的认证实验 -- passport.authenticate('oauth-bearer', {session: false})
问题描述 在前两篇博文中,对NodeJS Express应用 使用MSAL + AAD实现用户登录并获取用户信息,获取Authorization信息 ( ID Token, Access Token) ...
- Windows Azure Web Site (18) Azure Web App设置MIME
<Windows Azure Platform 系列文章目录> 在笔者之前的文章中,介绍了我们在使用Azure Web App,可以把静态资源保存到Azure Storage中: Wind ...
- Windows Azure Web Site (13) Azure Web Site备份
<Windows Azure Platform 系列文章目录> 我们在使用Windows Azure Web Site的时候,经常会遇到需要对Web Site进行备份的情况.在这里笔者简单 ...
随机推荐
- 多测师讲解RF自动化测试实现流程_高级讲师肖sir
1.环境搭建过程?整套环境需要哪些工具包,以及工具包的作用?因为我搭建的RF框架是基于Python的,所以肯定要先安装Python,python安装完之后,开始安装自动化测试框架rf3.0-在do ...
- vue打包之后在本地运行,express搭建服务器,nginx 本地服务器运行
一.使用http-server 1.安装http-server npm install -g http-server 2.通过命令进入到dist文件夹 3.运行http-server 以上在浏览器输入 ...
- day36 Pyhton 网络编程03
一.内容回顾 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. sock ...
- day22 Pyhton学习 re模块和正则表达式
正则表达式本身也和python没有什么关系,就是匹配字符串内容的一种规则. 官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个" ...
- 【转载】动态规划—各种 DP 优化
原博客地址 关于氵博客:其实主要是防止我找不到这篇文了
- centos8平台上php7.4的生产环境配置
一,php错误与日志的配置 1,创建php的日志保存目录: [root@yjweb ~]# mkdir -p /data/logs/phplogs [root@yjweb ~]# chmod 777 ...
- HTML 的属性
HTML 属性赋予元素意义和语境. 下面的全局属性可用于任何 HTML 元 属性 描述 accesskey 规定激活元素的快捷键. class 规定元素的一个或多个类名(引用样式表中的类). cont ...
- 1.1 Python 概述
1.1 Python 概述 1.1.1 了解Python Python 是由荷兰人 Guido Van Rossum 发明的一种面向对象的解释型高级编程语言.Python的设计哲学为 优雅.明确和简单 ...
- postgresql使用规范解读
表设计规范1.建议能使用小字节数类型,就不要用大字节数类型2.建议能用varchar(N).text就不用char(N):3.建议使用default NULL,而不用default '':4.建议使用 ...
- 闭包 - Js函数笔记
闭包 当函数被保存到外部时,将会生成闭包 闭包会导致原有作用域链不释放,造成内存泄漏 类似的代码就叫闭包 闭包的运行作用域 代码 a被执行,b被定义并保存出来 a结束,b被执行时,a的执行期上下文指向 ...