Creare un'API con Funzioni di Azure
A questo punto, è necessario creare un'API per l'app per la lista della spesa.
Funzioni di Azure
Uno dei maggiori vantaggi di App Web statiche di Azure è che ospita l'app Web e un'API compilata insieme 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 è necessario un server completo per il front-end o il back-end per configurare e gestire. Con App Web statiche di Azure, si raggiunge il punto ideale: si ottiene la facilità di pubblicazione dell'app e dell'API con una configurazione e una 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. Tutto questo fa di Funzioni di Azure un ottimo partner di API per l'app Web per la lista della spesa, che rende disponibili gli asset statici.
App Web statiche di Azure genera un URL univoco per il sito, disponibile nella scheda Panoramica del portale. L'API è disponibile a 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 creati:
| Metodi | Endpoint delle route | Endpoint API completo |
|---|---|---|
| GET | products |
api/products |
| POST | products |
api/products |
| PUT | products/:id |
api/products/:id |
| ELIMINA | products/:id |
api/products/:id |
Si noti che le richieste HTTP GET vengono instradate verso api/products. Il prefisso api è riservato agli endpoint API nell'app. È possibile definire qualsiasi altra route in base alle esigenze del sito, ma api punterà sempre all'app Funzioni di Azure.
Creare un'API per l'app Web
Fino a ora è stato usato un framework front-end. A breve è possibile aggiungere un'API e connetterla all'app front-end. Il repository include una cartella api-starter che contiene un progetto di Funzioni di Azure incompleto ed endpoint HTTP per richieste PUT, POST e DELETE dei prodotti.
L'API è priva della funzione HTTP GET. Completare l'API del progetto Funzioni di Azure e aggiungere la funzione mancante. Connettere quindi l'API all'app Web front-end.
Anteprima delle modifiche apportate all'app Web
Prima di apportare modifiche a un'app, è consigliabile creare un nuovo ramo per le modifiche. Poiché si apportano diverse modifiche per completare l'API per l'app, è necessario creare 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 in un URL di anteprima. Questa funzionalità consente di lasciare l'app Web in esecuzione con App Web statiche di Azure, ma anche di visualizzare una seconda istanza di anteprima con i risultati della richiesta pull.
Comunicazione tra l'app Web e l'API
Quando si esegue l'API in locale con Funzioni di Azure, viene eseguita sulla porta 7071 per impostazione predefinita. L'app Web usa una porta locale diversa. Quando l'app Web tenta di effettuare una richiesta HTTP dalla sua porta alla porta 7071 dell'API, la richiesta viene denominata Condivisione delle Risorse tra Origini Diverse (CORS). Il browser impedisce il completamento della richiesta HTTP, a meno che il server API non consenta alla richiesta di procedere.
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. 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.