Nozioni di base su AWS

Creazione di un'applicazione Web di base

Distribuzione di un'applicazione Web e maggiore interattività con un'API e un database

Modulo 1: Creazione di un sito Web statico

In questo modulo creerai ed eseguirai l'hosting di un sito Web statico utilizzando Amazon S3.

Introduzione

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 AWS Lambda e Amazon API Gateway per effettuare chiamate alle API RESTful remote. REST sta per "Representational State Transfer" ed è un modello architetturale utilizzato per la creazione di servizi Web. API sta per "Application Program Interface". Pertanto, un'API RESTful è l'interfaccia in cui viene implementato il modello architetturale).

In questo modulo, utilizzerai l'URL dell'endpoint di un sito Web fornito da Amazon S3 che avrà il seguente formato:

http://{your-bucket-name}.s3-website.{region}.amazonaws.com

Tutti i contenuti Web statici, compresi HTML, CSS, JavaScript, immagini e altri file, verranno archiviati in Amazon S3. Abbiamo selezionato il servizio S3 poiché fornisce lo storage di oggetti dal quale possiamo archiviare e recuperare direttamente i file. Gli utenti finali saranno in grado di accedere facilmente al sito Web utilizzando l'URL dell'oggetto esposto da S3.

Se ti rende nervoso lavorare con così tante cose nuove, non preoccuparti, in questo modulo non utilizzerai altri servizi AWS e non dovrai nemmeno eseguire alcuni server Web (un "server" è un software o un dispositivo hardware che accetta e risponde a richieste effettuate tramite una rete) per rendere disponibile il sito Web.

Il sito Web sarà una pagina "Hello World" estremamente semplice e nei moduli successivi aggiungeremo ulteriori funzionalità.

In un contesto reale, spesso si preferisce utilizzare un dominio personalizzato per ospitare il proprio sito. (Un "dominio personalizzato" è un nome di marca univoco che identifica un sito Web, come www.amazon.com. Se sei interessato a utilizzare il tuo dominio in ambiti diversi da questo modulo, puoi seguire le istruzioni di questa guida).

Avrai modo di approfondire i seguenti aspetti

  • Creazione di un bucket S3
    • I dati vengono archiviati come oggetti all'interno di risorse chiamate "bucket".
  • Caricamento di file in un bucket S3
  • Navigazione nella console di S3 per modificare le impostazioni di "bucket" e "oggetto"
  • Modifica del livello di sicurezza in un bucket S3 e rendere pubblici gli oggetti al suo interno
  • Abilitazione dell'hosting Web in un bucket S3
    • L'"hosting Web" fornisce le tecnologie e i servizi necessari per fare in modo che il tuo sito Web venga visualizzato su Internet

Concetti chiave

Sito Web statico: un sito Web statico, diversamente da quelli dinamici, presenta contenuti fissi. I siti Web statici sono i più basici e facili da creare. È sufficiente creare alcune pagine HTML e pubblicarle in un server Web.

Risorsa: un'entità che puoi utilizzare (ad esempio, un bucket Amazon S3).

Storage di oggetti: architettura di storage dei dati di un computer che gestisce i dati come oggetti, contrariamente ad altre architetture di storage dove i dati vengono archiviati come file o a blocchi.

Oggetti S3: una risorsa che contiene dati e metadati (un set di dati che descrive e fornisce informazioni su altri dati) ed è associata a una chiave univoca che la definisce.

Bucket S3: una risorsa utilizzata per raggruppare più oggetti. Deve avere un nome univoco a livello globale.

URL oggetto S3: indirizzo univoco accessibile dal Web fornito dal servizio S3 per un oggetto archiviato al suo interno.

Regioni AWS: aree geografiche distinte utilizzate da AWS per ospitare la sua infrastruttura. Tali regioni sono dislocate nel mondo in modo che i clienti possano scegliere quella più vicina a loro per l'hosting della loro infrastruttura cloud.

 Tempo richiesto per il completamento

10 minuti

 Servizi utilizzati

 Prerequisiti del modulo

