Progetti in AWS

Crea un'applicazione Web moderna

Distribuisci un'applicazione Web, collegala a un database e analizza le attività degli utenti

Modulo 1: Crea un sito web statico

In questo modulo, effettuerai l'hosting del tuo sito web statico su Amazon S3 e configurerai il tuo IDE basato sul cloud, AWS Cloud9.  

Panoramica

In questo modulo, effettueremo l'hosting del contenuto statico (html, js, css, media content, ecc.) del nostro sito web Mythical Mysfit su Amazon S3 (Simple Storage Service). S3 è un servizio di storage di oggetti economico ed estremamente durevole e disponibile, in grado di fornire gli oggetti archiviati direttamente tramite HTTP. Grazie a questa caratteristica, è utilissimo per fornire i contenuti web statici direttamente ai browser web per i siti Internet.

Prima di archiviare i mysfit in S3, configuriamo AWS Cloud9 in base alle tue necessità. Cloud9 è un ambiente di sviluppo integrato (IDE) basato su cloud che consente di scrivere, gestire ed eseguire il debug del tuo codice con un semplice browser.  

Diagramma dell'architettura

crea un sito web statico

 Tempo per il completamento

20 minuti

Istruzioni per l'implementazione

  • A: Accedi alla Console AWS

    Per iniziare, accedi alla Console AWS con l'account che utilizzerai durante questo workshop.

    B: Seleziona una regione

    Questa applicazione web può essere distribuita in qualsiasi regione AWS che supporta tutti i servizi impiegati dall'app. Per sapere in quali regioni sono disponibili i servizi supportati, consulta la tabella delle regioni. Le regioni supportate includono:

    • Stati Uniti orientali 1 (Virginia settentrionale)
    • Stati Uniti orientali 2 (Ohio)
    • Stati Uniti occidentali 2 (Oregon)
    • UE occidentale 1 (Irlanda)

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

  • A: Crea un nuovo ambiente AWS Cloud9

    Sulla pagina iniziale di Console AWS, digita Cloud9 nella casella di ricerca del servizio e selezionalo:

    crea un bot lex

    (fai clic per ingrandire)

    Fai clic su Create Environment (Crea ambiente) sulla pagina iniziale di Cloud9:

    crea un bot lex

    (fai clic per ingrandire)

    Assegna al tuo ambiente il nome MythicalMysfitsIDE e aggiungi un'eventuale descrizione, quindi fai clic su Next Step (Fase successiva):

    crea un bot lex

    (fai clic per ingrandire)

    Mantieni le impostazioni predefinite dell'ambiente e fai clic su Next Step (Fase successiva):

    crea un bot lex

    (fai clic per ingrandire)

    Fai clic su Create Environment (Crea ambiente):

    crea un bot lex

    (fai clic per ingrandire)

    Quando la creazione dell'IDE è stata completata, visualizzerai una schermata di benvenuto simile a questa:

    crea un bot lex

    (fai clic per ingrandire)

    B: Clona il repository del workshop Mythical Mysfits

    Nel pannello in basso, vedrai una riga di comando del terminale aperta e pronta per l'uso. Esegui il seguente comando git nel terminale per clonare il codice necessario al completamento di questo tutorial:

    git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git

    Dopo avere clonato il repository, potrai osservare che lo strumento di esplorazione del tuo progetto ora include i file clonati:

    file clonati

    (fai clic per ingrandire)

    Nel terminale, modifica la directory sostituendola con la directory del repository appena clonato:

    cd aws-modern-application-workshop
  • A: Crea un bucket S3 e configuralo per l'hosting del sito web

    Successivamente, creeremo i componenti dell'infrastruttura necessari per effettuare l'hosting di un sito web statico in Amazon S3 tramite l'interfaccia a riga di comando (CLI) di AWS.

    Innanzitutto, dovrai creare un bucket S3 e modificare il nome di seguito (mythical-mysfits-bucket-name) con il nome univoco del tuo bucket. Nota: consulta i requisiti per i nomi dei bucket. Copia il nome che hai scelto e salvalo per utilizzarlo successivamente, poiché lo impiegherai in diverse altre occasioni nel corso del workshop:

    aws s3 mb s3://REPLACE_ME_BUCKET_NAME

    Ora che abbiamo creato un bucket, è necessario impostare alcune opzioni di configurazione che permettano al bucket di essere utilizzato per l'hosting di un sito web statico. Questa configurazione consente agli oggetti del bucket di essere richiesti tramite un nome DNS pubblico registrato per il bucket, così come di indirizzare le richieste inviate al percorso base del nome DNS del sito alla pagina iniziale di un sito web selezionato (nella maggior parte dei casi, index.html):

    aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
    B: Aggiorna la policy del bucket S3

    Per impostazione predefinita, tutti i bucket creati in Amazon S3 sono completamente privati. Per utilizzare il sito web in modo pubblico, dobbiamo creare una policy del bucket S3 che indichi che gli oggetti archiviati all'interno di questo nuovo bucket possono essere consultati pubblicamente da chiunque. Le policy dei bucket sono rappresentate come documenti JSON che definiscono le azioni S3 (chiamate APIS3) la cui esecuzione è consentita (o non consentita) da parte di diverse entità (nel nostro caso, pubblico o chiunque).

    Il documento JSON per la policy del bucket necessaria si trova all'indirizzo: ~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json. Questo file contiene una stringa che deve essere sostituita con il nome del bucket che hai scelto (indicato con REPLACE_ME_BUCKET_NAME).

    Nota: nel corso del workshop ti capiterà di aprire altri file con contenuti che devono essere sostituiti; sono tutti preceduti dal prefisso "REPLACE_ME_", così potrai individuarli facilmente utilizzando le funzioni di ricerca CTRL-F su Windows o ⌘-F su Mac. 

    Per aprire un file in Cloud9, seleziona File Explorer (Esplora risorse) dal pannello a sinistra e fai clic due volte su website-bucket-policy.json:

    apri il file in Cloud9

    (fai clic per ingrandire)

    In questo modo, aprirai bucket-policy.json nel pannello File editor. Sostituisci la stringa visualizzata con il nome del bucket che hai scelto e utilizzato nei comandi precedenti:

    sostituisci il nome del bucket

    (fai clic per ingrandire)

    Esegui il seguente comando CLI per aggiungere una policy di bucket pubblico al tuo sito web:

    aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
    C: Pubblica il contenuto del sito web su S3

    Ora che hai configurato in modo adeguato il bucket del tuo nuovo sito web, aggiungiamo la prima iterazione della pagina iniziale di Mythical Mysfits al bucket. Utilizza il seguente comando della CLI S3, che riproduce il comando linux per la copia dei file (cp), al fine di copiare la pagina index.html fornita in locale dal tuo IDE al nuovo bucket S3 (sostituendo il nome del bucket come opportuno).

     aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html 

    Ora, apri il tuo browser web preferito e inserisci uno dei seguenti URI nella barra dell'indirizzo. Uno dei seguenti URI contiene un carattere '.' prima del nome della regione, mentre l'altro contiene un carattere '-'. Scegli quello opportuno in base alla regione che stai utilizzando.

    La stringa da sostituire REPLACE_ME_YOUR_REGION deve corrispondere alla regione all'interno della quale hai creato il bucket S3 (es. stati-uniti-orientali-1):

    Per le regioni Stati Uniti orientali 1 (Virginia settentrionale), Stati Uniti occidentali 2 (Oregon) e UE occidentale 1 (Irlanda), usa:

    http://REPLACE_ME_BUCKET_NAME.s3-website-REPLACE_ME_YOUR_REGION.amazonaws.com

    Per gli Stati Uniti orientali 2 (Ohio), usa:

    http://REPLACE_ME_BUCKET_NAME.s3-website.REPLACE_ME_YOUR_REGION.amazonaws.com
    mysfits-welcome

    Congratulazioni, hai creato il sito web statico di base Mythical Mysfits!

    Hai concluso il Modulo 1.

Successivamente, effettua l'hosting della tua applicazione su un server web.