azure服务器_如何使用Blazor WebAssembly实施Azure无服务器

azure服务器

介绍 (Introduction)

In this article, we will learn how to implement Azure serverless with Blazor web assembly. And to do that, we will create an app that lists out some Frequently Asked Questions (FAQ) on Covid-19.

在本文中，我们将学习如何使用Blazor Web程序集实现Azure无服务器。为此，我们将创建一个应用程序，其中列出了有关Covid-19的一些常见问题(FAQ)。

Here's what we will cover:

我们将介绍以下内容：

We will create an Azure Cosmos DB which will act as our primary database to store questions and answers. 我们将创建一个Azure Cosmos数据库，它将用作存储问题和答案的主要数据库。
We will use an Azure function app to fetch data from cosmos DB. 我们将使用Azure功能应用程序从cosmos DB获取数据。
We will deploy the function app to Azure to expose it globally via an API endpoint. 我们将功能应用程序部署到Azure，以通过API终结点全局公开它。
And lastly, we will consume the API in a Blazor web assembly app. 最后，我们将在Blazor Web程序中使用该API。

The FAQs will be displayed in a card layout with the help of Bootstrap.

常见问题解答将在Bootstrap的帮助下以卡片布局显示。

The Covid-19 FAQ app is deployed on Azure. See it in action at https://covid19-faq.azurewebsites.net/

Covid-19常见问题解答应用程序已部署在Azure上。在https://covid19-faq.azurewebsites.net/上查看实际运行情况

什么是无服务器架构？ (What is a serverless architecture?)

In traditional applications such as a 3-tier app, a client requests resources from the server, and the server processes the request and responds with the appropriate data.

在传统的应用程序(例如3层应用程序)中，客户端从服务器请求资源，然后服务器处理该请求并以适当的数据进行响应。

However, there are some issues with this architecture. We need a server running continuously. Even if there are no requests, the server is present 24X7, ready to process the request. Maintaining server availability is cost-intensive.

但是，此体系结构存在一些问题。我们需要一台连续运行的服务器。即使没有请求，服务器也会以24X7存在，可以处理该请求。维持服务器可用性非常耗费成本。

Another problem is scaling. If the traffic is huge, we need to scale out all the servers which can be a cumbersome process.

另一个问题是扩展。如果流量很大，我们需要扩展所有服务器，这可能是一个繁琐的过程。

An effective solution to this problem is serverless web architecture. The client makes a request to a file storage account instead of a server. The storage account returns the index.html page along with some code that needs to be rendered on the browser.

一种有效的解决方案是无服务器Web架构。客户端向文件存储帐户而不是服务器发出请求。存储帐户返回index.html页面以及一些需要在浏览器上呈现的代码。

Since there is no server to render the page, we are relying on the browser to render the page. All the logic to draw the element or update the element will run in the browser. We do not have any server on backend – we just have a storage account with a static asset.

由于没有服务器可以渲染页面，因此我们依靠浏览器来渲染页面。绘制元素或更新元素的所有逻辑将在浏览器中运行。我们在后端没有任何服务器-我们只有一个带有静态资产的存储帐户。

This is a cost-effective solution as we do not have any server, just some static files in a storage account. It is also very easy to scale out for heavy load websites.

这是一种经济高效的解决方案，因为我们没有任何服务器，而存储帐户中只有一些静态文件。对于繁重的网站，也很容易进行横向扩展。

什么是Azure功能？ (What is an Azure function?)

Making the browser run all the logic to render the page seems exciting, but it has some limitations.

使浏览器运行所有逻辑以呈现页面似乎很令人兴奋，但是它有一些限制。

We do not want the browser to make database calls. We need some part of our code to run on the server-side such as connecting to a database.

我们不希望浏览器进行数据库调用。我们需要代码的某些部分在服务器端运行，例如连接到数据库。

This is where Azure functions come in handy. In a serverless architecture, if we want some code to run the server-side, then we use an Azure function.

这是Azure功能派上用场的地方。在无服务器体系结构中，如果我们希望一些代码在服务器端运行，那么我们将使用Azure函数。

Azure functions are an event-driven serverless compute platform. You need to pay only when execution happens. They are also easy to scale. Hence, we get both the scaling and the cost benefits with Azure functions.

Azure功能是一个事件驱动的无服务器计算平台。您仅需在执行发生时付款。它们也易于扩展。因此，我们通过Azure功能获得了扩展和成本收益。

