Developer Center/Getting Started/Hands-on/...(Centro Sviluppatori/Introduzione/Esercitazione pratica/...

Nozioni di base su AWS

Creazione di un'applicazione Web serverless

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

Creazione di un'applicazione Web serverless

Modulo 4 - Implementazione di un'API RESTful

In questo modulo Amazon API Gateway sarà utilizzato per esporre la funzione Lambda creata nel modulo precedente come API RESTful.

Panoramica

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-03

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 richiesto per il completamento

15 minuti

 Servizi utilizzati

Implementazione

  • Creazione di una nuova API REST

    a. Nella Console di gestione AWS, fai clic su Servizi quindi seleziona API Gateway nella sezione Servizi applicazione.
    b. Scegli Crea API.
    c. Seleziona Nuova API e specifica WildRydes in Nome API.
    d. Verifica che Ottimizzato per l'edge sia selezionato nel menu a discesa 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 AWS.
    e. Scegli Crea API.

  • Creazione di un'autorizzazione del bacino di utenza 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.

    a. Nell'API appena creata, scegli Autorizzazioni.

    b. Seleziona Crea nuova autorizzazione.

    c. Digita WildRydes nel campo Nome autorizzazione.

    d. Seleziona il tipo Cognito.

    e. Nel menu a discesa Regione in Bacino di utenza Cognito, seleziona la regione in cui è stato creato il bacino d’utenza nel modulo 2 (per impostazione predefinita è selezionata la regione corrente).

    f. Digita WildRydes (o il nome assegnato al bacino di utenza ) nel campo di input Bacino d’utenza Cognito.

    g. Immettere Autorizzazione come Origine token.

    h. Scegli Crea.


    Verifica della configurazione dell'autorizzazione

    j. Apri una nuova scheda del browser e passa a /ride.html nel dominio del sito Web.

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

    l. Copia il token di autorizzazione dalla notifica nella pagina /ride.html,

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

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

    o. Incolla il token di autorizzazione nel campo Token autorizzazione nella finestra a comparsa.

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

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

    a. Nel riquadro di navigazione sinistro, fai clic su Risorse nell'API WildRydes.

    b. Nel menu a discesa Operazioni scegliere Crea risorsa.

    c. Digita ride nel campo Nome risorsa.

    d. Verifica che l'opzione Percorso risorsa sia impostata su ride.

    e. Seleziona Abilita CORS API Gateway per la risorsa.

    f. Fai clic su Crea risorsa.

    g. Con la risorsa /ride appena creata selezionata, dal menu a discesa Operazioni seleziona Crea metodo.

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

    i. Seleziona Funzione Lambda come tipo di integrazione.

    j. Seleziona la casella Utilizza integrazione proxy Lambda.

    k. Selezionare la regione da utilizzare per Regione Lambda.

    l. Inserire il nome della funzione creata nel modulo precedente, RequestUnicorn, nel campo Funzione Lambda.

    m. Scegli 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.

    n. Quando viene richiesto di autorizzare Amazon API Gateway a richiamare la funzione, seleziona OK.

    o. Seleziona la scheda Richiesta metodo.

    Seleziona l'icona della matita accanto a Autorizzazione.

    q. Seleziona l'autorizzazione WildRydes del pool di utenti di Cognito dall'elenco a discesa e fai clic sull'icona con il segno di spunta.

  • Distribuzione dell'API

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

    a. Nell'elenco a discesa Operazioni, seleziona Distribuisci API.
    b. Seleziona Nuova fase nell'elenco a discesa Fase implementazione.
    c. Specifica prod nel campo Nome fase.
    d. Scegli Implementa.
    e. Prendi nota del valore di URL chiamata. Verrà utilizzato nella sezione successiva.

  • Aggiorna la configurazione del sito 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.

    a. Apri il file config.js in un editor di testo.
    b. Aggiorna l'impostazione invokeUrl nella chiave api del file config.js. Utilizza il valore del campo URL chiamata per la fase di implementazione creata nella sezione precedente.

    Di seguito è disponibile un esempio di file config.js completo. Tenere presente che 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, 
    
        } 
    
    };

    c. Salva il file modificato e inseriscilo nel repository Git in modo che sia distribuito automaticamente nella console Amplify.

    $ git push
    
  • Convalida l'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.

    a. Consulta /ride.html nel dominio del sito Web.
    b. Se vieni reindirizzati alla pagina di accesso, accedi con l'utente creato nel modulo precedente.
    c. Una volta caricata la mappa, fai clic su un punto qualsiasi per impostare una posizione di incontro.
    d. Seleziona Unicorno richiesta. Dovrebbe essere 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.

Questo modulo è stato utile?

Grazie
Facci sapere cosa ti è piaciuto.
Chiudi
Spiacenti di non esserti stati d'aiuto
C'è qualcosa di obsoleto, ambiguo o approssimativo? Aiutaci a migliorare questo tutorial con il tuo feedback.
Chiudi

Arresto delle risorse