In questo modulo utilizzerai Amazon API Gateway per esporre la funzione Lambda che hai creato nel modulo precedente come API RESTful. Questa API sarà accessibile sulla rete Internet pubblica. Verrà protetta utilizzando il pool di utenti Amazon Cognito creato nel modulo precedente. Grazie all'utilizzo di questa configurazione trasformerai il tuo sito Web ospitato staticamente in un'applicazione Web dinamica aggiungendo JavaScript lato client che consente ad AJAX di effettuare chiamate alle API esposte.

Serverless_Web_App_LP_assets-05

Il diagramma qui sopra mostra il modo in cui il componente API Gateway che creerai in questo modulo si integra con i componenti esistenti creati in precedenza. Gli elementi disattivati sono parti che hai già implementato nelle fasi precedenti.

Il sito Web statico che hai distribuito nel primo modulo dispone già di una pagina configurata per l'interazione con le API che creerai in questo modulo. La pagina /ride.html ha una semplice interfaccia basata su mappe per richiedere una corsa con l'unicorno. Dopo l'autenticazione attraverso la pagina /signin.html, gli utenti saranno in grado di selezionare il loro punto di raccolta facendo clic su un punto sulla mappa e quindi richiedere una corsa selezionando il pulsante "Richiedi unicorno" nell'angolo in alto a destra.

Questo modulo si concentrerà sui passaggi necessari per creare i componenti cloud dell'API, ma se sei interessato a sapere come funziona il codice del browser che chiama questa API, puoi dare un'occhiata al file ride.js del sito Web. In questo caso l'applicazione utilizza il metodo jQuery ajax () per effettuare la richiesta remota.

Tempo per il completamento: 15 minuti

Servizi utilizzati: Amazon API Gateway e AWS Lambda