To learn more you can refer to the Azure function official docs.

若要了解更多信息，请参考Azure函数官方文档。

为什么要使用Azure无服务器？ (Why should you use Azure serverless?)

An Azure serverless solution can add value to your product by minimizing the time and resources you spend on infrastructure-related requirements.

Azure无服务器解决方案可以通过最大程度地减少花费在基础架构相关需求上的时间和资源来为您的产品增加价值。

You can increase developer productivity, optimize resources and accelerate the time to market with the help of a fully managed, end-to-end Azure serverless solution.

借助完全托管的端到端Azure无服务器解决方案，您可以提高开发人员的生产力，优化资源并加快产品上市时间。

To learn more, see the Azure serverless official doc.

若要了解更多信息，请参阅Azure无服务器官方文档。

什么是Blazor？ (What is Blazor?)

Blazor is a .NET web framework for creating client-side applications using C#/Razor and HTML.

Blazor是一个.NET Web框架，用于使用C＃/ Razor和HTML创建客户端应用程序。

Blazor runs in the browser with the help of WebAssembly. It can simplify the process of creating a single page application (SPA). It also provides a full-stack web development experience using .NET.

Blazor在WebAssembly的帮助下在浏览器中运行。它可以简化创建单页应用程序(SPA)的过程。它还使用.NET提供了完整的Web开发经验。

Using .NET for developing Client-side application has multiple advantages:

使用.NET开发客户端应用程序具有多个优点：

.NET offers a range of API and tools across all platforms that are stable and easy to use..NET在所有平台上提供了稳定且易于使用的一系列API和工具。
The modern languages such as C# and F# offer a lot of features that make programming easier and interesting for developers.诸如C＃和F＃之类的现代语言提供了许多使开发人员更容易且有趣的功能。
The availability of one of the best IDE in the form of Visual Studio provides a great .NET development experience across multiple platforms such as Windows, Linux, and macOS.Visual Studio形式中最好的IDE之一的可用性提供了跨多个平台(例如Windows，Linux和macOS)的出色的.NET开发经验。
.NET provides features such as speed, performance, security, scalability, and reliability in web development that makes full-stack development easier..NET在Web开发中提供了速度，性能，安全性，可伸缩性和可靠性等功能，这些功能使全栈开发变得更加容易。

为什么要使用Blazor？ (Why should you use Blazor?)

Blazor supports a wide array of features to make web development easier for us. Some of the prominent features of Blazor are:

Blazor支持多种功能，使我们的Web开发更加轻松。 Blazor的一些突出特点是：

Component-based architecture: Blazor provides us with a component-based architecture to create rich and composable UI.

基于组件的体系结构 ：Blazor为我们提供了基于组件的体系结构，以创建丰富且可组合的UI。
Dependency injection: This allows us to use services by injecting them into components.

依赖注入 ：这使我们可以通过将服务注入组件来使用服务。
Layouts: We can share common UI elements (for example, menus) across pages using the layouts feature.

布局：我们可以使用布局功能在页面之间共享常见的UI元素(例如，菜单)。
Routing: We can redirect the client request from one component to another with the help of routing.

路由：我们可以借助路由将客户端请求从一个组件重定向到另一个组件。
JavaScript interop: This allows us to invoke a C# method from JavaScript, and we can call a JavaScript function or API from C# code.

JavaScript互操作 ：这允许我们从JavaScript调用C＃方法，并且可以从C＃代码调用JavaScript函数或API。
Globalization and localization: The application can be made accessible to users in multiple cultures and languages

全球化和本地化 ：可以使用户以多种文化和语言访问该应用程序
Live reloading: Live reloading of the app in the browser during development.

实时重载 ：开发过程中在浏览器中实时重载应用程序。
Deployment: We can deploy the Blazor application on IIS and Azure Cloud.

部署：我们可以将Blazor应用程序部署在IIS和Azure云上。

To learn more about Blazor, please refer to the official Blazor docs.

要了解有关Blazor的更多信息，请参考Blazor官方文档。

先决条件 (Prerequisites)

To get started with the application, we need to fulfill these prerequisites:

要开始使用该应用程序，我们需要满足以下先决条件：

An Azure subscription account. You can create a free Azure account at https://azure.microsoft.com/en-in/free/

