Creare un'API con Funzioni di Azure
È ora possibile creare un'API per l'app per la lista degli acquisti.
Funzioni di Azure
Uno dei principali vantaggi di App Web statiche di Azure è quello di ospitare l'app Web insieme a un'API creata con Funzioni di Azure. App Web statiche di Azure distribuisce a livello globale gli asset statici dell'app Web e ospita l'API in Funzioni di Azure. Con questa configurazione, si ottengono la disponibilità e la velocità garantite dalla distribuzione globale degli asset dell'app Web. È anche importante cosa non si ottiene.
Non sono necessarie la configurazione e la manutenzione di un server completo per il front-end o il back-end. Questa funzionalità è il punto ideale per App Web statiche di Azure: si ottiene la facilità di pubblicazione dell'app e dell'API con configurazione e manutenzione minime.
Funzioni di Azure rende disponibili gli endpoint delle route, non richiede la configurazione o la manutenzione di un server back-end completo e fornisce scalabilità orizzontale e ridimensionamento automatici su richiesta. Queste funzionalità rendono Funzioni di Azure un ottimo partner API per l'app Web della lista acquisti che serve asset statici.
App Web statiche di Azure genera un URL univoco per il sito, che è disponibile nella scheda Panoramica nel portale. L'API è disponibile tramite questo stesso URL aggiungendo /api all'URL.
API per la lista della spesa
L'app per la lista della spesa permette agli utenti di ottenere, aggiungere, aggiornare ed eliminare articoli nella propria lista. È quindi opportuno che l'API disponga di endpoint corrispondenti a queste esigenze.
Ecco i quattro endpoint:
| Metodi | Endpoint delle route | Endpoint API completo |
|---|---|---|
| GET | products |
api/products |
| POST | products |
api/products |
| PUT | products/:id |
api/products/:id |
| DELETE | products/:id |
api/products/:id |
Si noti che la route delle richieste HTTP GET verso api/prodotti. Il api prefisso è riservato agli endpoint API nell'app. È possibile definire qualsiasi altra route in base alle esigenze del sito, ma api punta sempre all'app Funzioni di Azure.
Creare un'API per l'app Web
Fino a ora è stato usato un framework front-end. A breve, si aggiunge un'API e la si connette all'app front-end. Il repository include un progetto Api che contiene un progetto di Funzioni di Azure incompleto ed endpoint HTTP per richieste PUT, POST e DELETE per i prodotti. L'API è priva della funzione HTTP GET. È possibile completare l'API del progetto di Funzioni di Azure e aggiungere la funzione mancante, quindi connettere l'API all'app Web front-end.
Visualizzare in anteprima le modifiche apportate all'app Web
Prima di apportare modifiche a un'app, è consigliabile creare un nuovo ramo per le modifiche. Quando si completa l'API per l'app, si apportano diverse modifiche, quindi si crea un ramo per queste modifiche.
Dopo aver apportato le modifiche, è necessario visualizzarle in esecuzione prima di decidere di unire le modifiche. Dopo aver creato una richiesta pull dal nuovo ramo al ramo principale , GitHub Action compila l'app e l'API e le distribuisce entrambi in un URL di anteprima. Questo URL di anteprima consente di lasciare l'app Web in esecuzione con App Web statiche di Azure, ma anche di visualizzare un secondo URL con i risultati della richiesta pull.
Configurare la comunicazione tra l'app Web e l'API
Quando si esegue l'API in locale, per impostazione predefinita viene usata la porta 7071. L'app Web usa una porta locale diversa. Quando l'app Web tenta di effettuare una richiesta HTTP dalla porta alla porta 7071 dell'API, l'azione è nota come Condivisione risorse tra le origini (CORS). Il browser impedisce il completamento della richiesta HTTP a meno che il server API non consenta di continuare la richiesta.
Quando si pubblica in App Web statiche di Azure, non è necessario preoccuparsi di CORS. App Web statiche di Azure configura automaticamente l'app in modo che possa comunicare con l'API su Azure usando un proxy inverso. Un proxy inverso permette all'app Web e all'API di apparire come appartenenti allo stesso dominio Web. Di conseguenza, è necessario configurare la condivisione di risorse tra le origini solo in caso di esecuzione in locale.
Passaggi successivi
È ora possibile creare l'API e configurare gli endpoint HTTP per l'app per la lista della spesa.