目录
1.简介
本文档为希望快速掌握Microsoft客户端 Blazor WebAssembly(WASM)技术的开发人员提供了概述。
1.1.目的
为开发人员提供在开发客户端Blazor(WASM)项目时快速上手的路线图。涵盖相关主题,例如在本地调试客户端和服务器代码、部署到本地IIS和远程Azure服务器、演示依赖项注入、共享C#类、CORS、日志记录、AD安全性、本地化、SignalR、实体框架和API(CRUD)调用。
1.2. 范围
本文档的范围是传达在新式软件环境中设计和部署客户端Blazor(WASM)应用程序所需的体系结构和技术。
2. 先决条件
- Visual Studio 2022(社区版)
- 最新的 .NET SDK(@撰写本文时– SDK 6)
- Postman(Win 64位)
- 免费 Azure帐户(远程调试)
3. 演示目标
对于此演示,我们将:
- 在Visual Studio中创建Http Trigger Azure Function项目
- 这将查询我们的(Azure)数据库并返回结果列表
- 本地调试
- 部署到Azure
- 针对Azure进行测试——Postman
- 针对Azure进行调试——Visual Studio
4. Azure函数说明
Azure函数是执行单个任务的单个终结点,因此它遵循SOLID主体中的“S”。Http触发器更适合B2B(来自其他应用程序的Web钩子)。完成任务后,它会将其结果传递给下一个Azure函数,直到该过程完成并将最终结果返回到调用方。
可以使用Azure函数设计微服务体系结构,方法是使用一组函数,每个函数执行单个任务,但共同执行一个过程。这使您能够仅纵向扩展部分微服务。
Azure函数基于触发器,这意味着必须在执行Azure函数之前发生事件(例如,数据库条目、API调用或插入到Azure Blob存储中的文件)。Visual Studio具有现成的默认Azure函数触发器,但它也有一个回退空触发器,你可以根据需要自定义该触发器。因此,可以说Azure函数遵循事件\可观察设计模式。
Azure函数遵循无服务器体系结构模式,但由于它们是API,因此它们将遵循REST体系结构样式。但由于它们是无服务器的,因此可以按需运行,而无需将其托管在服务器上和管理基础结构。如果你已有Azure计划,则它们是免费的。在示例Azure函数中,我将演示,我基本上使用的是微服务数据库每个服务模式,因为我的服务处理自己的数据库(偶然😊)。
5. 创建Azure函数项目
从Visual Studio中,创建一个新项目(File→New→Project):
从可用的项目模板中选择“Azure函数”,然后输入项目名称:
选择“Http触发器”应用程序模板,保留“存储帐户和授权级别”默认值:
这将创建默认的Azure函数项目(我将默认函数类重命名为LatestAlbums.cs):
只是关于身份验证级别的注释(在本地调试时,不需要API密钥)。此API密钥将附加到URL或其正文中:
功能 | 需要特定于函数的API密钥。 |
匿名 | 任何人都可以调用该函数 |
管理 | 您需要主密钥才能运行此功能 |
https://myhttptriggerfnx.azurewebsites.net/api/ FuncMusicStore?code=2h8UpMZhExR32wBFZIWLmI7mpM67mAlpPIZIx0CzKHmuAzFued3ZZg==
6. Azure函数代码说明
默认的HTTP动词是Get&Post(红框),您可以删除或替换它们以满足您的要求。如果是Get请求,则可以正常从URL获取数据(蓝色框),或者如果要在请求正文中post数据,则可以使用StreamReader(橙色框)检索数据。在粉红色的框中,我正在对SQL Server数据库进行dbContext调用并将数据返回到客户端(json格式)。
6.1. 其他项目
我更改了解决方案的结构,以包括多个项目、一个保存DBContext相关对象的项目和一个模型项目。这些项目已分离出来,以便可以在多个Azure函数之间共享代码。
6.2. 依赖注入DBContext
若要包含依赖项注入和实体框架,需要对默认代码进行一些定制。
将连接字符串添加到Azure函数项目中的 local.settings.json 文件。
将 Startup.cs 文件添加到项目中,在这里我们将添加依赖项,检索连接字符串并生成实体框架DBContext。
将dbContext注入到Azure函数的构造函数中(需要添加构造函数),并正常分配给private类属性。
7. 函数调用的结果
如果在本地(在Visual Studio中)运行项目,则会在“控制台”窗口中看到要用于环境的URL。
将标题参数附加到网址上:
http://localhost:7071/api/LatestAlbums?title=Disc%201
这将返回以下结果:
8. 部署到Azure
注意:需要拥有(免费)Azure 帐户(订阅)才能完成本部分。
右键单击Azure函数,选择“发布”,单击“Azure”,然后单击“下一步”:
选择适合你的订阅的Azure服务:
NB: 如果未显示Azure订阅详细信息,请检查是否已登录到Azure。
NB: 如果“函数应用”部分为空,则需要先创建Azure函数资源,然后刷新“函数应用”部分。
然后,您将看到Visual Studio中的“发布”屏幕,确保将调试作为配置设置,然后单击“发布”(这将部署我们稍后将用于调试的pdb文件)。
你将在“生成”窗口中看到部署的状态。
如果导航到Azure中的函数资源,应会看到新部署的Azure函数:
若要了解Azure函数的API密钥是什么(需要它来保护来自客户端的API调用)。单击该函数,几秒钟后,获取函数 URL将变为启用状态,单击该函数以获取调用该函数所需的完整URL。
https://func-version1-demo.azurewebsites.net/api/LatestAlbums?code=MLlNpmvdOodDkE6xZ5P9o6t6H1OA8onLMKYB0ZvggUfWAzFuVyJJaw==
9. 使用Postman在本地调试
在调试模式下运行Azure函数项目,将断点放在代码中。然后打开Postman并粘贴带有标题参数的本地主机URL,然后单击发送。
断点将正常命中:
返回数据的JSON列表:
还可以将标题参数放在URL的正文中,Azure函数将选取该参数。
10. 使用Postman针对Azure进行测试
11. 使用Postman针对Azure进行调试
返回到“发布”屏幕,单击托管eclipse,然后选择“附加调试器”,因为你已在“调试”模式下部署了解决方案。
这次在Postman中输入从Azure获得的URL和API代码,将参数放入正文中。
在Visual Studio代码中放置一个断点,然后单击“在Postman中发送”。
12. 在Azure中测试(包括生产环境)
你可以从Azure本身中冒烟测试(生产)Azure函数。导航到函数并选择“代码+测试”选项。然后在右侧,填写适当的详细信息并运行API——它将在单独的选项卡中显示结果。
https://www.codeproject.com/Articles/5345759/Debugging-Azure-Functions