Azure订阅帐户。您可以在https://azure.microsoft.com/en-in/free/创建一个免费的Azure帐户
Install the latest version of Visual Studio 2019 from https://visualstudio.microsoft.com/downloads/

从https://visualstudio.microsoft.com/downloads/安装最新版本的Visual Studio 2019

While installing the VS 2019, please make sure you select the Azure development and ASP.NET and web development workload.

在安装VS 2019时，请确保选择Azure开发以及ASP.NET和Web开发工作负载。

源代码 (Source Code)

You can get the source code from GitHub here.

您可以在此处从GitHub获取源代码。

创建Azure Cosmos数据库帐户 (Create Azure Cosmos DB account)

Log in to the Azure portal and search for the “Azure Cosmos DB” in the search bar and click on the result. On the next screen, click on the Add button.

登录到Azure门户，然后在搜索栏中搜索“ Azure Cosmos DB”，然后单击结果。在下一个屏幕上，单击添加按钮。

This will open a “Create Azure Cosmos DB Account” page. You need to fill in the required information to create your database. Refer to the image shown below:

这将打开“创建Azure Cosmos数据库帐户”页面。您需要填写所需的信息才能创建数据库。请参考下图：

You can fill in the details like this:

您可以像这样填写详细信息：

Subscription: Select your Azure subscription name from the drop-down.

订阅：从下拉列表中选择您的Azure订阅名称。
Resource Group: Select an existing Resource Group or create a new one.

资源组 ：选择一个现有的资源组或创建一个新的资源组。
Account Name: Enter a unique name for your Azure Cosmos DB account. The name can contain only lowercase letters, numbers, and the ‘-‘ character, and must be between 3 and 44 characters.

帐户名 ：为您的Azure Cosmos DB帐户输入一个唯一的名称。名称只能包含小写字母，数字和'-'字符，并且必须在3到44个字符之间。
API: Select Core (SQL)

API ：选择核心(SQL)
Location: Select a location to host your Azure Cosmos DB account.

位置：选择一个位置来托管您的Azure Cosmos DB帐户。

Keep the other fields to its default value and click on the “Review+ Create” button. In the next screen, review all your configurations and click on the “Create” button. After a few minutes, the Azure Cosmos DB account will be created. Click on “Go to resource” to navigate to the Azure Cosmos DB account page.

将其他字段保留为其默认值，然后单击“审阅+创建”按钮。在下一个屏幕中，查看所有配置，然后单击“创建”按钮。几分钟后，将创建Azure Cosmos数据库帐户。单击“转到资源”以导航到Azure Cosmos DB帐户页面。

设置数据库 (Set up the Database)

On the Azure Cosmos DB account page, click on “Data Explorer” on the left navigation, and then select “New Container”. Refer to the image shown below:

在Azure Cosmos DB帐户页上，单击左侧导航上的“数据资源管理器”，然后选择“新建容器”。请参考下图：

An “Add Container” pane will open. You need to fill in the details to create a new container for your Azure Cosmos DB. Refer to the image shown below:

“添加容器”窗格将打开。您需要填写详细信息以为Azure Cosmos DB创建一个新容器。请参考下图：

You can fill in the details as indicated below.

您可以按如下所示填写详细信息。

Database ID: You can give any name to your database. Here I am using FAQDB.

数据库ID：您可以给数据库命名。在这里，我正在使用FAQDB。
Throughput: Keep it at the default value of 400

吞吐量：将其保留为默认值400
Container ID: Enter the name for your container. Here I am using FAQContainer.

容器ID：输入容器的名称。在这里，我正在使用FAQContainer。
Partition key: The Partition key is used to automatically partition data among multiple servers for scalability. Put the value as “/id”.

分区键：分区键用于在多个服务器之间自动分区数据，以实现可伸缩性。将值输入为“ / id”。

Click on the “OK” button to create the database.

单击“确定”按钮创建数据库。

将样本数据添加到Cosmos DB (Add Sample data to the Cosmos DB)

In the Data Explorer, expand the FAQDB database then expand the FAQContainer. Select Items, and then click on New Item on the top. An editor will open on the right side of the page. Refer to the image shown below:

在数据资源管理器中，展开FAQDB数据库，然后展开FAQContainer。选择项目，然后单击顶部的新项目。编辑器将在页面右侧打开。请参考下图：

Put the following JSON data in the editor and click on the Save button at the top.

将以下JSON数据放入编辑器，然后单击顶部的“保存”按钮。