Segui i passaggi indicati nelle istruzioni seguenti per creare la tua API REST. Fai clic sul numero della fase per espandere la sezione.

  • Fase 1. Crea una nuova API REST


    1. Nella Console di gestione AWS, fai clic su Services (Servizi) e seleziona API Gateway sotto a Application Services (Servizi dell’applicazione).

    2. Scegli Create API (Crea API).

    3. Seleziona New API (Nuova API) e immetti WildRydes come API Name (Nome API).

    4. Scegli Create API (Crea API)

  • Fase 2. Crea un responsabile dell'autorizzazione per il pool di utenti Cognito

    Amazon API Gateway è in grado di utilizzare i token JWT restituiti dal pool di utenti Cognito per autenticare le chiamate API. In questo passaggio configurerai un responsabile dell'autorizzazione per la tua API per utilizzare il pool di utenti creato nel Modulo 2.

    Nella console di Amazon API Gateway, crea un nuovo responsabile dell'autorizzazione per il pool di utenti Cognito per la tua API. Configuralo con i dettagli del pool di utenti creato nel modulo precedente. Puoi eseguire un test della configurazione nella console copiando e incollando il token di autorizzazione che ti viene presentato dopo aver eseguito l'accesso tramite la pagina /signin.html del tuo sito Web.


    1. Sotto le nuove API, scegli Responsabili dell'autorizzazione.

    2. Dall’elenco a discesa Create (Crea) seleziona Cognito User Pool Authorizer (Responsabile dell’autorizzazione del pool di utenti Cognito).

    3. Seleziona la regione in cui è stato creato il pool di utenti Cognito nel modulo 2.

    4. Seleziona il pool di utenti Cognito WildRydes dall'elenco a discesa.

    5. Inserisci WildRydes come nome per il Responsabile dell'autorizzazione.

    6. Verifica che il token sorgente dell'identità sia impostato su Autorizzazione.

    7. Seleziona Create (Crea).

    Verifica la configurazione del responsabile dell'autorizzazione

    1. Apri una nuova scheda del browser e visita /ride.html sotto al dominio del tuo sito Web.

    2. Se vieni reindirizzato alla pagina di accesso, accedi con l'utente creato nell'ultimo modulo. Verrai reindirizzato a /ride.html.

    3. Copia il token di autorizzazione dalla notifica di /ride.htmle incollalo nel campo Identity token (Token di identità) nella console di API Gateway.

    4. Scegli Test (Esegui test) e controlla che le richieste per i tuoi utenti siano visualizzate.

  • Fase 3. Crea una nuova risorsa e un nuovo metodo

    Crea una nuova risorsa denominata /corsa all'interno dell'API. Poi crea un metodo POST per quella risorsa e configuralo per l'utilizzo di un'integrazione proxy Lambda basata sulla funzione RequestUnicorn creata nel primo passaggio di questo modulo.


    1. Sul pannello di navigazione a sinistra fai clic su Resources (Risorse) sotto l'API WildRydes.

    2. Dal menu a tendina Actions (Azioni) seleziona Create Resource (Crea risorsa).

    3. Inserisci corsa come Resource Name (Nome della risorsa).

    4. Assicurati che il Resource Path (Percorso della risorsa) sia impostato su corsa.

    5. Fai clic su Create Resource (Crea risorsa).

    6. Con la risorsa appena creata /corsa selezionata, dal menu a discesa Action (Azione) seleziona Create Method (Crea metodo).

    7. Seleziona POST dal nuovo menu a tendina che viene visualizzato, quindi fai clic sulla spunta.

    8. Seleziona Lambda Function (Funzione Lambda) per il tipo di integrazione.

    9. Seleziona la casella per Use Lambda Proxy integration (Utilizza l'integrazione proxy Lambda).

    10. Seleziona la regione che stai utilizzando per Lambda Region (Regione Lambda).

    11. Inserisci il nome della funzione creata nel modulo precedente, RequestUnicornper Lambda Function (Funzione Lambda).

    12. Seleziona Save (Salva). Attenzione, se ricevi un messaggio di errore che ti informa che la tua funzione non esiste, controlla che la regione selezionata corrisponda a quella utilizzato nel modulo precedente.

    13. Quando viene richiesto di dare il permesso di richiamare la funzione ad Amazon API Gateway, scegli OK.

    14. Scegli il pannello Method Request (Richiesta di metodo).

    15. Scegli l’icona a forma di matita accanto a Authorization (Autorizzazione).

    16. Seleziona il responsabile dell'autorizzazione Cognito WildRydes del pool di utenti nel menu a tendina e fai clic sulla spunta.

  • Fase 4. Abilita CORS

    I browser Web moderni prevengono le richieste HTTP dagli script sulle pagine ospiti di un dominio alle API ospiti di un altro dominio, a meno che non l'API non fornisca intestazioni di risposta che consentano esplicitamente la condivisione della risorsa di origine incrociata (CORS). Nella console di Amazon API Gateway è possibile aggiungere la configurazione necessaria per inviare le intestazioni CORS appropriate sotto il menu azione quando si una risorsa è selezionata. È necessario abilitare CORS per POST e OPTIONS sulla risorsa /requestunicorn. Per semplicità, puoi impostare il valore dell'intestazione Access-Control-Allow-Origin in '*', ma in un'applicazione di produzione devi sempre autorizzare esplicitamente i domini autorizzati per mitigare gli attacchi cross-site request forgery (CSRF).

    Per ulteriori informazioni sulle configurazioni CORS in generale, guarda https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS


    1. Nella console di Amazon API Gateway, nel pannello centrale, seleziona la risorsa /corsa .

    2. Dall’elenco a discesa Actions (Azioni) seleziona Enable CORS (Abilita CORS).

    3. Utilizza le impostazioni di default e scegli Abilita CORS e sostituisci le intestazioni CORS esistenti.

    4. Scegli Yes, replace existing values (Sì, sostituisci i valori esistenti).

    5. Attendi che un segno di spunta appaia accanto a ogni passaggio.

  • Fase 5. Distribuisci la tua API

    Dalla console di Amazon API Gateway, scegli Azioni, Distribuisci API. Ti verrà richiesto di creare un nuovo stadio di sviluppo. È possibile utilizzare prod come nome dello stadio.


    1. Nel menu a tendina Actions (Azioni) seleziona Deploy API (Distribuisci API).

    2. Seleziona [New Stage] nel menu a discesa Deployment stage (Stadio di distribuzione).

    3. Inserisci prod come Stage Name (Nome dello stadio).

    4. Scegli Deply (Distribuisci).

    5. Ricorda l'URL Invoke. Lo utilizzerai nella prossima sezione.

  • Fase 6. Aggiorna il file di configurazione del sito Web

    Aggiorna il file /js/config.js nell'implementazione del tuo sito Web includendo l'URL che invoca lo stadio appena creato. Copia l'URL direttamente dall'inizio della pagina di modifica dello stadio nella console di Amazon API Gateway e incollarlo nella chiave _config.api.invokeUrl del file /js/config.js dei tuoi siti. Assicurati che dopo l'aggiornamento il file di configurazione contenga ancora gli aggiornamenti effettuati nel modulo precedente per il tuo pool di utenti Cognito.


    Se hai completato il modulo 2 manualmente, puoi modificare il file config.js salvato in locale. Se hai utilizzato il modello di AWS CloudFormation, devi prima scaricare il file config.js dal tuo bucket S3. Per farlo, visita /js/config.js sotto l'URL di base per il tuo sito Web e scegli File, quindi scegli Salva pagina con nome dal tuo browser.

    1. Apri il file config.js in un editor di testo.

    2. Aggiorna l’impostazione invokeUrl sotto la chiave api nel file config.js. Imposta il valore di Invoke URL per lo stadio di implementazione che hai creato nella sezione precedente.

      Un esempio di file config.js completo è incluso qui sotto. Attenzione, i valori effettivi del tuo file saranno diversi.

    finestra._config = {

        cognito: {

            userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         

            userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv

            region: 'us-west-2' // e.g. us-east-2

        },

        api: {

            invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod,

        }

    };

    1. Salva le tue modifiche in locale.

    2. Nella Console di gestione AWS, scegli Services (Servizi) quindi seleziona S3 sotto Storage.

    3. Passa al bucket del sito Web e individua il prefisso della chiave js.

    4. Scegli Upload (Carica).

    5. Scegli Add files (Aggiungi file), seleziona la copia locale di config.js e fai clic su Next (Successivo).

    6. Scegli Next (Successivo) senza modificare le impostazioni predefinite attraverso le sezioni imposta autorizzazioni e imposta proprietà .

    7. Scegli Upload (Carica) nella sezione Review (Revisione).

  • Fase 7. Convalida l'implementazione

    Nota:°è possibile che si verifichi un ritardo tra l'aggiornamento del file config.js nel tuo bucket S3 e il momento in cui contenuto aggiornato sarà visibile nel tuo browser. Inoltre, cancella la cache del browser prima di eseguire la procedura seguente.


    1. Visita /ride.html sotto il dominio del tuo sito Web.

    2. Se vieni reindirizzato alla pagina di accesso, accedi con l'utente creato nel modulo precedente.

    3. Quando la mappa si è caricata, fai clic dove preferisci per impostare un punto di raccolta.

    4. Scegli Request Unicorn. Dovresti visualizzare una notifica nella barra a destra che conferma che un unicorno è stato inviato e visualizzare un'icona volare verso il punto di ritiro scelto.