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 e digita WildRydes in API Name.

    4. Verifica che Edge optimized sia selezionato nel menu a discesa Endpoint Type. Nota: questa opzione è ideale con i servizi pubblici accessibili tramite Internet. Gli endpoint regionali in genere vengono utilizzati per le API a cui si accedere principalmente dalla stessa regione.

    5. 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. Scegli Create New Authrorizer.

    3. Digita WildRydes nel campo Authorizer name.

    4. Seleziona il tipo Cognito.

    5. Nel menu a discesa Region in Cognito User Pool, seleziona la regione in cui hai creato il pool di utenti nel secondo modulo (di default è selezionata la regione corrente).

    6. Digita WildRydes (o il nome che hai assegnato al pool di utenti) nel campo Cognito User Pool.

    7. Immetti Authorization come Token Source.

    8. Seleziona Create (Crea).

    Verifica la configurazione del responsabile dell'autorizzazione

    1. Apri una nuova scheda del browser e accedi a /ride.html nel 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 nella pagina /ride.html.

    4. Torna alla scheda in cui hai appena creato il protocollo di autorizzazione.

    5. Fai clic su Test nella parte inferiore della scheda per il protocollo di autorizzazione.

    6. Incolla il token di autorizzazione nel campo Authorization Token nella finestra a popup.

    7. Fai clic sul pulsante Test e controlla che il codice di risposta sia 200 e 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. Digita ride nel campo Resource Name.

    4. Verifica che l'opzione Resource Path sia impostata su ride.

    5. Seleziona Enable API Gateway CORS per la risorsa.

    6. Fai clic su Create Resource.

    7. Con la risorsa /ride selezionata, scegli Create Method nel menu a discesa Action.

    8. Seleziona POST dal nuovo menu a tendina visualizzato, quindi fai clic sul segno di spunta.

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

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

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

    12. Inserisci il nome della funzione creata nel modulo precedente, RequestUnicorn, nel campo Lambda Function.

    13. 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.

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

    15. Scegli la scheda Method Request.

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

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

  • Fase 4. 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. Immetti prod nel campo Stage Name.

    4. Scegli Deply (Distribuisci).

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

  • Fase 5. 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 bucket S3. Per completare questa operazione, accedi a /js/config.js nell'URL di base del sito Web e seleziona File, quindi Salva pagina con nome sul 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.

      Di seguito è disponibile un esempio di file config.js completo. 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. Apri il bucket collegato al sito Web e individua il prefisso della chiave js.

    4. Seleziona Upload.

    5. Seleziona Add files, quindi la copia locale di config.js e fai clic su Next.

    6. Seleziona Next senza modificare i valori di default nelle sezioni Set permissions e Set properties.

    7. Seleziona Upload nella sezione Review.

  • Fase 5. 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. Consulta /ride.html nel dominio del 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.