In questo modulo configurerai AWS Amplify per l'hosting delle risorse statiche necessarie per la tua applicazione Web con la distribuzione continua integrata. Amplify Console offre un flusso di lavoro basato su git per la distribuzione e l'hosting continui di app Web full-stack. 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.
L'architettura di questo modulo è particolarmente lineare. Tutti i contenuti Web statici compresi HTML, CSS, JavaScript, immagini e altri file saranno gestiti da AWS Amplify Console. Gli utenti finali accederanno al tuo sito tramite l'URL del sito Web pubblico esposto da AWS Amplify Console. Per rendere disponibile il tuo sito non hai bisogno di eseguire server Web o utilizzare altri servizi.
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 dominio personalizzato su Amplify.
Tempo necessario per completare il modulo: 15 minuti
Servizi utilizzati: AWS Amplify
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
È possibile distribuire questa applicazione Web in qualsiasi regione AWS in cui siano supportati tutti i servizi utilizzati dall'applicazione, quali AWS Amplify, AWS CodeCommit, Amazon Cognito, AWS Lambda, Amazon API Gateway 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)
-
Fase 2: Creazione di un repository Git
Per gestire il codice sorgente per questo modulo sono disponibili due opzioni: AWS CodeCommit (incluso nel piano gratuito di AWS) o GitHub. In questo tutorial utilizzeremo CodeCommit per memorizzare il codice dell’applicazione, ma puoi ottenere lo stesso risultato creando un repository in GitHub.
a. Apri la console di AWS CodeCommit
b. Seleziona Crea repository.
c. Imposta il nome del repository* su "wildrydes-site"
d. Seleziona Crea.
e. Una volta creato il repository, configura un utente IAM con credenziali Git nella console IAM seguendo le istruzioni riportate.
f. Torna alla console CodeCommit e dall’elenco a discesa Clona URL seleziona Clona HTTPS
g. Da una finestra terminale esegui il comando git clone e l’URL HTTPS del repository:
$ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
Cloning into 'wildrydes-site'...
Username for 'https://git-codecommit.us-east-1.amazonaws.com':XXXXXXXXXX
Password for 'USERID': XXXXXXXXXXXX
warning: You appear to have cloned an empty repository.
-
Fase 3: Popolamento del repository Git
Dopo aver utilizzato AWS CodeCommit o GitHub.com per creare il repository git e dopo averlo clonato in locale, dovrai copiare il contenuto del sito Web da un bucket S3 accessibile pubblicamente esistente associato a questo workshop e aggiungere il contenuto al repository.
a. Passa alla directory del repository e copia i file statici da S3:
cd wildrydes-site/
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursiveb. Esegui il commit dei file sul servizio Git
$ git add .
$ git pushCounting objects: 95, done.
Compressing objects: 100% (94/94), done.
Writing objects: 100% (95/95), 9.44 MiB | 14.87 MiB/s, done.
Total 95 (delta 2), reused 0 (delta 0)
To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
* [new branch] master -> master
-
Fase 4: Abilitazione dell’hosting Web con AWS Amplify Console
Quindi utilizzerai AWS Amplify Console per distribuire il sito Web di cui è stato appena eseguito il commit su git. Amplify Console si occupa del lavoro di configurazione di un sito in cui archiviare il codice dell'applicazione Web statica e offre una serie di utili funzionalità per semplificare sia il ciclo di vita di tale applicazione che l’abilitazione delle best practice.
a. Apri la pagina della console di Amplify Console
b. Fai clic su Inizia in Distribuisci con Amplify Console
c. Scegli il fornitore di servizi del repository utilizzato e seleziona Successivo
d. Se hai utilizzato GitHub, dovrai utilizzare AWS Amplify con il tuo account GitHub
e. Dall’elenco a discesa seleziona il repository e il ramo appena creati
e. Lascia le impostazioni predefinite sulla pagina "Configura le impostazioni di compilazione build" e seleziona Successivo.
f. Nella pagina "Revisione" seleziona Salva e distribuisci
g. Il processo di creazione delle risorse necessarie e la distribuzione del codice da parte di Amplify Console richiede qualche minuto.
Una volta completato, fai clic sull’immagine del sito per lanciare il sito Wild Rydes.
Facendo clic sul link per Master vedrai i dettagli di compilazione e distribuzione relativi al tuo ramo e gli screenshot dell'app su vari dispositivi:
-
Fase 5: Modifica del sito
AWS Amplify Console ricostruirà e ridistribuirà l'app quando rileva modifiche al repository collegato. Apporta una modifica alla pagina principale per testare questo processo.
a. Apri la pagina “index.html” e modifica la riga del titolo in modo che riporti: <title>Wild Rydes - Rydes of the Future!</title>
b. Salva il file ed esegui di nuovo il commit nel repository git. Amplify Console inizierà nuovamente a costruire il sito subito dopo aver rilevato l'aggiornamento al repository. Questo processo è molto rapido. Torna alla pagina della console di Amplify Console per osservare il processo.
$ git add index.html $ git commit -m "updated title" [master dfec2e5] updated title 1 file changed, 1 insertion(+), 1 deletion(-) $ git push Counting objects: 3, done. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done. Total 3 (delta 2), reused 0 (delta 0) remote: processing To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site 2e9f540..dfec2e5 master -> master
c. Una volta completato, apri di nuovo il sito Wild Rydes e nota la modifica al titolo.
-
Riepilogo
In questo modulo hai creato un sito Web statico che funzionerà da base per la nostra azienda Wild Rydes. AWS Amplify Console facilita la distribuzione di siti Web statici seguendo un modello di integrazione e distribuzione continua. Ha funzionalità per "costruire" applicazioni basate su framework Javascript più complicate e ha funzionalità come implementazioni di succursali di funzionalità, facile configurazione del dominio personalizzata, distribuzioni istantanee e protezione con password.