{"id": "1","question": "What is corona virus?","answer": "Corona viruses are a large family of viruses which may cause illness in animals or humans. The most recently discovered coronavirus causes coronavirus disease COVID-19."
}

We have added a set of questions and answer along with a unique id.

我们添加了一组问题和答案以及唯一的ID。

Follow the process described above to insert five more sets of data.

请按照上述过程插入另外五组数据。

{"id": "2","question": "What is COVID-19?","answer": "COVID-19 is the infectious disease caused by the most recently discovered corona virus. This new virus and disease were unknown before the outbreak began in Wuhan, China, in December 2019."
}
{"id": "3","question": "What are the symptoms of COVID-19?","answer": "The most common symptoms of COVID-19 are fever, tiredness, and dry cough. Some patients may have aches and pains, nasal congestion, runny nose, sore throat or diarrhea. These symptoms are usually mild and begin gradually. Some people become infected but don’t develop any symptoms and don't feel unwell."
}
{"id": "4","question": "How does COVID-19 spread?","answer": "People can catch COVID-19 from others who have the virus. The disease can spread from person to person through small droplets from the nose or mouth which are spread when a person with COVID-19 coughs or exhales. These droplets land on objects and surfaces around the person. Other people then catch COVID-19 by touching these objects or surfaces, then touching their eyes, nose or mouth."
}
{"id": "5","question": "What can I do to protect myself and prevent the spread of disease?","answer": "You can reduce your chances of being infected or spreading COVID-19 by taking some simple precaution. Regularly and thoroughly clean your hands with an alcoholbased hand rub or wash them with soap and water. Maintain at least 1 metre (3 feet) distance between yourself and anyone who is coughing or sneezing. Make sure you, and the people around you, follow good respiratory hygiene. This means covering your mouth and nose with your bent elbow or tissue when you cough or sneeze. Stay home if you feel unwell. If you have a fever, cough and difficulty breathing, seek medical attention and call in advance."
}
{"id": "6","question": "Are antibiotics effective in preventing or treating the COVID-19?","answer": "No. Antibiotics do not work against viruses, they only work on bacterial infections. COVID-19 is caused by a virus, so antibiotics do not work."
}

获取连接字符串 (Get the connection string)

Click on “keys” on the left navigation, navigate to the “Read-write Keys” tab. The value under PRIMARY CONNECTION STRING is our required connection string. Refer to the image shown below:

点击“键” 在左侧导航栏中，导航至“读写键”选项卡。 PRIMARY CONNECTION STRING下的值是我们所需的连接字符串。请参考下图：

Make a note of the PRIMARY CONNECTION STRING value. We will use it in the latter part of this article, when we will access the Azure Cosmos DB from an Azure function.

记下PRIMARY CONNECTION STRING值。当我们从Azure函数访问Azure Cosmos DB时，将在本文的后半部分使用它。

创建一个Azure功能应用 (Create an Azure function app)

Open Visual Studio 2019, click on “Create a new project”. Search “Functions” in the search box. Select the Azure Functions template and click on Next. Refer to the image shown below:

打开Visual Studio 2019，单击“创建新项目”。在搜索框中搜索“功能”。选择“ Azure Functions”模板，然后单击“下一步”。请参考下图：

In “Configure your new project” window, enter a Project name as FAQFunctionApp. Click on the Create button. Refer to the image below:

在“配置新项目”窗口中，输入项目名称作为FAQFunctionApp 。单击创建按钮。请参考下图：

A new “Create a new Azure Function Application settings” window will open. Select “Azure Functions v3 (.NET Core)”from the dropdown at the top. Select the function template as “HTTP trigger”. Set the authorization level to “Anonymous” from the drop-down on the right. Click on the Create button to create the function project and HTTP trigger function.

将打开一个新的“创建新的Azure Function应用程序设置”窗口。从顶部的下拉菜单中选择“ Azure Functions v3(.NET Core)”。选择功能模板作为“ HTTP触发器”。从右侧的下拉菜单中将授权级别设置为“匿名”。单击创建按钮以创建功能项目和HTTP触发功能。

Refer to the image shown below:

请参考下图：

安装Azure Cosmos DB的软件包 (Install package for Azure Cosmos DB)

To enable the Azure function App to bind to the Azure Cosmos DB, we need to install the Microsoft.Azure.WebJobs.Extensions.CosmosDB package. Navigate to Tools >> NuGet Package Manager >> Package Manager Console and run the following command:

