In questo modulo configurerai Amazon Simple Storage Service (S3) per ospitare le risorse statiche per la tua applicazione Web. Nei moduli successivi aggiungerai funzionalità dinamiche a queste pagine utilizzando JavaScript per chiamare le API RESTful remote create con AWS Lambda e Amazon API Gateway.

Serverless_Web_App_LP_assets-02

L'architettura di questo modulo è molto semplice. Tutti i tuoi contenuti Web statici, tra cui HTML, CSS, JavaScript, immagini e altri file saranno archiviati in Amazon S3. I tuoi utenti finali potranno quindi accedere utilizzando l'URL del sito Web pubblico esposto da Amazon S3. Non è necessario eseguire server Web o usare altri servizi per rendere il sito disponibile.

Ai fini di questo modulo utilizzerai l'URL endpoint del sito Web Amazon S3 fornito da noi. Appare così: http://{your-bucket-name}.s3-website.{region}.amazonaws.com. Per la maggior parte delle applicazioni reali è consigliabile utilizzare un dominio personalizzato che ospiti il tuo sito. Se sei interessato a utilizzare un tuo dominio, segui le istruzioni per la configurazione di un sito Web statico con un dominio personalizzato nella documentazione di Amazon S3.

Tempo di completamento: 30 minuti

Servizi utilizzati: Amazon S3

Modello di CloudFormation: se hai già familiarità con Amazon S3, oppure desideri passare a Lambda e API Gateway, puoi avviare uno di questi modelli di AWS CloudFormation nella regione che preferisci per creare le risorse necessarie automaticamente.

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 (Seoul) Avvia stack >
Asia Pacifico (Sydney) Avvia stack >
Asia Pacifico (Mumbai) Avvia stack >
Serverless_Web_App_LP_assets-17

Istruzioni per l’avvio di CloudFormation

  1. Fai clic sul link Launch Stack (Avvia stack) qui sopra per la regione che preferisci.

  2. Fai cic su Next (Successivo) nella pagina di selezione del modello.

  3. Inserisci un nome unico globale in Website Bucket Name (Nome del bucket del sito Web), ad esempio wildrydes-yourname e fai clic su Next (Successivo).

  4. Nella pagina Options (Opzioni) lascia tutte le impostazioni predefinite e fai clic su Next (Successivo).

  5. Nella pagina Revisione, seleziona la casella per confermare che CloudFormation creerà le risorse di IAM e fai clic su Create (Crea).

    Questo modello utilizza una risorsa personalizzata per copiare gli asset del sito Web statico da un bucket S3 centrale al tuo bucket dedicato. Affinché la risorsa personalizzata possa scrivere nel nuovo bucket nel tuo account, è necessario creare un ruolo IAM con le necessarie autorizzazioni che la risorsa può assumere.

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

  7. Con lo stack wildrydes-webapp-1 selezionato, fai clic sulla scheda Output e fai clic sul link WebsiteURL.

  8. Verifica che la home page Wild Rydes si stia caricando correttamente e passa al modulo successivo, Gestione degli utenti.


