Progetti in AWS:

Creazione di un'applicazione Web serverless

con AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB e Amazon Cognito

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

Introduzione

Progression-Bar-07

Hosting di un sito Web statico

Progression-Bar-08

Gestione degli utenti

Progression-Bar-09

Creazione di un back-end serverless

Progression-Bar-16

Distribuzione di un'API RESTful

Progression-Bar-11

Arresto delle risorse

Modulo 4. API RESTful

In questo modulo utilizzerai Amazon API Gateway per esporre la funzione Lambda che hai creato nel modulo precedente come API RESTful. L'API sarà accessibile pubblicamente su Internet. Sarà protetta utilizzando il pool di utenti Amazon Cognito creato nel modulo precedente. Utilizzando questa configurazione, il sito Web ospitato staticamente verrà trasformato in un'applicazione Web dinamica aggiungendo JavaScript sul lato client che effettua chiamate AJAX alle API esposte.

Panoramica dell'architettura

Serverless_Web_App_LP_assets-05

Il diagramma precedente mostra come il componente di API Gateway che verrà creato in questo modulo si integra con i componenti esistenti creati in precedenza. Gli elementi in grigio sono voci già implementate nelle fasi precedenti.

Il sito Web statico distribuito nel primo modulo include già una pagina configurata per interagire con l'API che compilerai in questo modulo. La pagina /ride.html include una semplice interfaccia basata una mappa per la richiesta di un giro con un unicorno. Dopo aver effettuato l'autenticazione tramite la pagina /signin.html, gli utenti saranno in grado di selezionare la propria posizione di incontro facendo clic su un punto sulla mappa e quindi richiedendo un passaggio scegliendo il pulsante "Request Unicorn" (Richiedi unicorno) nell'angolo in alto a destra.

Questo modulo si concentrerà sulle fasi necessarie per creare i componenti cloud dell'API. Per informazioni su come funziona nel browser il codice per chiamare l'API, esamina il file ride.js del sito Web. In questo caso, l'applicazione utilizza il metodo ajax() di jQuery per effettuare la richiesta remota.

Tempo necessario per completare il modulo: 15 minuti

Servizi utilizzati: Amazon API Gateway e AWS Lambda

Istruzioni per l'implementazione

