Progetti in AWS:

Creazione di un'applicazione Web serverless

utilizzando AWS Lambda, Amazon API Gateway, Amazon S3, Amazon DynamoDB e Amazon Cognito

Introduzione

Hosting di un sito Web statico

Gestione degli utenti

Creazione di un back-end serverless

Distribuzione di un'API RESTful

Arresto delle risorse

Modulo 1. Hosting Web statico

In questo modulo configurerai Amazon Simple Storage Service (S3) per l'hosting delle risorse statiche necessarie per la tua applicazione Web. Nei moduli seguenti aggiungerai a queste pagine funzionalità dinamiche, utilizzando JavaScript per effettuare chiamate alle API RESTful remote create con AWS Lambda e Amazon API Gateway.

Panoramica dell'architettura

L'architettura di questo modulo è molto lineare. Tutti i contenuti Web statici, compresi HTML, CSS, JavaScript, immagini e altri file, verranno archiviati in Amazon S3. Gli utenti finali accederanno al tuo sito tramite l'URL del sito Web pubblico esposto da Amazon S3. Per rendere disponibile il tuo sito non hai bisogno di eseguire server Web o utilizzare altri servizi.

In questo modulo, utilizzerai l'URL dell'endpoint del sito Web Amazon S3 fornito da noi, nel formato http://{nome-bucket}.s3-website.{region}.amazonaws.com. In un contesto reale, spesso si preferisce utilizzare un dominio personalizzato per ospitare il proprio sito. Per informazioni su come utilizzare un tuo dominio, segui la procedura per configurare un sito Web statico con un dominio personalizzato nella documentazione di Amazon S3.

Tempo necessario per completare il modulo: 30 minuti

Servizi utilizzati: Amazon S3

Modello di CloudFormation: se hai già familiarità con Amazon S3 o vuoi semplicemente passare a utilizzare Lambda e API Gateway, puoi avviare uno dei seguenti modelli di AWS CloudFormation nella regione che preferisci e creare automaticamente le risorse necessarie.

Regione Modello di CloudFormation
Stati Uniti orientali (Virginia settentrionale) Avvia stack >
Stati Uniti orientali (Ohio) Avvia stack >
Stati Uniti occidentali (Oregon) Avvia stack >
UE (Francoforte) Avvia stack >
UE (Irlanda) Avvia stack >
UE (Londra) Avvia stack >
Asia Pacifico (Tokyo) Avvia stack >
Asia Pacifico (Seul) Avvia stack >
Asia Pacifico (Sydney) Avvia stack >
Asia Pacifico (Mumbai) Avvia stack >

Istruzioni per l'avvio di CloudFormation

  1. Scegliere il link Avvia stack riportato qui sopra relativo alla regione desiderata.

  2. Fare clic su Next (Avanti) nella pagina Select Template (Seleziona modello).

  3. Fornire un nome univoco a livello globale per Website Bucket Name (Nome bucket sito Web), come ad esempio wildrydes-yourname, e scegliere Next (Avanti).

  4. Nella pagina Options (Opzioni), mantenere tutte le impostazioni predefinite e fare clic su Next (Avanti).

  5. Nella pagina Review (Revisione), selezionare la casella per accettare la creazione delle risorse IAM da parte di CloudFormation e fare clic su Create (Crea).

    Questo modello utilizza una risorsa statica per copiare gli asset del sito Web statico da un bucket S3 centralizzato a un bucket dedicato. Per poter scrivere nel nuovo bucket nell'account dell'utente, la risorsa personalizzata deve creare un ruolo IAM da assumere che abbia queste autorizzazioni.

  6. Attendere che lo stack wildrydes-webapp-1 raggiunga lo stato CREATE_COMPLETE.

  7. Con lo stack wildrydes-webapp-1 selezionato, fare clic prima sulla scheda Outputs (Output) e poi sul link all'URL del sito Web.

  8. Verificare che il caricamento della home page Wild Rydes avvenga correttamente e passare al modulo successivo, Gestione degli utenti.

Istruzioni per l'implementazione