Implementazione

  • Creazione di un bucket con accesso pubblico
    1. Accedi alla Console di Amazon S3 con le tue credenziali AWS.
    2. Fai clic sul pulsante arancione "Crea bucket".
    3. Assegna un nome al bucket. Indipendentemente dall'account in cui sono stati creati, tutti i bucket Amazon S3 condividono lo stesso namespace, pertanto questo nome deve essere univoco a livello globale.
    4. Seleziona la regione in cui desideri individuare il bucket. Per questo tutorial, scegli la regione più vicina.
    5. Deseleziona "Blocca tutti gli accessi pubblici". Poiché ospitiamo un sito Web, vogliamo che le persone vi accedano.
    6. Seleziona la casella di controllo accanto a "Blocca accesso pubblico a bucket e oggetti concessi tramite nuovo bucket pubblico o policy degli access point".
    7. Seleziona la casella di controllo accanto a "Blocca accesso pubblico e tra account a bucket e oggetti tramite qualsiasi bucket pubblico o policy degli access point".
    8. Seleziona la casella di controllo per confermare di aver compreso che il contenuto del bucket potrebbe diventare pubblico. Nel bucket non verrà archiviata alcuna informazione privata in quanto il suoi contenuti potrebbero essere resi pubblici. La configurazione dovrebbe avere il seguente aspetto:
    Full Stack tutorial bucket settings

    9. Fai clic sul pulsante arancione "Crea bucket".

    10. All'inizio della schermata dovresti visualizzare una casella verde contenente il messaggio "Creazione bucket completata".

  • Configurazione del bucket per l'hosting di un sito Web
    1. Individua il nuovo bucket nell'elenco riportato di seguito e fai clic su di esso.
    2. Fai clic sulla scheda grigia "Proprietà".
    3. Seleziona la scheda "Hosting siti Web statici".
    4. Fai clic sul pulsante di opzione "Usa questo bucket per l'hosting di un sito Web".
    5. In "Documento indice" digita "index.html".
    6. In "Documento errore" digita "error.html." La configurazione dovrebbe avere il seguente aspetto:  
    Full Stack tutorial bucket hosting

    7. Fai clic sul pulsante blu "Salva".

    8. Fai clic sulla scheda grigia "Panoramica".

    9. Lascia aperto il browser e apri l'editor di testo preferito sul computer. Crea un nuovo file e incollare al suo interno il seguente HTML...

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    
    <body>
        Hello World
    </body>
    </html>

    10. Salva il file come index.html.

    11. Crea un secondo file di testo e incolla quanto segue al suo interno...

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Error Page</title>
    </head>
    
    <body>
        Error Page
    </body>
    </html>

    12. Salva il secondo file come error.html.

    13. Torna al browser.

    14. Fai clic sul pulsante blu "Carica".

    15. Seleziona i file index.html ed error.html da caricare.  

    Full Stack tutorial upload-html

    16. Fai clic sul pulsante blu "Avanti".

    17. Nel menu a discesa "Gestisci autorizzazioni pubbliche" seleziona: "Concedi accesso pubblico alla lettura agli oggetti specificati". Questa operazione è necessaria affinché tutti possano aprire il sito con il proprio browser, inclusi noi per l'esecuzione del test.

    Full Stack tutorial GrantPublicRead

    18. Fai clic sul pulsante blu "Carica" a sinistra.

  • Test del sito Web statico
    1. Fai clic su index.html nell'elenco.
    2. Fai clic sul collegamento in "URL oggetto".
    3. Si dovrebbe caricare una nuova scheda del browser con una pagina "Hello World" molto basica.
    4. Congratulazioni, il sito Web statico è in hosting!

Architettura dell'applicazione

Ecco la nostra attuale architettura:

Full Stack tutorial Module One app arch

Per il momento è piuttosto essenziale poiché stiamo utilizzando solo il servizio S3. Abbiamo confermato che gli utenti possono accedere correttamente alla nostra applicazione Web archiviata in S3. Successivamente creeremo una funzione AWS Lambda.

Questo modulo è stato utile?

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

Creazione di una funzione serverless