Segui le istruzioni dettagliate riportate di seguito per creare l'API REST. Fai clic sul numero di ciascuna fase per espandere la sezione.

  • Fase 1. Creazione di una nuova API REST

    Creazione di una nuova API REST

    1. Nella Console di gestione AWS, fare clic su Services (Servizi) quindi selezionare API Gateway nella sezione Application Services (Servizi applicazione).

    2. Scegliere Create API (Crea API).

    3. Selezionare New API (Nuova API) e immettere WildRydes come nome dell'API.

    4. Verificare che Edge optimized (Ottimizzato per i confini) sia selezionato nel menu a discesa Endpoint Type (Tipo di endpoint). 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. Scegliere Create API (Crea API).

  • Fase 2. Creazione di un'autorizzazione del pool di utenti di Cognito.

    Creazione di un'autorizzazione del pool di utenti di Cognito.

    Amazon API Gateway può utilizzare i token JWT restituiti dai pool di utenti Cognito per autenticare le chiamate API. In questa fase configurerai un'autorizzazione per la tua API per utilizzare il pool di utenti creato nel Modulo 2.

    Nella console di Amazon API Gateway, crea una nuova autorizzazione del pool di utenti Cognito per la tua API. Configuralo con i dettagli del pool di utenti creato nel modulo precedente. Puoi testare la configurazione nella console copiando e incollando il token di autorizzazione presentato dopo aver effettuato l'accesso tramite la pagina /signin.html del tuo sito Web attuale.

    1. Nell'API appena creata, scegliere Authorizers (Autorizzazioni).

    2. Selezionare Create New Authorizer (Crea nuove autorizzazioni).

    3. Digitare WildRydes nel campo Authorizer name (Nome autorizzazione).

    4. Selezionare il tipo Cognito.

    5. Nel menu a discesa Region (Regione) in Cognito User Pool (Pool di utenti Cognito), selezionare la regione in cui è stato creato il pool di utenti nel modulo 2 (per impostazione predefinita è selezionata la regione corrente).

    6. Digitare WildRydes (o il nome assegnato al pool di utenti) nel campo di input Cognito User Pool (Pool di utenti Cognito).

    7. Immettere Authorization (Autorizzazione) come Token Source (Origine token).

    8. Selezionare Create (Crea).

    Verifica della configurazione dell'autorizzazione

    1. Aprire una nuova scheda del browser e accedere a /ride.html nel dominio del sito Web.

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

    3. Copiare il token di autorizzazione dalla notifica nella pagina /ride.html,

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

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

    6. Incollare il token di autorizzazione nel campo Authorization Token (Token autorizzazione) nella finestra a popup.

    7. Fare clic sul pulsante Test e controllare che il codice di risposta sia 200 e che le richieste per gli utenti siano visualizzate.

  • Fase 3. Creazione di una nuova risorsa e di un nuovo metodo

    Creazione di una nuova risorsa e di un nuovo metodo

    Crea una nuova risorsa chiamata /ride nell'API. Quindi crea un metodo POST per quella risorsa e configuralo per utilizzare un'integrazione del proxy Lambda supportata dalla funzione RequestUnicorn creata nel primo passaggio di questo modulo.

    1. Nel riquadro di navigazione sinistro, fare clic su Resources (Risorse) nell'API WildRydes.

    2. Nel menu a discesa Actions (Operazioni) scegliere Create Resource (Crea risorsa).

    3. Digitare ride nel campo Resource Name (Nome risorsa).

    4. Verificare che l'opzione Resource Path (Percorso risorsa) sia impostata su ride.

    5. Selezionare Enable API Gateway CORS (Abilita CORS API Gateway) per la risorsa.

    6. Fare clic su Create Resource (Crea risorsa).

    7. Con la risorsa appena creata /ride selezionata, dal menu a discesa Action (Operazione) selezionare Create Method (Crea metodo).

    8. Selezionare POST dal nuovo menu a discesa visualizzato, quindi fare clic sul segno di spunta.

    9. Selezionare Lambda Function (Funzione Lambda) come tipo di integrazione.

    10. Selezionare la casella Use Lambda Proxy integration (Utilizza interazione proxy Lambda).

    11. Selezionare la regione da utilizzare per Lambda Region (Regione Lambda).

    12. Inserire il nome della funzione creata nel modulo precedente, RequestUnicorn, nel campo Lambda Function (Funzione Lambda).

    13. Scegliere Save (Salva). Nota: se si verifica un errore che segnala che la funzione non esiste, verificare che la regione selezionata corrisponda a quella utilizzata nel modulo precedente.

    14. Quando viene richiesto di autorizzare Amazon API Gateway a richiamare la funzione, scegliere OK.

    15. Scegliere la scheda Method Request (Metodo richiesta).

    16. Selezionare l'icona della matita accanto a Authorization (Autorizzazione).

    17. Selezionare l'autorizzazione WildRydes del pool di utenti di Cognito dall'elenco a discesa e fare clic sull'icona con il segno di spunta.

  • Fase 4. Distribuzione dell'API

    Distribuzione dell'API

    Nella console di Amazon API Gateway, scegliere Actions (Operazioni), Deploy API (Distribuisci API). Verrà chiesto di creare una nuova fase. Immettere "prod" come nome della fase.

    1. Nell'elenco a discesa Actions (Operazioni) selezionare Deploy API (Distribuisci API).

    2. Selezionare la [nuova fase] nell'elenco a discesa Deployment stage (Fase distribuzione).

    3. Immettere prod nel campo Stage Name (Nome fase).

    4. Scegliere Deploy (Distribuisci).

    5. Prendere nota del valore di Invoke URL (URL chiamata). Verrà utilizzato nella sezione successiva.

  • Fase 5. Aggiornamento della configurazione del server Web

    Aggiornamento della configurazione del server Web

    Aggiorna il file /js/config.js nella distribuzione del sito Web per includere l'URL di chiamata della fase appena creata. Copia l'URL di chiamata direttamente dalla parte superiore della pagina dell'editor di fasi nella console di Amazon API Gateway e incollalo nella chiave _config.api.invokeUrl del file /js/config.js dei siti. Assicurati che quando aggiorni il file di configurazione, il file contenga ancora gli aggiornamenti effettuati nel modulo precedente per il pool di utenti Cognito.

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

    2. Aggiornare l'impostazione invokeUrl nella chiave api del file config.js. Utilizzare il valore del campo Invoke URL (URL chiamata) per la fase di distribuzione creata nella sezione precedente.

      Di seguito è disponibile un esempio di file config.js completo. Nota: i valori reali del file saranno diversi:

    window._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 il file modificato e inseriscilo nel repository Git in modo che sia distribuito automaticamente nella console Amplify.

    $ git push

  • Fase 5. Convalida dall'implementazione

    Convalida dall'implementazione

    Nota: è possibile che si verifichi un ritardo tra l'aggiornamento del file config.js nel bucket S3 e il momento in cui il contenuto aggiornato è visibile nel browser. Devi inoltre assicurarti di svuotare la cache del browser prima di eseguire le seguenti fasi.

    1. Consultare /ride.html nel dominio del sito Web.

    2. Se si viene reindirizzati alla pagina di accesso, accedere con l'utente creato nel modulo precedente.

    3. Dopo che la mappa è stata caricata, fare clic su un punto qualsiasi della mappa per impostare una posizione di incontro.

    4. Selezionare Request Unicorn (Richiedi unicorno). Dovrebbe venire visualizzata una notifica nella barra laterale destra che informa dell'arrivo di un unicorno e quindi l'icona dell'unicorno che vola fino al punto di incontro.

Successivo: Arresto delle risorse