Övning – Skapa ett Azure Functions-projekt

Din inköpslisteapp behöver ett API. I den här övningen skapar och kör du ditt API med hjälp av ett Azure Functions-projekt. Därifrån utökar du API:et med en ny funktion med hjälp av Azure Functions-tillägget för Visual Studio.

I den här övningen slutför du följande steg:

1. Skapa en gren när du förbereder dig för att göra ändringar i webbappen.
2. Utforska Azure Functions-projektet.
3. Skapa funktionen HTTP GET.
4. Ersätt funktionens startkod med logik för att hämta produkter.
5. Konfigurera webbappen för att proxy-HTTP-begäranden till API:et.
6. Kör API:et och webbappen.

Hämta funktionsappen

Nu lägger du till ett API och ansluter det till klientdelsappen. Api-projektet innehåller ett ofullständigt Azure Functions-projekt, så nu ska vi slutföra det.

Skapa en API-gren

Innan du gör ändringar i en app är det bra att skapa en ny gren för ändringarna. Du är snart klar med API:et för appen. Skapa nu en ny gren i Git med namnet api.

Slutföra Azure Functions-API:et

Api-projektet innehåller ditt Azure Functions-projekt och tre funktioner.

Ditt API har vägar för att manipulera produkterna i inköpslistan, men saknar en väg för att hämta produkterna. Nu ska vi lägga till det härnäst.

Skapa en HTTP GET-funktion

1. Högerklicka på Api-projektet i Visual Studio och välj

   

2. I dialogrutan Lägg till nytt objekt väljer du Azure-funktion.

   

3. Ange ProductsGet.cs som namnet på funktionsfilen.

4. Välj Http-utlösare som funktionstyp.

5. Välj Anonym i listrutan i fältet Auktoriseringsnivå .

   

6. Markera Lägga till.

Du har precis utökat din Azure Functions-app med en funktion för att hämta dina produkter!

Konfigurera HTTP-metoden och vägslutpunkten

Observera att metoden för Run den nyligen skapade C#-klassen har ett HttpTrigger attribut för det första argumentet, HttpRequest. Det här attributet definierar åtkomstnivån för funktionen, DE HTTP-metoder som ska lyssnas efter och routningsslutpunkten.

Routningsslutpunkten är null som standard, vilket innebär att slutpunkten använder värdet för FunctionName attributet, som är ProductsGet. Om du ställer in egenskapen Route på "products" åsidosätts standardbeteendet.

För närvarande utlöses funktionen på en HTTP-begäran GET till produkter. Din Run metod ser ut som följande kod:

[FunctionName("ProductsGet")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
    ILogger log)

Uppdatera väglogiken

Metodens brödtext Run körs när funktionen körs.

Du måste uppdatera logiken Run i metoden för att hämta dina produkter. Det finns dataåtkomstlogik i ProductData.cs filen som en klass med namnet ProductData, som är tillgänglig via beroendeinmatning som IProductData gränssnitt. Gränssnittet har en metod som heter GetProducts, som returnerar en Task<IEnumerable<Product> som asynkront returnerar en lista över produkter.

Nu ändrar du funktionsslutpunkten så att produkterna returneras:

1. Öppna ProductsGet.cs.

2. Ersätt innehållet med följande kod:

   using Microsoft.AspNetCore.Http;
   using Microsoft.AspNetCore.Mvc;
   using Microsoft.Azure.WebJobs;
   using Microsoft.Azure.WebJobs.Extensions.Http;
   using System.Threading.Tasks;
   
   namespace Api;
   
   public class ProductsGet
   {
       private readonly IProductData productData;
   
       public ProductsGet(IProductData productData)
       {
           this.productData = productData;
       }
   
       [FunctionName("ProductsGet")]
       public async Task<IActionResult> Run(
           [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "products")] HttpRequest req)
       {
           var products = await productData.GetProducts();
           return new OkObjectResult(products);
       }
   }
   

I föregående ändringar vände du klassen från en statisk till en instansklass. Du har lagt till ett gränssnitt i konstruktorn så att ramverket för beroendeinmatning kan mata in ProductData klassen. Slutligen konfigurerade Run du funktionen för att returnera produktlistan när den anropades.

Konfigurera resursdelning för korsande ursprung (CORS) lokalt

Du behöver inte bekymra dig om resursdelning mellan ursprung (CORS) när du publicerar till Azure Static Web Apps. Azure Static Web Apps konfigurerar automatiskt din app så att den kan kommunicera med ditt API på Azure med hjälp av en omvänd proxy. Men när den körs lokalt måste du ställa in CORS för att tillåta kommunikation mellan webbappen och API:et.

Nu uppmanar du Azure Functions att tillåta att din webbapp gör HTTP-begäranden till API:et på datorn.

1. Öppna filen med namnet launchSettings.json i mappen Egenskaper för API-projektet .

   • Om filen inte finns skapar du den.

2. Uppdatera innehållet i filen:

   {
       "profiles": {
           "Api": {
               "commandName": "Project",
               "commandLineArgs": "start --cors *"
           }
       }
   }
   

Köra API:et och webbappen

Nu är det dags att se webbappen och Azure Functions-projektet fungera tillsammans.

1. Högerklicka på Lösningen ShoppingList i Visual Studio.

2. Välj Konfigurera startprojekt.

3. Välj alternativet Flera startprojekt.

4. Ange Att Api och Klient ska ha Start som åtgärd och välj sedan Ok.

5. Starta felsökningsprogrammet.

Gå till din app

Nu testar vi att köra appen lokalt mot Azure Functions-API:et.

Bläddra till webbprogrammet (till exempel https://localhost:44348/).

Du har skapat ditt program och nu körs det lokalt och gör HTTP GET-begäranden till ditt API.

Stoppa nu appen och API:et som körs genom att koppla från felsökningsprogrammet i Visual Studio.

Nästa steg

Din app fungerar lokalt och nästa steg är att publicera appen med API:et tillsammans.