若要使Azure功能应用程序绑定到Azure Cosmos DB，我们需要安装Microsoft.Azure.WebJobs.Extensions.CosmosDB程序包。导航到工具>> NuGet程序包管理器>>程序包管理器控制台，然后运行以下命令：

Install-Package Microsoft.Azure.WebJobs.Extensions.CosmosDB

Refer to the image shown below.

请参考下图。

You can learn more about this package at the NuGet gallery.

您可以在NuGet画廊中了解有关此软件包的更多信息。

配置Azure功能应用 (Configure the Azure Function App)

The Azure function project contains a default file called Function1.cs. You can safely delete this file as we won’t be using this for our project.

Azure函数项目包含一个名为Function1.cs的默认文件。您可以安全地删除此文件，因为我们不会在项目中使用该文件。

Right-click on the FAQFunctionApp project and select Add >> New Folder. Name the folder as Models. Again, right-click on the Models folder and select Add >> Class to add a new class file. Put the name of your class as FAQ.cs and click Add.

右键单击FAQFunctionApp项目，然后选择添加>>新建文件夹。将该文件夹命名为Models。再次右键单击Models文件夹，然后选择Add >> Class添加新的类文件。将班级名称命名为FAQ.cs ，然后单击添加。

Open FAQ.cs and put the following code inside it.

打开FAQ.cs并将以下代码放入其中。

namespace FAQFunctionApp.Models
{class FAQ{public string Id { get; set; }public string Question { get; set; }public string Answer { get; set; }}
}

The class has the same structure as the JSON data we have inserted in the cosmos DB.

该类的结构与我们在cosmos DB中插入的JSON数据相同。

Right-click on the FAQFunctionApp project and select Add >> Class. Name your class as CovidFAQ.cs. Put the following code inside it.

右键单击FAQFunctionApp项目，然后选择添加>>类。将您的班级命名为CovidFAQ.cs 。将以下代码放入其中。

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Logging;
using Microsoft.Azure.WebJobs;
using FAQFunctionApp.Models;
using Microsoft.Azure.WebJobs.Extensions.Http;
using System.Threading.Tasks;namespace FAQFunctionApp
{class CovidFAQ{[FunctionName("covidFAQ")]public static async Task<IActionResult> Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req,[CosmosDB(databaseName:"FAQDB",collectionName:"FAQContainer",ConnectionStringSetting = "DBConnectionString")] IEnumerable<FAQ> questionSet, ILogger log){log.LogInformation("Data fetched from FAQContainer");return new OkObjectResult(questionSet);}}
}

We have created a class CovidFAQ and added an Azure function to it. The attribute FunctionName is used to specify the name of the function. We have used the HttpTrigger attribute which allows the function to be triggered via an HTTP call. The attribute CosmosDB is used to connect to the Azure Cosmos DB. We have defined three parameters for this attribute as described below:

我们创建了一个类CovidFAQ ，并向其中添加了Azure函数。属性FunctionName用于指定函数的名称。我们使用了HttpTrigger属性，该属性允许通过HTTP调用触发功能。属性CosmosDB用于连接到Azure Cosmos DB。我们为此属性定义了三个参数，如下所述：

databaseName: the name for the cosmos DB

databaseName ：波斯菊数据库的名称
collectionName: the collecting inside the cosmos DB we want to access

collectionName ：我们要访问的宇宙数据库内部的收集
ConnectionStringSetting: the connection string to connect to Cosmos DB. We will configure it in the next section.

ConnectionStringSetting ：连接到Cosmos DB的连接字符串。我们将在下一部分中对其进行配置。

We have decorated the parameter questionSet, which is of type IEnumerable<FAQ> with the CosmosDB attribute. When the app is executed, the parameter questionSet will be populated with the data from Cosmos DB. The function will return the data using a new instance of OkObjectResult.

我们已装饰参数questionSet ，它的类型的IEnumerable<FAQ>与CosmosDB属性。执行应用程序后，将使用Cosmos DB中的数据填充参数questionSet 。该函数将使用OkObjectResult的新实例返回数据。

将连接字符串添加到Azure函数 (Add the connection string to the Azure Function)

Remember the Azure cosmos DB connection string you noted earlier? Now we will configure it for our app. Open the local.settings.json file and add your connection string as shown below:

还记得您之前提到的Azure cosmos DB连接字符串吗？现在，我们将为我们的应用程序配置它。打开local.settings.json文件并添加您的连接字符串，如下所示：

{"IsEncrypted": false,"Values": {"AzureWebJobsStorage": "UseDevelopmentStorage=true","FUNCTIONS_WORKER_RUNTIME": "dotnet","DBConnectionString": "your connectionn string"}
}

The local.settings.json will not be published to Azure when we publish the Azure Function app. Therefore, we need to configure the connections string separately while publishing the app to Azure. We will see this in action in the latter part of this article.

当我们发布Azure Function应用程序时，local.settings.json不会发布到Azure。因此，在将应用程序发布到Azure时，我们需要单独配置连接字符串。我们将在本文的后半部分看到这一点。

在本地测试Azure功能 (Test the Azure Function locally)

Press F5 to execute the function. Copy the URL of your function from the Azure Functions runtime output. Refer to the image shown below:

按F5执行该功能。从Azure Functions运行时输出中复制函数的URL。请参考下图：

Open the browser and paste the URL in the browser’s address bar. You can see the output as shown below:

打开浏览器，然后将URL粘贴到浏览器的地址栏中。您可以看到如下所示的输出：

Here you can see the data we have inserted into our Azure Cosmos DB.

在这里，您可以看到我们插入到Azure Cosmos数据库中的数据。

将功能应用发布到Azure (Publish the Function app to Azure)

We have successfully created the Function app, but it is still running in the localhost. Let’s publish the app to make it available globally.

我们已经成功创建了Function应用程序，但是它仍在localhost中运行。让我们发布该应用程序以使其在全球范围内可用。

Right-click on the FAQFunctionApp project and select Publish. Select the Publish target as Azure.

右键单击FAQFunctionApp项目，然后选择发布。选择发布目标为Azure。

Select the specific target as “Azure Function App (windows)”.

选择特定的目标作为“ Azure Function App(windows)”。

In the next window, click on the “Create a new Azure Function…” button. A new Function App window will open. Refer to the image as shown below:

在下一个窗口中，单击“创建新的Azure函数…”按钮。将打开一个新的功能应用程序窗口。请参阅如下图所示的图像：

You can fill in the details as indicated below:

您可以按如下所示填写详细信息：

Name: A globally unique name for your function app.

名称：您的功能应用程序的全局唯一名称。
Subscription: Select your Azure subscription name from the drop-down.

订阅：从下拉列表中选择您的Azure订阅名称。
Resource Group: Select an existing Resource Group or create a new one.

资源组 ：选择一个现有的资源组或创建一个新的资源组。
Plan Type: Select Consumption. It will make sure that you pay only for executions of your functions app.

计划类型 ：选择消耗。它将确保您仅为执行功能应用程序付费。
Location: Select a location for your function.

位置：为您的功能选择一个位置。
Azure Storage: Keep the default value.

Azure存储 ：保留默认值。

Click on the “Create” button to create the Function App and return to the previous window. Make sure the option “Run from package file” is checked. Click on the Finish button.

单击“创建”按钮以创建功能应用程序并返回上一个窗口。确保选中“从软件包文件运行”选项。单击完成按钮。

Now you are at the Publish page. Click on the “Manage Azure App Service Settings” button.

现在，您在“发布”页面上。单击“管理Azure应用程序服务设置”按钮。

You will see a “Application Settings” window as shown below:

您将看到一个“应用程序设置”窗口，如下所示：

At this point, we will configure the Remote value for the “DBConnectionString” key. This value is used when the app is deployed on Azure. Since the key for Local and Remote environment is the same in our case, click on the “Insert value from Local” button to copy the value from the Local field to the Remote field. Click on the OK button.

此时，我们将为“ DBConnectionString”键配置Remote值。在Azure上部署应用程序时使用此值。由于在本例中，本地和远程环境的密钥相同，因此单击“从本地插入值”按钮可将值从本地字段复制到远程字段。单击确定按钮。

You are navigated back to the Publish page. We are done with all the configurations. Click on the Publish button to publish your Azure function app. After the app is published, get the site URL value, append /api/covidFAQ to it and open it in the browser. You can see the output as shown below.

您将导航回到“发布”页面。我们完成了所有配置。单击“发布”按钮以发布您的Azure功能应用程序。应用发布后，获取站点URL值，将/api/covidFAQ附加到该URL值并在浏览器/api/covidFAQ其打开。您可以看到如下所示的输出。

