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. Da qui si estende l'API con una nuova funzione usando l'estensione 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 Azure Function.
  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'applicazione web.

Eseguire l'app per le funzioni

Aggiungere ora un'API e connetterla all'app front-end. La api-starter cartella 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. Si sta per completare l'API per l'app, quindi ora è un buon momento per creare un ramo.

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

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

  3. Selezionare Crea nuovo ramo.

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

È stato appena creato il ramo Git api .

Completare l'API di Funzioni di Azure

Per completare l'API, iniziare spostando il codice DELL'API iniziale in una cartella denominata api. È stato immesso questo nome di cartella per il api_location quando è stata creata 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 essere nella cartella radice del progetto.

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

    git mv api-starter api

  5. Aprire il riquadro comandi premendo F1.

  6. Digitare e selezionare Git: Commit All.

  7. Immettere l'API del messaggio di commit e premere INVIO.

Ora viene visualizzata una cartella api nello strumento di esplorazione di Visual Studio Code. La cartella api contiene il progetto 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 ELIMINA products/:id

Creare la funzione HTTP PUT

L'API include delle route per modificare i prodotti nella lista della spesa, ma è priva di una route per recuperare i prodotti. Aggiungiamolo ora.

Installare l'estensione Funzioni di Azure per Visual Studio Code

È possibile creare e gestire 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.

Annotazioni

Assicurarsi di installare Azure Functions Core Tools, che consente 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 richiesto di creare una funzione, selezionare Trigger HTTP.

  4. Immettere products-get come nome della funzione.

  5. Selezionare Anonimo come livello di autenticazione.

Annotazioni

L'app Funzioni si trova nella api cartella , che la separa 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 consente di visualizzarli separati.

Configurare il metodo HTTP e l'endpoint della route

Si noti 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 di route viene generato come products-get, per impostazione predefinita. Tuttavia, vuoi che l'endpoint sia prodotti.

Configurare la funzione:

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

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

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

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

La funzione viene ora attivata in una richiesta HTTP GET ai prodotti. Il function.json dovrebbe 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. La logica di accesso ai dati è disponibile nel modulo JavaScript /shared/product-data.js. Il product-data modulo espone una funzione getProducts per ottenere i prodotti per la lista degli acquisti.

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 funzione ottiene i prodotti e li restituisce con un codice di stato 200, quando ha esito positivo.

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

Non è necessario preoccuparsi di CORS quando si pubblica 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"
  }
}

Annotazioni

Il file local.settings.json è elencato nel file .gitignore e questo evita il push del file in GitHub. Il file è elencato in .gitignore perché è possibile archiviare segreti in esso che non si vuole in GitHub. Questo elenco è il motivo per cui è stato necessario creare il file quando è stato creato il repository dal modello.

Eseguire l'API

Ora è il momento di vedere l'app Web e il progetto di Funzioni di Azure lavorare insieme. Per iniziare, eseguire il progetto di Funzioni di Azure in locale seguendo questa procedura:

Annotazioni

Assicurarsi di installare Azure Functions Core Tools, che consente di eseguire Funzioni di Azure in locale.

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

    cd api

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

    npm install

    npm start

Eseguire l'app Web

L'API è in esecuzione. A questo punto è necessario configurare l'app front-end per effettuare la richiesta HTTP all'API. L'app front-end viene eseguita su una porta e l'API viene eseguita su una porta diversa (7071). Ogni framework front-end può essere configurato per indirizzare le richieste HTTP a una porta in sicurezza.

Configurare la porta proxy

Configurare il proxy per l'app front-end seguendo questa procedura:

  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. Si noti 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. Si noti 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. Ora, quando esegui l'app web, essa effettua le sue richieste HTTP alla tua API. Esegui la tua app web seguendo questi passaggi:

  1. Aprire una seconda istanza del terminale Git.

  2. Immettere quindi questo comando per passare 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

Accedi alla tua app

È arrivato il momento di osservare l'applicazione in esecuzione locale con l'API di Azure Functions.

  1. Passare a http://localhost:4200.
  1. Passare a http://localhost:3000.
  1. Passare a http://localhost:5000.
  1. Passare a http://localhost:8080.
  1. È 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 premendo CTRL-C nei terminali.

Passaggi successivi

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