Esercizio - Creare un progetto di Funzioni di Azure

  • 6 minuti

Per l'app Web per la lista della spesa è necessaria un'API. In questo esercizio si compila ed esegue l'API usando un progetto Funzioni di Azure. Da qui si estende l'API con una nuova funzione usando l'estensione Funzioni di Azure per Visual Studio.

In questo esercizio si completano i passaggi seguenti:

  1. Creare un ramo per prepararsi ad apportare modifiche all'app Web.
  2. Eseguire il progetto di Funzioni di Azure.
  3. Creare la funzione HTTP PUT.
  4. Sostituire il codice iniziale della funzione con la logica per ottenere prodotti.
  5. Configurare l'app Web per usare un proxy per le richieste HTTP all'API.
  6. Eseguire l'API e l'app Web.

Nota

Assicurarsi di aver configurato Visual Studio per lo sviluppo di Azure con .NET.

Ottenere l'app per le funzioni

A questo punto, si aggiunge un'API e la si connette all'app front-end. Il progetto API include un progetto di Funzioni di Azure incompleto, quindi è possibile completalo ora.

Creare un ramo API

Prima di apportare modifiche a un'app, è consigliabile creare un nuovo ramo per le modifiche. Poiché si sta per completare l'API per l'app, creare un nuovo ramo in Git denominato api.

Completare l'API di Funzioni di Azure

Il progetto Api contiene il progetto di Funzioni di Azure, insieme a tre funzioni.

Classe Metodo Itinerario
ProductsPost POST products
ProductsPut PUT products/:id
ProductsDelete DELETE products/:id

L'API include route per modificare i prodotti per la lista della spesa, ma è priva di una route per l'ottenimento di prodotti. Aggiungiamolo ora.

Creare la funzione HTTP PUT

  1. In Visual Studio fare clic con il pulsante destro del mouse sul progetto Api e quindi scegliere Aggiungi>Nuovo elemento.

    A screenshot showing how to create the Azure function item.

  2. Nella finestra di dialogo Aggiungi nuovo elemento selezionare Funzione di Azure.

    A screenshot showing the Azure function item selected.

  3. Immettere ProductsGet.cs come nome del file per le funzioni.

  4. Selezionare Trigger HTTP come tipo di funzione.

  5. Selezionare Anonimo dall'elenco a discesa nel campo Livello di autorizzazione.

    A screenshot showing the HTTP trigger selected.

  6. Selezionare Aggiungi.

È stata appena estesa l'app per le funzioni di Azure con una funzione per ottenere i prodotti.

Configurare il metodo HTTP e l'endpoint della route

Si noti che il metodo Run della classe C# appena creata include un attributo HttpTrigger sul primo argomento, HttpRequest. Questo attributo definisce il livello di accesso della funzione, il metodo o i metodi HTTP per cui essere in ascolto e l'endpoint della route.

L'endpoint di route è null per impostazione predefinita, ovvero l'endpoint usa il valore dell'attributo FunctionName , ovvero ProductsGet. Impostando la Route proprietà su "products" viene eseguito l'override del comportamento predefinito.

La funzione viene attualmente attivata in una richiesta HTTP GET per products. L'aspetto del metodo Run sarà simile al codice seguente:

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

Aggiornare la logica della route

Il corpo del Run metodo viene eseguito quando viene eseguita la funzione.

È necessario aggiornare la logica nel Run metodo per ottenere i prodotti. Il file ProductData.cs contiene una logica di accesso ai dati sotto forma di una classe denominata ProductData, disponibile tramite l'inserimento delle dipendenze come interfaccia IProductData. L'interfaccia ha un metodo su di esso denominato GetProducts, che restituisce un oggetto Task<IEnumerable<Product> che restituisce in modo asincrono un elenco di prodotti.

Modificare ora l'endpoint della funzione in modo da restituire i prodotti:

  1. Aprire ProductsGet.cs.

  2. Sostituirne il contenuto con il codice seguente:

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

Nelle modifiche precedenti la classe è stata trasformata da una classe statica a una classe di istanza. È stata aggiunta un'interfaccia al costruttore in modo che il framework di inserimento delle dipendenze possa inserire la ProductData classe . Infine, è stata configurata la Run funzione per restituire l'elenco dei prodotti quando viene chiamato.

Configurare la condivisione di risorse tra le origini (CORS) in locale

Non è necessario preoccuparsi della condivisione di risorse tra le origini (CORS) quando si esegue la pubblicazione in App Web statiche di Azure. App Web statiche di Azure configura automaticamente l'app in modo che possa comunicare con l'API su Azure usando un proxy inverso. Tuttavia, quando l'esecuzione avviene in locale, è necessario configurare il meccanismo CORS per consentire la comunicazione tra l'app Web e l'API.

Chiedere ora a Funzioni di Azure di consentire all'app Web di effettuare richieste HTTP all'API nel computer.

  1. Aprire il file denominato launchSettings.json nella cartella Proprietà del progetto Api.

    • Se il file non esiste, crearlo.

  2. Aggiornare il contenuto del file:

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

Nota

Questo file viene usato per controllare il modo in cui Visual Studio avvierà gli strumenti di Funzioni di Azure. Se si vuole usare lo strumento da riga di comando di Funzioni di Azure, sarà necessario anche un file local.settings.json descritto nella documentazione Azure Functions Core Tools. Il file local.settings.json è elencato nel file .gitignore, che impedisce il push di questo file in GitHub. Il motivo è che nel file potrebbero essere archiviati segreti che e non è opportuno che finiscano in GitHub. Ecco inoltre perché è stato necessario creare il file durante la creazione del repository dal modello.

Eseguire l'API e l'app Web

È arrivato il momento di osservare l'app Web e il progetto di Funzioni di Azure in esecuzione insieme.

  1. In Visual Studio fare clic con il pulsante destro del mouse sulla soluzione ShoppingList.

  2. Selezionare Imposta progetti di avvio.

  3. Selezionare l'opzione Progetti di avvio multipli.

  4. Impostare Api e Client in modo che il valore di Azione sia Avvia e quindi selezionare OK.

  5. Avviare il debugger.

Passare all'app

È arrivato il momento di osservare l'applicazione in esecuzione in locale sull'API di Funzioni di Azure.

Passare all'applicazione Web (ad esempio, https://localhost:44348/).

È stata compilata l'applicazione, che è ora in esecuzione in locale ed effettua richieste HTTP GET all'API.

A questo punto, arrestare l'app e l'API in esecuzione disconnettendo il debugger in Visual Studio.

Passaggi successivi

L'app funziona in locale e il passaggio successivo consiste nel pubblicarla insieme all'API.