This is the same dataset that we got while running the app locally. This proves that our serverless Azure function is deployed and able to access the Azure Cosmos DB successfully.

这与我们在本地运行应用程序时获得的数据集相同。这证明我们的无服务器Azure功能已部署并且能够成功访问Azure Cosmos DB。

为Azure应用服务启用CORS (Enable CORS for the Azure app service)

We will use the Function app in a Blazor UI project. To allow the Blazor app to access the Azure Function, we need to enable CORS for the Azure app service.

我们将在Blazor UI项目中使用Function应用程序。若要允许Blazor应用程序访问Azure功能，我们需要为Azure应用程序服务启用CORS。

Open the Azure portal. Navigate to “All resources”. Here, you can see the App service which we have created while Publishing the app the in previous section. Click on the resource to navigate to the resource page. Click on CORS on the left navigation. A CORS details pane will open.

打开Azure门户。导航到“所有资源”。在这里，您可以看到我们在上一节中发布应用程序时创建的应用程序服务。单击资源以导航到资源页面。单击左侧导航上的CORS。将打开一个CORS详细信息窗格。

Now we have two options here:

现在我们在这里有两个选择：

Enter the specific origin URL to allow them to make cross-origin calls.输入特定的原始URL，以允许他们进行跨源调用。
Remove all origin URL from the list, and use “*” wildcard to allow all the URL to make cross-origin calls.从列表中删除所有原始URL，并使用“ *”通配符允许所有URL进行跨源调用。

We will use the second option for our app. Remove all the previously listed URL and enter a single entry as “*” wildcard. Click on the Save button at the top. Refer to the image shown below:

我们将对我们的应用程序使用第二个选项。删除所有先前列出的URL，然后输入一个单独的条目作为“ *”通配符。单击顶部的“保存”按钮。请参考下图：

创建Blazor Web组装项目 (Create the Blazor Web assembly project)

Open Visual Studio 2019, click on “Create a new project”. Select “Blazor App” and click on the “Next” button. Refer to the image shown below:

打开Visual Studio 2019，单击“创建新项目”。选择“ Blazor App”，然后单击“下一步”按钮。请参考下图：

On the “Configure your new project” window, put the project name as FAQUIApp and click on the “Create” button as shown in the image below:

在“配置新项目”窗口中，将项目名称命名为FAQUIApp ，然后单击“创建”按钮，如下图所示：

On the “Create a new Blazor app” window, select the “Blazor WebAssmebly App” template. Click on the Create button to create the project. Refer to the image shown below:

在“创建新的Blazor应用程序”窗口上，选择“ Blazor WebAssmebly应用程序”模板。单击创建按钮创建项目。请参考下图：

To create a new razor component, right-click on the Pages folder, select Add >>Razor Component.An “Add New Item” dialog box will open, put the name of your component as CovidFAQ.razor and click on the Add button. Refer to the image shown below:

要创建一个新的剃须刀组件，请在Pages文件夹上单击鼠标右键，选择Add >> Razor Component。“添加新项”对话框将打开，将组件的名称命名为CovidFAQ.razor ，然后单击“添加”按钮。请参考下图：

Open CovidFAQ.razor and put the following code into it.

打开CovidFAQ.razor并将以下代码放入其中。

@page "/covidfaq"
@inject HttpClient Http<div class="d-flex justify-content-center"><img src="../Images/COVID_banner.jpg" alt="Image" style="width:80%; height:300px" />
</div>
<br />
<div class="d-flex justify-content-center"><h1>Frequently asked Questions on Covid-19</h1>
</div>
<hr />@if (questionList == null)
{<p><em>Loading...</em></p>
}
else
{@foreach (var question in questionList){<div class="card"><h3 class="card-header">@question.Question</h3><div class="card-body"><p class="card-text">@question.Answer</p></div></div><br />}
}@code {private FAQ[] questionList;protected override async Task OnInitializedAsync(){questionList = await Http.GetFromJsonAsync<FAQ[]>("https://faqfunctionapp20200611160123.azurewebsites.net/api/covidFAQ");}public class FAQ{public string Id { get; set; }public string Question { get; set; }public string Answer { get; set; }}
}

