Oefening: een Azure Functions-project maken

  • 6 minuten

Uw boodschappenlijst-web-app heeft een API nodig. In deze oefening bouwt en voert u uw API uit met behulp van een Azure Functions-project. Van daaruit breidt u de API uit met een nieuwe functie met behulp van de Azure Functions-extensie voor Visual Studio.

In deze oefening voert u de volgende stappen uit:

  1. Maak een vertakking als voorbereiding om wijzigingen aan te brengen in uw web-app.
  2. Verken het Azure Functions-project.
  3. Maak de HTTP GET-functie.
  4. Vervang de code van de functiestarter door logica om producten op te halen.
  5. Configureer de web-app om HTTP-aanvragen naar de API te proxyen.
  6. Voer de API en de web-app uit.

Notitie

Zorg ervoor dat u Visual Studio hebt geconfigureerd voor Azure-ontwikkeling met .NET.

De functie-app ophalen

Nu voegt u een API toe en verbindt u deze met uw front-end-app. Het API-project bevat een onvolledig Azure Functions-project, dus laten we dat nu voltooien.

Een API-vertakking maken

Voordat u wijzigingen aanbrengt in een app, is het een goed idee om een nieuwe vertakking te maken voor de wijzigingen. U staat op het punt om de API voor uw app te voltooien. Maak een nieuwe vertakking in Git met de naam api.

Voltooi de Azure Functions-API

Het Api-project bevat uw Azure Functions-project, samen met drie functies.

Klas Wijze Route
ProductsPost POSTEN products
ProductsPut PUT products/:id
ProductsDelete DELETE products/:id

Uw API bevat routes voor het bewerken van de producten voor de boodschappenlijst, maar er is geen route voor het ophalen van de producten. Laten we dat nu nog eens toevoegen.

De HTTP GET-functie maken

  1. Klik in Visual Studio met de rechtermuisknop op het API-project en selecteer Nieuw item toevoegen>.

    Een schermopname die laat zien hoe u het Azure-functie-item maakt.

  2. Selecteer Azure Function in het dialoogvenster Nieuw item toevoegen.

    Een schermopname van het geselecteerde Azure-functie-item.

  3. Voer ProductsGet.cs in als de naam van het functiebestand.

  4. Selecteer Http-trigger als het functietype.

  5. Selecteer Anoniem in de vervolgkeuzelijst in het veld Autorisatieniveau .

    Een schermopname waarin de HTTP-trigger is geselecteerd.

  6. Selecteer Toevoegen.

U hebt zojuist uw Azure Functions-app uitgebreid met een functie om uw producten te verkrijgen.

Configureer de namen van de HTTP-methode en het route-eindpunt

U ziet dat de Run methode van de zojuist gemaakte C#-klasse een HttpTrigger kenmerk heeft voor het eerste argument, de HttpRequest. Dit kenmerk definieert het toegangsniveau van de functie, de HTTP-methode(s) die moeten worden geluisterd en het route-eindpunt.

Het route-eindpunt is null standaard, wat betekent dat het eindpunt gebruikmaakt van de waarde van het FunctionName kenmerk, dat wil ProductsGetzeggen. Als u de Route eigenschap instelt om het standaardgedrag te "products" overschrijven.

Op dit moment wordt uw functie geactiveerd op een HTTP-aanvraag GET voor producten. Uw Run methode ziet eruit als de volgende code:

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

De routelogica bijwerken

De hoofdtekst van de Run methode wordt uitgevoerd wanneer de functie wordt uitgevoerd.

U moet de logica in de Run methode bijwerken om uw producten op te halen. Er is logica voor gegevenstoegang in het ProductData.cs bestand als een klasse genaamd ProductData, die beschikbaar is via afhankelijkheidsinjectie als interface IProductData . De interface heeft een methode die wordt aangeroepen GetProducts, waarmee asynchroon Task<IEnumerable<Product> een lijst met producten wordt geretourneerd.

Wijzig nu het eindpunt van de functie om de producten te retourneren:

  1. Open ProductsGet.cs.

  2. Vervang de inhoud door de volgende code:

    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);
    }
}

In de voorgaande wijzigingen hebt u de klasse van een statische naar een exemplaarklasse omgedraaid. U hebt een interface toegevoegd aan de constructor, zodat het framework Voor afhankelijkheidsinjectie de ProductData klasse kan injecteren. Ten slotte hebt u de Run functie geconfigureerd om de productlijst te retourneren wanneer deze wordt aangeroepen.

CORS (Cross-Origin Resource Sharing) lokaal configureren

U hoeft zich geen zorgen te maken over CROSS-Origin Resource Sharing (CORS) wanneer u publiceert naar Azure Static Web Apps. Met Azure Static Web Apps wordt uw app automatisch geconfigureerd zodat deze via een omgekeerde proxy met uw API op Azure kan communiceren. Als u de app echter lokaal uitvoert, moet u CORS configureren zodat uw web-app en API kunnen communiceren.

Vraag Nu Azure Functions om uw web-app toe te staan HTTP-aanvragen naar de API op uw computer te verzenden.

  1. Open het bestand met de naam launchSettings.json in de map Eigenschappen van het Api-project .

    • Als het bestand niet bestaat, maakt u het.

  2. Werk de inhoud van het bestand bij:

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

Notitie

Dit bestand wordt gebruikt om te bepalen hoe Visual Studio het Azure Functions-hulpprogramma start. Als u het opdrachtregelprogramma van Azure Functions wilt gebruiken, hebt u ook een local.settings.json-bestand nodig dat wordt beschreven in de documentatie over Azure Functions Core Tools. Het local.settings.json-bestand wordt vermeld in het .gitignore-bestand , waardoor dit bestand niet naar GitHub wordt gepusht. Dit komt doordat u geheimen in dit bestand kunt opslaan dat u niet wilt in GitHub. Dit is ook de reden waarom u het bestand moest maken toen u de opslagplaats op basis van de sjabloon maakte.

De API en web-app uitvoeren

Nu is het tijd om te kijken hoe uw web-app en Azure Functions-project samenwerken.

  1. Klik in Visual Studio met de rechtermuisknop op de ShoppingList-oplossing .

  2. Selecteer Opstartprojecten instellen.

  3. Selecteer de optie Meerdere opstartprojecten .

  4. Stel api en client in om te beginnen als hun actie en selecteer vervolgens OK.

  5. Start het foutopsporingsprogramma.

Blader naar uw app

Nu is het tijd om uw toepassing lokaal uit te voeren met de Azure Functions-API.

Blader naar de webtoepassing (bijvoorbeeld https://localhost:44348/).

U hebt uw toepassing gebouwd en nu wordt deze lokaal uitgevoerd om HTTP GET-aanvragen naar uw API te verzenden.

Stop nu de actieve app en API door de verbinding met het foutopsporingsprogramma in Visual Studio te verbreken.

Volgende stappen

Uw app werkt lokaal en de volgende stap is het samen publiceren van de app met de API.