Segui le istruzioni dettagliate riportate di seguito per ospitare un sito Web statico. Fai clic sul numero di ciascuna fase per espandere la sezione.

  • Fase 1. Seleziona una regione

    Seleziona una regione

    È possibile distribuire questa applicazione Web in qualsiasi regione AWS in cui siano supportati tutti i servizi utilizzati dall'applicazione, quali Amazon Cognito, AWS Lambda, Amazon API Gateway, Amazon S3 e Amazon DynamoDB.

    Per sapere in quali regioni sono disponibili i servizi supportati, consulta la tabella delle regioni. Ecco alcune delle regioni supportate tra cui scegliere:

    • Stati Uniti orientali (Virginia settentrionale)
    • Stati Uniti orientali (Ohio)
    • Stati Uniti occidentali (Oregon)
    • UE (Francoforte)
    • UE (Irlanda)
    • UE (Londra)
    • Asia Pacifico (Tokyo)
    • Asia Pacifico (Seul)
    • Asia Pacifico (Sydney)
    • Asia Pacifico (Mumbai)

     

    Scegli la regione dall'elenco a discesa nell'angolo in alto a destra della Console di gestione AWS.

    (fai clic per ingrandire l'immagine)

  • Fase 2. Crea un bucket S3

    Crea un bucket S3

    Amazon S3 consente di ospitare siti Web statici senza dover configurare o gestire server Web. In questa fase creerai un nuovo bucket S3 che servirà per l'hosting di tutti gli asset statici (ad esempio HTML, CSS, JavaScript e file di immagine) per la tua applicazione Web. 

    In questa fase, utilizzerai la console o AWS CLI per creare un bucket Amazon S3. Ricorda che il nome del bucket deve essere univoco a livello globale. Consigliamo di scegliere un nome come wildrydes-nome-cognome. Se visualizzi un errore perché il nome del bucket esiste già, prova ad aggiungere altri numeri o caratteri fino a trovare un nome non utilizzato.

    1. Dalla Console di gestione AWS, scegliere Services (Servizi) e selezionare S3 in Storage.
    2. Scegliere +Create bucket (+Crea bucket)
    3. Fornire un nome univoco a livello globale per il bucket, ad esempio wildrydes-nome-cognome. Se visualizzi un errore perché il nome del bucket esiste già, prova ad aggiungere altri numeri o caratteri fino a trovare un nome non utilizzato.
    4. Scegliere dall'elenco a discesa la regione scelta per questa esercitazione.
    5. Scegliere Create (Crea) in basso a sinistra della finestra di dialogo, senza selezionare un bucket da cui copiare le impostazioni.

  • Fase 3. Carica contenuti

    Carica contenuti

    In questa fase, caricherai nel tuo bucket S3 gli asset del sito Web per questo modulo. A questo scopo puoi utilizzare la Console di gestione AWS (è necessario il browser Google Chrome), AWS CLI o il modello di CloudFormation fornito. Se AWS CLI è già installata e configurata sul tuo computer locale, ti consigliamo di preferire questo metodo. In alternativa, se hai già installata la versione più recente di Google Chrome, utilizza la console. 

    Istruzioni dettagliate per la console

    Per caricare tutti i file e le sottodirectory in una directory locale tramite la Console di gestione AWS, devi utilizzare la versione più recente del browser Web Chrome. Se Chrome non è un'opzione praticabile, segui le istruzioni per utilizzare AWS CLI o il modello di CloudFormation fornito.

    1. Scaricare un archivio di questo repository tramite questo link.

    2. Decomprimere l'archivio scaricato nel computer locale.

    3. Aprire la Console di gestione AWS in Chrome. Scegliere Servizi quindi selezionare S3 in Storage.

    4. Selezionare il bucket creato nella fase precedente e assicurarsi di visualizzare la scheda Panoramica.

    5. Aprire Esplora file di Windows o Finder di macOS e accedere ai contenuti estratti dal file zip scaricato in precedenza.

    6. Accedere alla directory WebApplication/1_StaticWebHosting/website sul computer locale.

    7. Selezionare tutti i file e le sottodirectory nella directory del sito Web. Verificare che la directory in sé non sia selezionata.

    8. Trascinare i file selezionati dal file system locale ai contenuti nella scheda Panoramica nella console S3.

    9. Nella finestra di dialogo visualizzata, in basso a sinistra, selezionare Carica.

    10. Attendere il termine del caricamento, quindi verificare che i contenuti della directory del sito Web siano presenti nella console S3. Se è presente la sola directory website, è necessario rimuoverla dal bucket e seguire di nuovo la procedura, facendo attenzione a selezionare solo i contenuti della directory prima di trascinarli nella console S3.

    Istruzioni dettagliate per l'interfaccia a riga di comando

    Se l'interfaccia a riga di comando è già installata e configurata, è possibile utilizzarla per copiare gli asset Web necessari da s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website al bucket.

    1. Eseguire il comando seguente accertandosi di sostituire NOME_BUCKET con il nome utilizzato nella sezione precedente e REGIONE_BUCKET con il codice della regione (ad esempio us-east-2) in cui è stato creato il bucket.

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://NOME_BUCKET --region REGIONE_BUCKET

    2. Se il comando ha esito positivo, viene visualizzato un elenco di oggetti copiati nel bucket.

     

    Istruzioni dettagliate per CloudFormation

    Se non si può utilizzare nessuno dei metodi precedenti, è possibile avviare il modello di CloudFormation fornito per copiare gli asset necessari nel bucket S3. Avviare un modello di CloudFormation selezionando una regione e facendo clic sul link Avvia stack nella sezione Modello di CloudFormation di questo modulo. 

  • Fase 4. Aggiungi una policy di bucket per consentire gli accessi pubblici in lettura

    Aggiungi una policy di bucket per consentire gli accessi pubblici in lettura

    Puoi stabilire chi può accedere ai contenuti dei tuoi bucket S3 tramite una policy di bucket. Le policy di bucket sono documenti JSON che specificano quali entità principali sono autorizzate a eseguire diverse azioni sugli oggetti nel bucket.

    In questa fase aggiungerai al tuo nuovo bucket Amazon S3 una policy di bucket che consente agli utenti anonimi di visualizzare il tuo sito. Per impostazione predefinita il tuo bucket sarà accessibile solo agli utenti autenticati con accesso al tuo account AWS.

    Questo esempio di policy assegna l'accesso in sola lettura agli utenti anonimi e permette a chiunque su Internet di vedere i tuoi contenuti. Il modo più semplice di aggiornare una policy di bucket è tramite la console. Seleziona il bucket, quindi scegli la scheda delle autorizzazioni e infine seleziona Bucket Policy (Policy di bucket).

    1. Nella console S3, selezionare il nome del bucket creato nella sezione 1.
    2. Scegliere la scheda Autorizzazioni, quindi Policy di bucket.
      1. Nella console S3, selezionare il nome del bucket creato nella sezione 1.
      2. Selezionare la scheda Autorizzazioni, quindi assicurarsi che l’impostazione Accesso pubblico sia selezionata.
      3. Fare clic su Modifica e deselezionare:
        • "Blocca nuove policy di bucket pubbliche"
        • "Blocca accesso pubblico e tra account se il bucket ha policy pubbliche"
      4. Fare clic su Salva.
      5. Nel modello di conferma visualizzato, digitare ‘confirm’ e fare clic su Conferma. 
      6. Sempre nella scheda Autorizzazioni, scegliere Policy di bucket.  
    3. Immettere il seguente documento di policy nell'editor di policy di bucket sostituendo [NOME_BUCKET] con il nome del bucket creato nella sezione 1:
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
        } 
    ] 
}
    1. Scegliere Save (Salva) per applicare la nuova policy.

  • Fase 5. Abilita l'hosting di siti Web

    Abilita l'hosting di siti Web

    Per impostazione predefinita, gli oggetti nei bucket S3 sono disponibili tramite URL con la struttura http://.amazonaws.com//. Per distribuire gli asset dall'URL root (ad esempio /index.html), è necessario abilitare l'hosting di siti Web sul bucket. In questo modo gli oggetti saranno disponibili nell'endpoint del sito Web del bucket specifico per regione AWS: .s3-website-.amazonaws.com.

    È inoltre possibile utilizzare un dominio personalizzato per il sito Web. Ad esempio http://www.wildrydes.com è ospitato su S3. L'impostazione di un dominio personalizzato non è tra gli argomenti di questo workshop, ma puoi trovare istruzioni dettagliate nella nostra documentazione.

    In questa fase, utilizzerai la console per abilitare l'hosting di siti Web statici. A questo scopo, accedi alla scheda Properties (Proprietà) dopo aver selezionato il bucket. Imposta index.html come documento di indice e lascia vuoto il documento di errore. Per maggiori dettagli consulta la documentazione relativa alla configurazione di un bucket per l'hosting di siti Web statici.

    1. Nella pagina dei dettagli per il bucket nella console S3, scegliere Properties (Proprietà).
    2. Selezionare la scheda Static website hosting (Hosting siti Web statici).
    3. Selezionare Use this bucket to host a website (Usa questo bucket per l'hosting di un sito Web) e immettere index.html per il documento di indice. Lasciare vuoti gli altri campi.
    4. Prendere nota dell'URL in Endpoint in alto nella finestra di dialogo prima di selezionare Save (Salva). Questo URL sarà utilizzato nel resto del workshop per visualizzare l'applicazione Web e, da qui in avanti, sarà definito URL di base del sito Web.
    5. Fare clic su Save (Salva) per salvare le modifiche.

  • Fase 6. Convalida l'implementazione

    Convalida l'implementazione

    Dopo aver completato questa procedura di implementazione dovresti poter accedere al tuo sito Web statico visitando l'URL dell'endpoint del sito Web per il bucket S3.

    Accedi all'URL di base del sito Web (l'URL di cui hai preso nota nella sezione precedente) con il tuo browser preferito. Dovresti visualizzare la home page di Wild Rydes. Per cercare l'URL di base, accedi alla console S3, seleziona il bucket e fai clic su Static Web Hosting (Hosting di siti Web statici) nella scheda Properties (Proprietà).

    Se la pagina viene visualizzata correttamente (qui sotto trovi uno screenshot di esempio), puoi passare al modulo successivo (Gestione degli utenti).

Successivo: Gestione utenti