Segui i passaggi indicati nelle istruzioni seguenti per ospitare un sito Web statico. Fai clic sul numero della fase per espandere la sezione.

  • Fase 1. Seleziona una regione


    Questa applicazione Web può essere distribuita in qualsiasi regione AWS che supporta tutti i servizi utilizzati in questa applicazione, tra cui Amazon Cognito, AWS Lambda, Amazon API Gateway, Amazon S3 e Amazon DynamoDB.

    È possibile consultare la Tabella delle regioni per vedere quali regioni supportano i servizi. Le regioni supportate tra cui puoi scegliere sono:

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

     

    Seleziona la tua regione dal menu a tendina nell'angolo in alto a destra della Console di gestione AWS.

    region

    (Fai clic per ingrandire)

    region
  • Fase 2. Crea un bucket S3

    Amazon S3 può essere utilizzato per l'hosting di siti Web statici senza dover configurare o gestire server Web. In questo passaggio creerai un nuovo bucket S3 che verrà utilizzato per ospitare tutte gli asset statici (ad esempio HTML, CSS, JavaScript e i file immagine) per la tua applicazione Web. 

    In questa fase, utilizzerai la console o AWS CLI per creare un bucket Amazon S3. Tieni presente che il nome del tuo bucket deve essere e globale. Ti consigliamo di usare un nome come wildrydes-firstname-lastname. Se riceverai un messaggio di errore che dice che il nome del bucket esiste già, prova ad aggiungere numeri o lettere finché non trovi un nome non utilizzato.


    1. Nella Console di gestione AWS scegli Services (Servizi) quindi seleziona S3 sotto Storage.
    2. Seleziona +Create Bucket (Crea bucket)
    3. Fornisci un nome unico globale per il tuo bucket, ad esempio wildrydes-firstname-lastname. Se riceverai un messaggio di errore che dice che il nome del bucket esiste già, prova ad aggiungere numeri o lettere finché non trovi un nome non utilizzato.
    4. Seleziona la regione che hai scelto di utilizzare per questo workshop dal menu a tendina.
    5. Scegli Create (Crea) nella parte inferiore della finestra di dialogo senza selezionare un bucket da cui copiare le impostazioni.
  • Fase 3. Carica i contenuti

    In questa fase verranno caricati gli asset del sito Web per questo modulo nel tuo bucket S3. Per completare quest'operazione puoi utilizzare la Console di gestione AWS (richiede il browser Google Chrome), AWS CLI oppure il modello di CloudFormation fornito. Se hai già installato AWS CLI e l'hai configurato sul tuo computer locale, consigliamo l'utilizzo di questo metodo. In caso contrario, utilizza la console se hai la versione più recente di Google Chrome installata.°

    Istruzioni dettagliate della console

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

    1. Scarica un archivio di questo repository utilizzando questo link.

    2. Decomprimi l'archivio che hai scaricato sul computer locale.

    3. Apri la Console di gestione AWS in Chrome. Scegli Services (Servizi) quindi seleziona S3 sotto Storage.

    4. Seleziona il bucket creato nella fase precedente e assicurati di vedere la scheda Objects (Oggetti).

    5. Apri Windows File Explorer o macOS Finder e individua il contenuto decompresso del file zip scaricato nella fase precedente.

    6. Raggiungi la directory WebApplication/1_StaticWebHosting/website sul tuo computer in locale.

    7. Seleziona tutti i file e le sottodirectory nella directory del sito Web. Verifica che la directory stessa del sito Web non sia selezionata.

    8. Trascina i file selezionati dal filesystem locale al contenuto sotto la scheda Object (Oggetti) nella console di S3.

    9. Scegli Upload (Carica) in basso a sinistra nella finestra di dialogo che viene visualizzata.

    10. Attendi che il caricamento sia completato e assicurati che i contenuti della directory del sito Web di S3 siano elencati nella console. Se vedi solo una directory del sito Web eliminala dal tuo bucket e segui nuovamente le istruzioni assicurandoti di selezionare solo i contenuti delle directory prima di selezionare e trascinare nella console di S3.

    Istruzioni dettagliate per la CLI

    Se hai già installato e configurato la CLI è possibile utilizzarla per copiare ali asset Web necessari da s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website al tuo bucket.

    1. Esegui il seguente comando assicurandoti di sostituire YOUR_BUCKET_NAME con il nome che hai utilizzato nella sezione precedente e YOUR_BUCKET_REGION con il codice di zona (ad es. us-east-2) in cui è stato creato il tuo bucket.

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME --region YOUR_BUCKET_REGION
    2. Se il comando viene eseguito correttamente, dovresti vedere l'elenco degli oggetti che sono stati copiati nel bucket.

     

    Istruzioni dettagliate di CloudFormation

    Se non sei in grado di utilizzare uno dei metodi precedenti, è possibile avviare il modello di CloudFormation fornito in modo da copiare le risorse necessarie nel bucket S3. Avvia 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 bucket per consentire letture pubbliche.

    È possibile definire chi può accedere ai contenuti nel tuo bucket S3 utilizzando una policy bucket. Le policy bucket sono documenti JSON che indicano quali principali sono autorizzati a eseguire diverse azioni contro gli oggetti nel tuo bucket.

    In questa fase, è possibile aggiungere una policy bucket per il tuo nuovo bucket Amazon S3 per consentire agli utenti anonimi di visualizzare il tuo sito. Da impostazione predefinita i tuoi bucket saranno accessibili agli utenti autenticati che hanno accesso al tuo account AWS.

    Guarda questo esempio di una policy che permette l'accesso in sola lettura agli utenti anonimi. Questa policy di esempio consente a tutti gli utenti di Internet di visualizzare i tuoi contenuti. Il modo più semplice per aggiornare una policy bucket è utilizzare la console. Seleziona il bucket, scegli la scheda Autorizzazioni e quindi seleziona Policy bucket.


    1. Nella console S3 seleziona il nome del bucket creato nella sezione 1.
    2. Scegli la scheda Permissions (Autorizzazioni), quindi scegli Bucket Policy (Policy del bucket).
    3. Inserisci il seguente documento della policy nell'editor del bucket editor sostituendo [YOUR_BUCKET_NAME] 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. Scegli Save (Salva) per applicare la nuova policy.
  • Fase 5. Abilita Hosting di siti Web

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

    Puoi anche utilizzare un dominio personalizzato per il tuo sito Web. Ad esempio http://www.wildrydes.com è ospitato da S3. Impostare un dominio personalizzato non rientra in questo workshop, ma puoi trovare istruzioni dettagliate nella nostra documentazione.

    In questa fase, utilizzerai la console per abilitare l'hosting di siti Web statici. Puoi eseguire quest'operazione nella scheda Proprietà dopo aver scelto il bucket. Imposta index.html come indice del documento e lascia il documento di errore vuoto. Consulta la documentazione relativa alla configurazione di un bucket per l'hosting di siti Web statici per ulteriori dettagli.


    1. Nella pagina dei dettagli del bucket nella console S3, scegli la scheda Proprietà.
    2. Scegli la scheda Hosting di siti Web statici.
    3. Seleziona Utilizza questo bucket per l'hosting di un sito Web e immetti index.html per il documento indice . Lascia vuoti gli altri campi.
    4. Prendi nota dell’URL dell’endpoint nella parte superiore della finestra di dialogo prima di scegliere Save (Salva). Dovrai usare questo URL per tutto il resto del workshop per visualizzare la tua applicazione Web. Da qui in poi ci riferiremo a questo come l'URL di base del tuo sito Web.
    5. Fai clic su Save (Salva) per salvare le modifiche.
  • Fase 6. Convalida l'implementazione

    Dopo aver completato queste operazioni di implementazione dovresti essere in grado di accedere al tuo sito Web statico, visitando l'URL dell'endpoint del sito Web per il tuo bucket S3.

    Visita l'URL di base del tuo sito Web (questo è l'URL che hai annotato nella sezione precedente) nel browser che preferisci. Dovresti visualizzare la home page di Wild Rydes. Se hai bisogno di verificare l’URL di base, visita la console S3, seleziona il tuo bucket e quindi fai clic su Static Web Hosting (Hosting di un sito Web statico) nella scheda Properties (Proprietà).

    Se la pagina si apre correttamente (vedi sotto uno screenshot di esempio), è possibile passare al modulo successivo Gestione degli utenti.

    wildrydes-homepage