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 creerai ed eseguirai la tua API usando un progetto di Funzioni di Azure. Estenderai quindi l'API con una nuova funzione usando l'estensione di Funzioni di Azure per Visual Studio Code.

In questo esercizio completerai i passaggi seguenti:

  1. Creare un ramo per prepararsi ad apportare modifiche all'app Web.
  2. Esplorare 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.

Eseguire l'app per le funzioni

Ora aggiungi un'API e collegala all'app front-end. La cartella api-starter include un progetto di Funzioni di Azure incompleto. Quindi, andiamo a completare questa operazione 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, è il momento giusto per creare un ramo.

  1. In Visual Studio Code aprire il riquadro comandi premendo F1.

  2. Immettere e selezionare Git: Estrai in....

  3. Selezionare Crea un nuovo ramo.

  4. Immettere api per il nome del nuovo ramo e premere INVIO.

È stato appena creato il ramo Git api.

Completare l'API di Funzioni di Azure

Per completare l'API, prima di tutto sposta il codice API iniziale in una cartella denominata api. Questo è il nome di cartella immesso per api_location quando hai creato l'istanza di App Web statiche.

  1. In Visual Studio Code aprire il riquadro comandi premendo F1.

  2. Immettere e selezionare Terminale: Crea nuovo terminale (nell'area di lavoro attiva).

  3. Assicurarsi di trovarsi nella cartella radice del progetto.

  4. Eseguire il comando git seguente per rinominare la cartella api-starter in api.

    git mv api-starter api

  5. Aprire il riquadro comandi premendo F1.

  6. Digitare e selezionare Git: Esegui commit di tutto.

  7. Immettere il messaggio di commit api e premere INVIO.

Ora vedrai una cartella api nello strumento di esplorazione di Visual Studio Code. La cartella api contiene il progetto di Funzioni di Azure, insieme a tre funzioni.

Cartella e file metodo Itinerario
api/products-post POST products
api/products-put PUT products/:id
api/products-delete DELETE products/:id

Creare la funzione HTTP PUT

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

Installare l'estensione Funzioni di Azure per Visual Studio Code

Puoi creare e gestire le applicazioni di Funzioni di Azure usando l’estensione Funzioni di Azure per Visual Studio Code.

  1. Passare a Visual Studio Marketplace e installare l'estensione Funzioni di Azure per Visual Studio Code.

  2. Quando la scheda dell’estensione viene caricata in Visual Studio Code, selezionare Installa.

  3. Al termine dell'installazione, selezionare Ricarica.

Nota

Assicurati di installare Azure Functions Core Tools, che ti consentirà di eseguire Funzioni di Azure in locale.

Creare la funzione

Ora estenderai l'app per le funzioni di Azure con una funzione per ottenere i prodotti.

  1. In Visual Studio Code aprire il riquadro comandi premendo F1.

  2. Immettere e selezionare Funzioni di Azure: Crea funzione.

  3. Quando viene chiesto se creare una funzione, selezionare Trigger HTTP.

  4. Immettere products-get come nome della funzione.

  5. Selezionare Anonimo come livello di autenticazione.

Nota

L'app per le funzioni si trova nella cartella api, separata dai singoli progetti di app Web. Tutte le app Web che usano i framework front-end effettuano chiamate alla stessa API. È possibile decidere come strutturare l'applicazione, ma per questo esempio è utile visualizzarli separati.

Configurare il metodo HTTP e l'endpoint della route

Notare che la cartella api/products-get contiene il file function.json. Questo file contiene la configurazione per la funzione.

Per convenzione, l'endpoint della route ha lo stesso nome della cartella che contiene la funzione. Poiché la funzione viene creata nella cartella products-get, l'endpoint della route viene generato come products-get per impostazione predefinita. Tuttavia, l'endpoint deve essere products.

Configurare la funzione:

  1. Aprire il file api/products-get/function.json.

  2. Si noti che i metodi consentono sia GET sia POST.

  3. Modificare la matrice di metodi in modo da consentire solo richieste GET.

  4. Aggiungere una voce "route": "products" dopo la matrice di metodi.

La funzione viene ora attivata in una richiesta HTTP GET per products. Il file function.json deve essere simile al codice seguente:

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

Aggiornare la logica della funzione

Il file index.js nella cartella api/products-get contiene la logica eseguita quando si effettua una richiesta HTTP alla route.

È necessario aggiornare la logica per ottenere i prodotti. Il modulo JavaScript /shared/product-data.js contiene la logica di accesso ai dati. Il modulo product-data espone una funzione getProducts per ottenere i prodotti per la lista della spesa.

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

  1. Aprire il file api/products-get/index.js.

  2. Sostituirne il contenuto con il codice seguente:

    const data = require('../shared/product-data');

module.exports = async function (context, req) {
  try {
    const products = data.getProducts();
    context.res.status(200).json(products);
  } catch (error) {
    context.res.status(500).send(error);
  }
};

La tua funzione otterrà i prodotti e li restituirà con il codice di stato 200, quando la richiesta riesce.

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

La condivisione di risorse tra le origini (CORS) non è un aspetto di cui preoccuparsi 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.

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

  1. Creare un file denominato api/local.settings.json.

  2. Aggiungere il contenuto seguente al file:

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Nota

Il file local.settings.json è elencato nel file .gitignore e questo evita il push del file in GitHub. Il motivo è che nel file potrebbero essere archiviati segreti che e non è opportuno che finiscano in GitHub. Ecco perché è stato necessario creare il file durante la creazione del repository dal modello.

Eseguire l'API

È arrivato il momento di osservare l'app Web e il progetto di Funzioni di Azure in esecuzione insieme. Iniziare eseguendo il progetto di Funzioni di Azure in locale seguendo questa procedura:

Nota

Assicurati di installare Azure Functions Core Tools, che ti consentirà di eseguire Funzioni di Azure in locale.

  1. Aprire un terminale Git e passare alla cartella api:

    cd api

  2. Eseguire l'app Funzioni di Azure in locale:

    npm install

    npm start

Eseguire l'app Web

L'API è in esecuzione. È ora necessario configurare l'app front-end per inviarne le richieste HTTP all'API. L'app front-end viene eseguita su una porta diversa da quella dell'API, che usa la porta 7071. Ogni framework front-end può essere configurato per usare un proxy per inviare le richieste HTTP a una porta in modo sicuro.

Configurare la porta del proxy

Configurare il proxy per l'app front-end tramite i passaggi seguenti:

  1. Aprire il file angular-app/proxy.conf.json.

  2. Individuare l'impostazione target: 'http://localhost:7071'.

  3. Notare che la porta della destinazione punta a 7071.

  1. Aprire il file react-app/package.json.

  2. Individuare l'impostazione "proxy": "http://localhost:7071/",.

  3. Notare che la porta del proxy punta a 7071.

  1. Aprire il file svelte-app/rollup.config.js.

  2. Individuare la riga di codice const api = 'http://localhost:7071/api';.

  3. Nota che la porta dell'API punta a 7071.

  1. Aprire il file vue-app/vue.config.js.

  2. Individuare l'impostazione target: 'http://localhost:7071',.

  3. Notare che la porta della destinazione punta a 7071.

Eseguire l'app Web front-end

L'API è già in esecuzione sulla porta 7071. Quando esegui l'app Web, questa effettuerà le proprie richieste HTTP alla tua API. Eseguire l'app Web completando questi passaggi:

  1. Aprire una seconda istanza del terminale Git.

  2. Quindi, immetti questo comando per accedere alla cartella del framework front-end preferito:

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  3. Eseguire l'applicazione client front-end:

    npm start

    npm start

    npm run dev

    npm run serve

Passare all'app

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

  1. Passa a http://localhost:4200.
  1. Passa a http://localhost:3000.
  1. Passa a http://localhost:5000.
  1. Passa a http://localhost:8080.
  1. È stata compilata l'applicazione, che è ora in esecuzione in locale ed effettua richieste HTTP GET all'API. Arrestare ora l'app e l'API in esecuzione premendo CTRL+C nei terminali.

Passaggi successivi

L'app funziona in locale e il passaggio successivo consiste nel pubblicare l'app con l'API.