In the @code section, we have created a class called FAQ. The structure of this class is the same as that of the FAQ class we created earlier in the Azure function app. Inside the OnInitializedAsync method, we are hitting the API endpoint of our function app. The data returned from the API will be stored in a variable called questionList which is an array of type FAQ.

在@code部分，我们创建了一个名为FAQ的类。该类的结构与我们先前在Azure函数应用中创建的FAQ类的结构相同。在OnInitializedAsync方法内部，我们正在访问函数应用程序的API端点。从API返回的数据将存储在名为questionList的变量中，该变量是FAQ类型的数组。

In the HTML section of the page, we have set a banner image at the top of the page. The image is available in the /wwwroot/Images folder. We will use a foreach loop to iterate over the questionList array and create a bootstrap card to display the question and answer.

在页面HTML部分中，我们在页面顶部设置了横幅图像。该图像位于/wwwroot/Images文件夹中。我们将使用一个foreach循环遍历过questionList阵列，并创建一个引导卡，以显示问题和答案。

将链接添加到导航菜单 (Adding Link to Navigation menu)

The last step is to add the link of our CovidFAQ component in the navigation menu. Open /Shared/NavMenu.razor file and add the following code into it.

最后一步是在导航菜单中添加我们的CovidFAQ组件的链接。打开/Shared/NavMenu.razor文件，并将以下代码添加到其中。

<li class="nav-item px-3"><NavLink class="nav-link" href="covidfaq"><span class="oi oi-plus" aria-hidden="true"></span> Covid FAQ</NavLink>
</li>

Remove the navigation links for Counter and Fetch-data components as they are not required for this application.

删除Counter和Fetch-data组件的导航链接，因为此应用程序不需要它们。

执行演示 (Execution Demo)

Press F5 to launch the app. Click on the Covid FAQ button on the nav menu on the left. You can see all the questions and answers in a beautiful card layout as shown below:

按F5键启动该应用程序。单击左侧导航菜单上的Covid常见问题解答按钮。您可以在漂亮的卡片布局中看到所有问题和答案，如下所示：

You can also check the live app at https://covid19-faq.azurewebsites.net/

您也可以在https://covid19-faq.azurewebsites.net/查看实时应用程序

摘要 (Summary)

In this article, we learned about serverless and its advantage over the traditional 3-tier web architecture. We also learned how the Azure function fits in serverless web architecture.

在本文中，我们了解了无服务器及其相对于传统3层Web架构的优势。我们还了解了Azure功能如何适合无服务器Web架构。

To demonstrate the practical implementation of these concepts, we have created a Covid-19 FAQ app using the Blazor web assembly and Azure serverless. The questions and answers are displayed in the card layout using Bootstrap.

为了演示这些概念的实际实现，我们使用Blazor Web程序集和Azure无服务器创建了Covid-19 FAQ应用程序。使用Bootstrap在卡布局中显示问题和答案。

We have used the Azure cosmos DB as the primary database to store the questions and answers for our FAQ app. An Azure function is used to fetch data from the cosmos DB. We deployed the function app on Azure to make it available globally via an API endpoint.

我们已使用Azure cosmos数据库作为主要数据库来存储常见问题解答应用程序的问题和答案。 Azure函数用于从cosmos DB中获取数据。我们在Azure上部署了功能应用程序，以使其可以通过API端点在全球范围内使用。

也可以看看 (See Also)

Optical Character Reader Using Blazor And Computer Vision

使用Blazor和计算机视觉的光学字符读取器
Multi-Language Translator Using Blazor And Azure Cognitive Services

使用Blazor和Azure认知服务的多语言翻译器
Facebook Authentication And Authorization In Server-Side Blazor App

服务器端Blazor应用程序中的Facebook身份验证和授权
Continuous Deployment For Angular App Using Heroku And GitHub

使用Heroku和GitHub持续部署Angular App
Google Authentication And Authorization In Server-Side Blazor App

服务器端Blazor应用中的Google身份验证和授权
Blazor CRUD Using Google Cloud Firestore

使用Google Cloud Firestore的Blazor CRUD

If you like the article, share with you friends. You can also connect with me on Twitter and LinkedIn.

如果您喜欢这篇文章，请与您的朋友分享。您也可以在Twitter和LinkedIn上与我联系。

Originally published at https://ankitsharmablogs.com/

最初发布在https://ankitsharmablogs.com/

翻译自: https://www.freecodecamp.org/news/how-to-implement-azure-serverless-with-blazor-web-assembly/

azure服务器