AWS Amplify Guida per l'utente della console - AWS Amplify: Guida per l'utente della console - Guida per l'utente della console
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
AWS Amplify Guida per l'utente della console AWS Amplify: Guida per l'utente della console Copyright © 2019 Amazon Web Services, Inc. and/or its affiliates. All rights reserved.
AWS Amplify Guida per l'utente della console Amazon's trademarks and trade dress may not be used in connection with any product or service that is not Amazon's, in any manner that is likely to cause confusion among customers, or in any manner that disparages or discredits Amazon. All other trademarks not owned by Amazon are the property of their respective owners, who may or may not be affiliated with, connected to, or sponsored by Amazon.
AWS Amplify Guida per l'utente della console Table of Contents Che cos'è la console AWS Amplify? ...................................................................................................... 1 Cosa sono le applicazioni Web moderne? ...................................................................................... 1 Caratteristiche della console Amplify .............................................................................................. 1 Approfondimenti ......................................................................................................................... 2 Nozioni di base .................................................................................................................................. 3 Fase 1: connessione del repository ............................................................................................... 3 Fase 2: conferma delle impostazioni di compilazione per il front-end ................................................... 4 Fase 3: conferma delle impostazioni di compilazione per il back-end (beta) .......................................... 5 Fase 4: aggiunta di variabili di ambiente (opzionale) ........................................................................ 6 Fase 5: salvataggio e distribuzione ............................................................................................... 6 Fasi successive .......................................................................................................................... 7 Configurazione di domini personalizzati .................................................................................................. 8 Aggiunta di un dominio personalizzato gestito in Amazon Route 53 .................................................... 8 Aggiunta di un dominio personalizzato gestito da un provider di DNS terze parti ................................... 9 Gestione dei sottodomini ............................................................................................................ 11 Associazione di un dominio ........................................................................................................ 11 Distribuzione di back-end serverless .................................................................................................... 12 Gestione di più ambienti .................................................................................................................... 13 Utilizzo di ambienti basati su rami ............................................................................................... 13 Utilizzo di flussi di lavoro del team .............................................................................................. 13 Utilizzo di un flusso di lavoro centralizzato ............................................................................ 14 Utilizzo di un flusso di lavoro del ramo di funzionalità ............................................................. 15 Utilizzo del flusso di lavoro GitFlow ..................................................................................... 16 Uso dei reindirizzamenti ..................................................................................................................... 17 Tipi di reindirizzamento .............................................................................................................. 17 Parti di un reindirizzamento ........................................................................................................ 18 Ordine dei reindirizzamenti ......................................................................................................... 18 Reindirizzamenti e riscritture semplici ........................................................................................... 19 Reindirizzamenti per applicazioni Web su singola pagina (SPA) ....................................................... 20 Riscrittura proxy inverso ............................................................................................................. 20 Barre finali e URL puliti ............................................................................................................. 20 Placeholder .............................................................................................................................. 21 Stringhe di query e parametri di percorso ..................................................................................... 21 Reindirizzamenti in base alla regione ........................................................................................... 21 Limitazione dell'accesso ..................................................................................................................... 23 Configurazione delle impostazioni di compilazione ................................................................................. 24 Sintassi della specifica YML ....................................................................................................... 24 Scenari di compilazione ............................................................................................................. 25 Uso di impostazioni di compilazione specifiche per il branch .................................................... 25 Esplorazione di una sottocartella ......................................................................................... 25 Distribuzione del back-end con il front-end ............................................................................ 26 Impostazione della cartella di output .................................................................................... 26 Installazione di pacchetti in fase di compilazione .................................................................... 26 Uso di un registro npm privato ............................................................................................ 26 Installazione di pacchetti del sistema operativo ...................................................................... 27 Variabili di ambiente .......................................................................................................................... 28 Impostazione delle variabili d'ambiente ......................................................................................... 28 Accesso alle variabili d'ambiente ................................................................................................. 28 Connessione a domini personalizzati terze parti .................................................................................... 30 Connessione a un dominio GoDaddy ........................................................................................... 30 Connessione a un dominio Google .............................................................................................. 31 Creazione di un ruolo di servizio ......................................................................................................... 33 Fase 1: creazione di un ruolo di servizio ...................................................................................... 33 Fase 2: accettare tutte le impostazioni predefinite sulla console AWS CloudFormation .......................... 33 iii
AWS Amplify Guida per l'utente della console Fase 3: tornare alla console Amplify ............................................................................................ 33 Gestione delle prestazioni dell'applicazione ........................................................................................... 34 iv
AWS Amplify Guida per l'utente della console Cosa sono le applicazioni Web moderne? Che cos'è la console AWS Amplify? La console AWS Amplify è un servizio di distribuzione e hosting continuo per le moderne applicazioni Web. La console AWS Amplify semplifica la distribuzione del back-end e del front-end della tua applicazione. Connettendosi al repository del codice, il front-end e il back-end vengono distribuiti in un unico flusso di lavoro su ogni commit del codice. In questo modo l'applicazione Web viene aggiornata solo dopo il completamento della distribuzione, eliminando le incoerenze tra il front-end e il back-end dell'applicazione. La console AWS Amplify semplifica la creazione, la distribuzione e l'hosting delle applicazioni Web mobili, permettendoti di eseguire in poco tempo iterazioni sul feedback e di distribuire nuove funzionalità agli utenti in modo più rapido. Cosa sono le applicazioni Web moderne? Le applicazioni Web moderne sono create come applicazioni Web a pagina singola che includono tutti i componenti delle applicazioni in file statici. Le esperienze con le tradizionali architetture Web client-server si sono rivelate insoddisfacenti: ogni clic del pulsante o ogni ricerca richiedeva un percorso di andata e ritorno fino al server e la ripetizione del rendering di tutta l’applicazione. Le app Web moderne offrono un'esperienza utente simile a un'app nativa, servendo in modo efficiente il front-end dell'app o l'interfaccia utente in browser come file HTML/JavaScript predefiniti, che possono quindi richiamare funzionalità di back-end senza dover ricaricare la pagina. La funzionalità delle applicazioni Web moderne viene spesso distribuita in più posizioni, come database, servizi di autenticazione, codice del front-end in esecuzione nel browser e logica di business del back- end, ma anche in funzioni AWS Lambda in esecuzione nel cloud. Questo complica e rende più lunghe le distribuzioni delle applicazioni, perché gli sviluppatori devono coordinarle attentamente nel front-end e nel back-end per evitare che non vadano parzialmente o totalmente a buon fine. La console AWS Amplify semplifica la distribuzione del front-end e del back-end in un unico flusso di lavoro. La console AWS Amplify supporta i framework Single Page App (SPA) più diffusi (ad esempio React, Angular, Vue.js, Ionic, Ember), oltre a generatori di siti statici come Gatsby, Eleventy, Hugo, VuePress e Jekyll. Caratteristiche della console Amplify Con la console Amplify, è possibile effettuare le seguenti operazioni: • Connettendosi al repository (GitHub, BitBucket, GitLab e AWS CodeCommit), la console Amplify rileva automaticamente le impostazioni di compilazione del front-end e tutte le funzionalità di back-end disponibili con l'interfaccia a riga di comando Amplify (toolchain a riga di comando per la creazione di back-end serverless). • Gestione degli ambienti temporanei e di produzione per il front-end e il back-end tramite la connessione di nuovi rami. • Le distribuzioni atomiche eliminano le finestre di manutenzione, perché fanno in modo che l'app Web venga aggiornata solo al termine dell'intera distribuzione. In questo modo si eliminano gli scenari in cui i file non vengono aggiornati correttamente. • Connettere il dominio personalizzato. Se gestisci il dominio in Amazon Route 53, la console Amplify connette automaticamente il root (yourdomain.com), i sottodomini www (www.yourdomain.com) e i sottodomini del ramo (https://dev.yourdomain.com). • Ottenere screenshot dell'app con rendering su diversi dispositivi mobili per individuare problemi di layout. 1
AWS Amplify Guida per l'utente della console Approfondimenti • Configurare riscritture e reindirizzamenti per mantenere le classificazioni SEO. • Proteggere con password l'app Web in modo da poter sviluppare nuove funzionalità senza renderle accessibili pubblicamente. Approfondimenti Nozioni di base (p. 3) sulla console Amplify. 2
AWS Amplify Guida per l'utente della console Fase 1: connessione del repository Nozioni di base Questa procedura guidata illustra come creare, distribuire e ospitare in modo continuo un'app Web moderna. Le app Web moderne includono framework di app a pagina singola (Single Page App, SPA) (ad esempio React, Angular o Vue) e generatori di siti statici (static-site generators, SSGs) (ad esempio Hugo, Jekyll o Gatsby). Per iniziare, accedi alla console Amplify e seleziona Inizia in Distribuzione. Fase 1: connessione del repository Connetti i repository GitHub, Bitbucket, GitLab o AWS CodeCommit. Dopo che avrai fornito l'autorizzazione alla console Amplify, Amplify recupera un token di accesso dal provider del repository, ma non lo archivia sui server AWS. Amplify accede al repository utilizzando chiavi di distribuzione installate solo in uno specifico repository. Dopo aver connesso il provider del servizio del repository, seleziona un repository, quindi scegli un ramo corrispondente da creare e distribuire. 3
AWS Amplify Guida per l'utente della console Fase 2: conferma delle impostazioni di compilazione per il front-end Fase 2: conferma delle impostazioni di compilazione per il front-end Amplify ispeziona il repository del ramo selezionato per rilevare automaticamente la sequenza di comandi di compilazione da eseguire. Importante: verifica che i comandi di compilazione e la directory dell'output di compilazione (artifactsbaseDirectory) siano corretti. Se devi modificare queste informazioni, seleziona Modifica per aprire l'editor YML. Puoi salvare le impostazioni di compilazione sui nostri server o scaricare l'editor YML e aggiungerlo alla root del repository (per i repository monolitici, devi archiviare l'editor YML nella directory root dell'app). 4
AWS Amplify Guida per l'utente della console Fase 3: conferma delle impostazioni di compilazione per il back-end (beta) Per ulteriori informazioni, consulta Struttura YML (p. 24). Fase 3: conferma delle impostazioni di compilazione per il back-end (beta) La console Amplify rileva le app che utilizzano il framework Amplify e può distribuire risorse back-end in un unico flusso di lavoro con la compilazione front-end. In questo modo puoi gestire gli ambienti di produzione e di test con il flusso di lavoro Git. Per distribuire una funzionalità di back-end tramite l'interfaccia a riga di comando di Amplify durante la compilazione, devi creare o riutilizzare un ruolo di servizio IAM. I ruoli IAM sono un modo sicuro per concedere alla console Amplify le autorizzazioni per intervenire sulle risorse nell'account. Nota: l'interfaccia a riga di comando di Amplify non funziona senza l'abilitazione di un ruolo di servizio IAM. Per ulteriori informazioni, consulta Distribuzione di un back-end serverless con la console Amplify (p. 12). 5
AWS Amplify Guida per l'utente della console Fase 4: aggiunta di variabili di ambiente (opzionale) Fase 4: aggiunta di variabili di ambiente (opzionale) Quasi tutte le app devono ricevere informazioni sulla configurazione in fase di runtime. Tali configurazioni possono includere dettagli sulla connessione del database, chiavi API o parametri diversi. Le variabili di ambiente sono un mezzo per esporre queste configurazioni in fase di compilazione. Fase 5: salvataggio e distribuzione Rivedi tutte le impostazioni per verificare che siano configurate correttamente. Seleziona Salva e distribuisci per distribuire la tua app Web in una rete di distribuzione di contenuti (content delivery network, CDN) globale. La compilazione del front-end in genere richiede da 1 a 2 minuti, ma la durata può variare in base alle dimensioni dell'app. Accedi alla schermata di log della compilazione selezionando un indicatore di avanzamento nel riquadro del ramo. Una compilazione presenta i seguenti passaggi: 1. Provisioning - l'ambiente di compilazione viene configurato utilizzando un'immagine Docker su un host con 4 vCPU e 7 GB di memoria. Ogni compilazione riceve la propria istanza host, facendo sì che tutte le risorse siano isolate in modo sicuro. I contenuti del file Docker vengono visualizzati per consentire all'immagine predefinita di soddisfare i tuoi requisiti. 2. Compilazione - la fase di compilazione consiste in tre passaggi: configurazione (clona il repository nel container). distribuzione del back-end (esegue l'interfaccia a riga di comando di Amplify per distribuire le risorse back-end) e compilazione del front-end (compila gli artefatti front-end). 3. Distribuzione - Al termine della compilazione, tutti gli artefatti vengono distribuiti in un ambiente di hosting gestito da Amplify. Ogni distribuzione è atomica - Le distribuzioni atomiche eliminano le finestre di manutenzione facendo in modo che l'app Web venga aggiornata solo dopo il completamento dell'intera distribuzione. 4. Verifica - Per verificare il corretto funzionamento dell'app, Amplify esegue il rendering di screenshot di index.html in più risoluzioni del dispositivo utilizzando Headless Chrome. 6
AWS Amplify Guida per l'utente della console Fasi successive Fasi successive • Aggiunta di un dominio personalizzato all'app (p. 8) • Gestione di più ambienti (p. 13) 7
AWS Amplify Guida per l'utente della console Aggiunta di un dominio personalizzato gestito in Amazon Route 53 Configurazione di domini personalizzati È possibile collegare all'applicazione un dominio personalizzato acquistato tramite registrar di domini (ad esempio, Amazon Route 53, GoDaddy e Google Domains). Quando si distribuisce l'applicazione Web con la console Amplify, viene ospitata su: https://branch-name.d1m7bkiki6tdw1.amplifyapp.com Quando si utilizza un dominio personalizzato, gli utenti vedono che l'applicazione è in hosting su un URL, come ad esempio il seguente: https://www.awesomedomain.com La console Amplify emette un certificato SSL per tutti i domini collegati all'applicazione, in modo che tutto il traffico sia protetto tramite HTTPS/2. Il certificato SSL generato da Amazon Certificate Manager è valido per 30 giorni e si rinnova automaticamente fintanto che l'applicazione è in hosting con Amplify. Argomenti • Aggiunta di un dominio personalizzato gestito in Amazon Route 53 (p. 8) • Aggiunta di un dominio personalizzato gestito da un provider di DNS terze parti (p. 9) • Gestione dei sottodomini (p. 11) • Associazione di un dominio (p. 11) Aggiunta di un dominio personalizzato gestito in Amazon Route 53 Dopo aver distribuito l'applicazione, è possibile aggiungere un dominio personalizzato da gestire con Amazon Route 53. 1. Nel riquadro di navigazione sinistro, scegliere App Settings (Impostazioni applicazione), Domain management (Gestione dominio), quindi scegliere Add domani (Aggiungi dominio). 2. In Enter your root domain (Inserire il dominio root), inserire il dominio root (https://awesomedomain.com). Come si inizia a digitare, nell'elenco compaiono i domini root gestiti in Amazon Route 53 (https:// awesomedomain.com). 3. Selezionare il dominio da utilizzare e scegliere Find Domain (Trova dominio) e Save (Salva). 8
AWS Amplify Guida per l'utente della console Aggiunta di un dominio personalizzato gestito da un provider di DNS terze parti La console Amplify aggiorna automaticamente i record DNS per il dominio root (https:// awesomedomain.com) e il sottodominio www (https://www.awesomedomain.com) in Amazon Route 53. Abbiamo anche configurato un reindirizzamento per https://www.awesomedomain.com che punta a https://awesomedomain.com (è possibile modificare questo parametro scegliendo Rewrites and redirects (Riscritture e reindirizzamenti) dal menu a sinistra). Nota In genere sono richiesti da 10 a 30 minuti affinché il DNS propaghi ed emetta il certificato SSL, ma possono anche volerci 24 ore. Per ulteriori informazioni sui messaggi di stato, vedere la sezione Associazione di un dominio (p. 11). Aggiunta di un dominio personalizzato gestito da un provider di DNS terze parti Dopo aver distribuito l'applicazione, è possibile aggiungere un dominio personalizzato gestito utilizzando un provider di DNS terze parti, qualora non si utilizzi Amazon Route 53. 1. Nel riquadro di navigazione sinistro, scegliere App Settings (Impostazioni applicazione), Domain management (Gestione dominio), quindi scegliere Add domani (Aggiungi dominio). 2. In Enter your root domain (Inserire il dominio root), inserire il dominio root (https://awesomedomain.com), quindi scegliere Find domain (Trova dominio). Se il dominio è registrato, un avviso di notifica verde avvisa di procedere se si è proprietari del dominio. Se il dominio è disponibile, acquistare un dominio su Amazon Route 53. 9
AWS Amplify Guida per l'utente della console Aggiunta di un dominio personalizzato gestito da un provider di DNS terze parti 3. Seleziona Salva. La console Amplify aggiunge due voci per https://www.awesomedomain.com e https:// awesomedomain.com con un reindirizzamento configurato dal sottodominio www verso il dominio root. Poiché il dominio è gestito esternamente, è necessario configurare manualmente il provider di DNS (ad esempio, GoDaddy o Google Domains). 4. Per assegnare un dominio alla distribuzione dell'applicazione, scegliere View DNS records (Visualizza record DNS) nel banner degli avvisi. 5. Aggiornare i record CNAME e ALIAS dei provider di DNS nel modo seguente. Per GoDaddy e Google Domains, vedere le istruzioni dettagliate contenute nella sezione Connessione a domini personalizzati terze parti (p. 30). a. Configurare il record CNAME in modo da far puntare tutti i sottodomini (https:// *.awesomedomain.com) al dominio amplifyapp. b. Configurare il record ANAME/ALIAS in modo da far puntare il dominio root (https:// awesomedomain.com) al dominio amplifyapp. I record ANAME consentono far puntare la root del proprio dominio a un nome host. Per i provider di DNS che non supportano ANAME/ALIAS, si consiglia vivamente di migrare il DNS su Amazon Route 53. c. Per generare un certificato SSL per il dominio, Amazon Certificate Manager (ACM) deve verificare la proprietà. Configurare un CNAME in modo che punti al server di convalida di ACM. Quando ACM convalida la proprietà del dominio, tutto il traffico viene servito tramite HTTPS/2. 10
AWS Amplify Guida per l'utente della console Gestione dei sottodomini Importante: la verifica della proprietà del dominio e la propagazione del DNS per domini terze parti può richiedere fino a 48 ore. Per ulteriori informazioni sui messaggi di stato, vedere Associazione di un dominio (p. 11). Gestione dei sottodomini Un sottodominio è la parte di URL visualizzata prima del nome di dominio (ad esempio, www. amazon.com o aws. amazon.com). Per i domini gestiti con Route 53, la console Amplify crea automaticamente sottodomini per tutti i branch connessi. Ad esempio, quando si connette un branch dev, la console Amplify crea una distribuzione su https://dev..amplifyapp.com senza richiedere ulteriori configurazioni. Se si desidera la stessa funzionalità per i provider terze parti, è necessario configurare il DNS. Se si desidera che la stessa funzionalità per i provider terze parti, configurare il DNS per consentire alla console Amplify di accedere con carattere jolly (*) a tutti i sottodomini. Associazione di un dominio Quando si associa un dominio alla distribuzione dell'applicazione Amplify, sono visualizzati i seguenti messaggi di stato: 1. In Progress (In corso): primo tentativo di aggiornamento del record DNS. Indica che Amplify è in grado di aggiornare i record gestiti in Route 53, ma non è in grado di farlo per i provider di DNS terze parti. 2. Pending verification (In attesa di verifica): prima di rilasciare un certificato SSL, Amazon Certificate Manager (ACM) deve verificare che l'utente sia il proprietario del dominio. I domini gestiti al di fuori di Amazon Route 53 di solito richiedono più tempo per la verifica. 3. Pending deployment (In attesa di distribuzione): dopo la verifica del dominio, il DNS viene propagato globalmente a tutti i 144 punti di presenza della nostra rete CDN. 4. Available (Disponibile) : il dominio viene associato correttamente all'app. 11
AWS Amplify Guida per l'utente della console Distribuzione di back-end serverless con il front-end (beta) Nota: questa funzionalità al momento è disponibile solo per gli utenti della versione beta di Amplify CLI, che supporta più ambienti. Iniziare a utilizzare la funzionalità installando Amplify CLI. npm install -g @aws-amplify/cli@multienv La console Amplify consente agli sviluppatori di creare app con il framework Amplify, per distribuire in modo continuo gli aggiornamenti ai propri back-end e front-end con ogni commit di codice. Con la console Amplify si possono distribuire back-end serverless dotati di API GraphQL, autenticazione, analisi e storage creati da Amplify CLI. 1. Connettere eventuali repository e branch inizializzati tramite Amplify CLI (nota: installare la versione beta di CLI: npm install -g @aws-amplify/cli@multienv). 2. La console Amplify rileva automaticamente i back-end forniti con Amplify CLI e aggiunge una fase di back-end al file YML di compilazione, che avrà il seguente aspetto: version: 1.0 env: variables: key: value backend: phases: build: - export STACKINFO="$(envCache --get stackInfo)" - amplifyPush --environment $AWS_BRANCH - envCache --set stackInfo "$(amplify env get --json --name $AWS_BRANCH)" amplifyPush: lo script amplifyPush è uno script di ausilio che permette agli utenti di specificare un nome ambiente come input ed esegue Amplify CLI per creare o aggiornare un ambiente. Alla prima compilazione, creiamo un ambiente di back-end che corrisponde al nome del branch connesso. $AWS_BRANCH è una variabile d'ambiente definita dal sistema. Per riutilizzare un ambiente Amplify esistente, modificare la variabile $AWS_BRANCH in modo che punti a env-name. Esempio di utilizzo: amplifyPush --environment ENV_NAME envCache: envCache fornisce l'archiviazione della coppia chiave-valore in fase di compilazione. La variabile envCache può essere modificato solo durante una compilazione ed essere riutilizzata alla compilazione successiva. Tramite envCache, è possibile archiviare informazioni sull'ambiente distribuito e renderle disponibili per compilare container durante compilazioni successive. Le variabili d'ambiente in un confronto non possono essere modificate durante una compilazione. Esempio di utilizzo: envCache --set envCache --get 3. Scegliere Next (Avanti) e Save and deploy (Salva e distribuisci). La compilazione dell'applicazione inizia distribuendo il back-end, quindi viene distribuito il front-end. 12
AWS Amplify Guida per l'utente della console Utilizzo di ambienti basati su rami Gestione di più ambienti e flussi di lavoro del team Utilizzo di ambienti basati su rami La console Amplify utilizza rami Git per creare nuovi ambienti ogni volta che uno sviluppatore connette un nuovo ramo nel repository. Dopo aver connesso il primo ramo, aggiungendone un altro è possibile creare un nuovo ambiente, nel modo seguente: 1. Nella pagina dell'elenco dei rami, selezionare Connetti ramo. 2. Scegliere un ramo dal repository. 3. Accettate le impostazioni di compilazione rilevate automaticamente o modificarle in base ai requisiti dell'app. 4. Salvare e distribuire l'app. Ora l'app ha due ambienti di front-end disponibili agli indirizzi https://master.appid.amplifyapp.com e https:// dev.appid.amplifyapp.com. Se l'app ha un back-end assegnato con l'interfaccia a riga di comando Amplify (beta), la console Amplify distribuisce back-end separati per ogni ramo. La connessione di un ramo crea ambienti di front-end e di back-end che permettono agli sviluppatori di lavorare in ambienti sandbox e di utilizzare Git come meccanismo per integrare i codici e risolvere conflitti. Utilizzo di flussi di lavoro del team Per i team che sviluppano app serverless con l'interfaccia a riga di comando Amplify, consigliamo quanto segue: 13
AWS Amplify Guida per l'utente della console Utilizzo di un flusso di lavoro centralizzato • Che ogni sviluppatore di un team crei un ambiente sandbox nel cloud che sia separato dal computer locale. In questo modo gli sviluppatori lavorano in modo reciprocamente isolato senza dover sovrascrivere le modifiche degli altri membri del team. • Che il team connetta i rami di produzione, test e funzionalità alla console Amplify. In questo modo la console Amplify utilizza il repository Git come unica sorgente da cui distribuire modifiche, invece che affidarsi agli sviluppatori del team per inviare manualmente il back-end o il front-end alla produzione dai computer locali. La console Amplify Console è progettata per funzionare con tutti i flussi di lavoro del team, come quello centralizzato, i flussi di lavoro GitFlow e il ramo di funzionalità. Utilizzo di un flusso di lavoro centralizzato Questo flusso di lavoro è utilizzato dai team che passano da SVN a Git. Con questo flusso di lavoro, ogni sviluppatore del team esegue il commit del codice direttamente sul ramo predefinito denominato master. Ogni sviluppatore clona una copia locale del repository, lavora in modo indipendente e invia il codice per integrarlo al ramo master. Ad esempio: 1. Connettere il ramo master alla console Amplify per ottenere una distribuzione continua. 2. Kita e Cody consultano localmente il ramo master, quindi eseguono il comando amplify init per configurare un back-end cloud in modo che apporti modifiche al front-end e al back-end dai computer locali. 3. Una volta che il codice è stato testato a livello locale, Kita invia il codice al ramo master. In questo modo inizia un processo di compilazione nella console Amplify che aggiorna tutti i contenuti del front-end o del back-end che sono stati modificati. L'esempio di riga di comando e il diagramma seguenti rappresentano il flusso di lavoro. > git fetch && git checkout master > amplify init ? Do you want to use an existing environment? false ? Enter a name for the environment kita-sandbox // Provide AWS Profile info // Test feature locally > npm run start > git commit -m "New feature" && git push origin master 14
AWS Amplify Guida per l'utente della console Utilizzo di un flusso di lavoro del ramo di funzionalità Utilizzo di un flusso di lavoro del ramo di funzionalità L'idea di fondo del flusso di lavoro del ramo di funzionalità è che il lavoro sulle caratteristiche si svolge in un ramo separato da quello master. Questo consente agli sviluppatori di sviluppare nuove funzionalità in un contesto isolato dalla produzione. Quando la funzionalità è pronta, viene integrata nel ramo master. Analogamente alla procedura per il flusso di lavoro centralizzato, tutti i membri del team lavorano sul ramo di funzionalità inviandovi aggiornamenti fino a quando il ramo non è pronto all'integrazione con il ramo master. Il ramo di funzionalità è connesso anche alla console Amplify (protetta da password) per una distribuzione continua, in modo che gli sviluppatori possano condividere aggiornamenti con le altre parti interessate. 15
AWS Amplify Guida per l'utente della console Utilizzo del flusso di lavoro GitFlow Utilizzo del flusso di lavoro GitFlow GitFlow utilizza due rami per registrare la cronologia del progetto. Il ramo master monitora solo il codice di rilascio, mentre il ramo di sviluppo viene utilizzato come ramo di integrazione per le nuove caratteristiche. GitFlow semplifica lo sviluppo parallelo isolando il nuovo sviluppo dal lavoro completato. Il nuovo sviluppo (come le funzionalità e le correzioni di bug non urgenti) viene svolto nei rami di funzionalità. Quando lo sviluppatore è sicuro che il codice sia pronto per il rilascio, il ramo di funzionalità viene ricollegato al ramo di sviluppo delle integrazioni. I soli commit al ramo master sono integrazioni provenienti dai rami di rilascio e hotfix (per correggere bug di emergenza). Il diagramma in basso mostra i rami generalmente connessi alla console Amplify in questo modello. 16
AWS Amplify Guida per l'utente della console Tipi di reindirizzamento Uso dei reindirizzamenti I reindirizzamenti permettono a un server Web di reinstradare la navigazione da un URL a un altro. I motivi più comuni per l'utilizzo dei reindirizzamenti includono: personalizzazione dell'aspetto di URL, evitare collegamenti interrotti, trasferire il percorso di hosting di un'applicazione o sito senza cambiare l'indirizzo e per modificare un URL richiesto verso il modulo necessario a un'applicazione Web. Tipi di reindirizzamento Esistono diversi tipi di reindirizzamenti che supportano scenari specifici. Permanent redirect (301) (Reindirizzamento permanente (301)) I reindirizzamenti 301 sono intesi per modifiche durature alla destinazione di un indirizzo Web. La cronologia di classificazione dei motori di ricerca per l'indirizzo originale è applicabile al nuovo indirizzo di destinazione. Il reindirizzamento si verifica lato client; una barra di navigazione del browser mostra l'indirizzo di destinazione dopo il reindirizzamento. Le comuni motivazioni per l'utilizzo dei reindirizzamenti 301 includono: • Per evitare un collegamento interrotto quando l'indirizzo di una pagina cambia. • Per evitare un collegamento interrotto quando un utente inserisce un refuso prevedibile in un indirizzo. I reindirizzamenti 302 servono per modifiche temporanee alla destinazione di un indirizzo Web. La cronologia di classificazione dei motori di ricerca per l'indirizzo originale non riguarda il nuovo indirizzo di destinazione. Il reindirizzamento si verifica lato client; una barra di navigazione del browser mostra l'indirizzo di destinazione dopo il reindirizzamento. Le comuni motivazioni per l'utilizzo dei reindirizzamenti 302 includono: • Per fornire una destinazione di deviazione, mentre si tengono riparazioni sull'indirizzo originale. • Per fornire pagine di prova per un confronto A/B dell'interfaccia utente. Rewrite (200) I reindirizzamenti 200 (riscritture) servono per mostrare contenuti dall'indirizzo di destinazione, come se venissero forniti dall'indirizzo originale. La cronologia di classificazione dei motori di ricerca continua a essere applicata all'indirizzo originale. Il reindirizzamento si verifica lato server; una barra di navigazione del browser mostra l'indirizzo originale dopo il reindirizzamento. Le comuni motivazioni per l'utilizzo dei reindirizzamenti 200 includono: • Per reindirizzare un intero sito in un nuovo percorso di hosting senza modificare l'indirizzo del sito. • Not Found (404) (Non trovato (404)) I reindirizzamenti 404 si verificano quando una richiesta punta a un indirizzo inesistente. Viene visualizzata la pagina di destinazione di un 404 invece di quella richiesta. Le comuni motivazioni per un reindirizzamento 404 includono: • Per evitare un messaggio collegamento interrotto quando un utente inserisce un URL sbagliato. 17
AWS Amplify Guida per l'utente della console Parti di un reindirizzamento • Per far puntare le richieste a pagine inesistenti di un'applicazione Web sulla pagina index.html, per la gestione da una funzione router lato client. Parti di un reindirizzamento I reindirizzamenti sono composti da: • Un indirizzo originale: l'indirizzo richiesto dall'utente. • Un indirizzo di destinazione: l'indirizzo che effettivamente serve i contenuti visualizzati dall'utente. • Un tipo di reindirizzamento: i tipi includono un reindirizzamento permanente (301), un reindirizzamento temporaneo (302), una riscrittura (200) o non trovato (404). • Un codice nazione di due lettere (opzionale): un valore che può essere incluso per segmentare l'esperienza utente con l'applicazione per regione Per modificare in blocco in un editor JSON, scegliere Open text editor (Apri editor di testo). Ordine dei reindirizzamenti I reindirizzamenti vengono eseguiti partendo dall'inizio dell'elenco. Controllare che l'ordinamento abbia l'effetto inteso. Ad esempio, il seguente ordine di reindirizzamenti causa il reindirizzamento di tutte le richieste per uno specifico percorso sotto a /docs/ nello stesso percorso sotto a /documents/, tranne /docs/ specific-filename.html che viene reindirizzato su /documents/different-filename.html: /docs/specific-filename.html /documents/diferent-filename.html 301 /docs/ /documents/ Il seguente ordine di reindirizzamenti ignora il reindirizzamento di specific-filename.html su different- filename.html: /docs/ /documents/ 18
AWS Amplify Guida per l'utente della console Reindirizzamenti e riscritture semplici /docs/specific-filename.html /documents/diferent-filename.html 301 Reindirizzamenti e riscritture semplici In questa sezione sono inclusi codici di esempio per i più comuni scenari di reindirizzamento. È possibile utilizzare il seguente codice di esempio per reindirizzare definitivamente una pagina specifica a un nuovo indirizzo. Indirizzo originale Indirizzo di destinazione Tipo di reindirizzamento Codice del paese /original.html /destination.html permanent redirect (301) JSON: [{"source": "/original.html", "status": "301", "target": "/destination.html", "condition": null}] Il seguente codice di esempio può essere utilizzato anche per reindirizzare un percorso di una cartella allo stesso percorso con una cartella diversa. Indirizzo di destinazione Tipo di reindirizzamento Codice del paese docs/ /documents/ permanent redirect (301) JSON [{"source": "/docs/", "status": "301", "target": "/documents/", "condition": null}] Il seguente codice di esempio serve per reindirizzare tutto il traffico su index.html, come riscrittura. In questo scenario, la riscrittura fa credere all'utente di aver raggiunto l'indirizzo originale. Indirizzo originale Indirizzo di destinazione Tipo di reindirizzamento Codice del paese index.html rewrite (200) JSON [{"source": "/", "status": "200", "target": "/index.html", "condition": null}] Il seguente codice di esempio serve per l'utilizzo di una riscrittura, utile a modificare il sottodominio visualizzato all'utente. Indirizzo originale Indirizzo di destinazione Tipo di reindirizzamento Codice del paese https:// https:// rewrite (200) mydomain.com www.mydomain.com JSON [{"source": "https://mydomain.com", "status": "200", "target": "https://www.mydomain.com", "condition": null}] Il seguente codice di esempio serve per reindirizzare i percorsi verso una cartella impossibile da trovare a una pagina 404 personalizzata. Indirizzo originale Tipo di reindirizzamento Codice del paese 19
AWS Amplify Guida per l'utente della console Reindirizzamenti per applicazioni Web su singola pagina (SPA) / /404.html not found (404) JSON [{"source": "/", "status": "404", "target": "/404.html", "condition": null}] Reindirizzamenti per applicazioni Web su singola pagina (SPA) La maggior parte dei framework SPA supporta l'istruzione history.pushState() di HTML5 per modificare la posizione del browser senza attivare una richiesta server. Funziona per gli utenti che iniziano il proprio percorso dalla root (o da /index.html), ma fallisce per gli utenti che accedono direttamente a qualsiasi altra pagina. Utilizzando le espressioni regolari, l'esempio seguente imposta fino a 200 riscritture per tutti i file su index.html, tranne per le specifiche estensioni di file indicate nell'espressione regolare. Indirizzo originale Indirizzo di destinazione Tipo di reindirizzamento Codice del paese JSON [{"source": "", "status": "200", "target": "index.html", "condition": null}] Riscrittura proxy inverso L'esempio seguente utilizza una riscrittura per trasferire i contenuti da un altro percorso, in modo che all'utente sembri che il dominio non è cambiato: Indirizzo di destinazione Tipo di reindirizzamento Codice del paese /images https:// rewrite (200) images.otherdomain.com JSON [{"source": "/images", "status": "200", "target": "https://images.otherdomain.com", "condition": null}] Barre finali e URL puliti Per creare strutture URL pulite, come about anziché about.html, i generatori di siti statici, come Hugo, generano directory per le pagine con index.html (/about/index.html). La console Amplify crea automaticamente URL puliti aggiungendo barre finali, quando necessario. La tabella seguente illustra diversi scenari: Input utente dal browser URL nella barra degli indirizzi Documento fornito 20
AWS Amplify Guida per l'utente della console Placeholder /about /about /about.html /about (when about.html /about/ /about/index.html returns 404) /about/ /about/ /about/index.html Placeholder È possibile utilizzare il seguente codice di esempio per reindirizzare percorsi in una struttura di cartelle a una struttura corrispondente in un'altra cartella. Indirizzo originale Indirizzo di destinazione Tipo di reindirizzamento Codice del paese /docs// /documents// permanent redirect // // (301) JSON [{"source": "/docs////", "status": "301", "target": "/documents////", "condition": null}] Stringhe di query e parametri di percorso Indirizzo originale Indirizzo di destinazione Tipo di reindirizzamento Codice del paese /docs?id=
AWS Amplify Guida per l'utente della console Reindirizzamenti in base alla regione Indirizzo originale Indirizzo di destinazione Tipo di reindirizzamento Codice del paese /documents /documents/us/ 302 JSON [{"source": "/documents", "status": "302", "target": "/documents/us/", "condition": ""}] 22
AWS Amplify Guida per l'utente della console Limitazione dell'accesso Proteggere mediante password i feature branch non pronti per l'accesso pubblico. 1. Scegliere App settings (Impostazioni applicazione), quindi Access control (Controllo degli accessi). 2. Nell'elenco dei branch collegati, scegliere Manage access (Gestisci accesso) nell'angolo in alto a destra. 3. Scegliere una delle seguenti operazioni: • È possibile impostare una password globale da applicare a tutti branch connessi. Ad esempio, in caso di branch master, dev e feature connessi, è possibile utilizzare una password globale per impostare lo stesso nome utente e la stessa password per tutti i branch. • Si può impostare una password a livello di branch. 23
AWS Amplify Guida per l'utente della console Sintassi della specifica YML Configurazione delle impostazioni di compilazione La console Amplify rileva automaticamente il framework del front-end e le relative impostazioni di compilazione, ispezionando il file package.json sul repository. Sono disponibili le seguenti opzioni: • Salvare le impostazioni di compilazione nella console Amplify: la console Amplify rileva automaticamente le impostazioni di compilazione e le salva, in modo che siano accessibili dalla console Amplify. Queste impostazioni vengono applicate a tutti i branch, a meno che non venga trovato un file YML sul repository. • Salvare le impostazioni di compilazioni sul repository: scaricare il file amplify.yml e aggiungerlo alla root del repository (o alla root della cartella dell'applicazione per i monorepo). È possibile modificare queste impostazioni nella console Amplify, scegliendo App Settings>Build settings (Impostazioni applicazione>Impostazioni di compilazione). Le impostazioni di compilazione vengono applicate a tutti i branch dell'applicazione, tranne quelli con un file YML salvato sul repository. Sintassi della specifica YML Il file YML di specifica della compilazione contiene una raccolta di comandi di compilazione e impostazioni correlate utilizzate dalla console Amplify per eseguire la compilazione. La struttura del file YML è la seguente: version: 1.0 env: variables: key: value backend: phases: preBuild: commands: - *enter command* build: commands: - *enter command* postBuild: commands: - *enter command* frontend: phases: preBuild: commands: - cd react-app - npm ci build: commands: - npm run build artifacts: files: - location - location discard-paths: yes baseDirectory: location cache: 24
AWS Amplify Guida per l'utente della console Scenari di compilazione paths: - path - path • version: rappresenta il numero di versione YML della console Amplify. • env: aggiungere variabili d'ambiente in questa sezione. Si possono aggiungere variabili d'ambiente anche dalla console. • backend: esegue i comandi di Amplify CLI per il provisioning di un back-end, l'aggiornamento di funzioni Lambda o schemi GraphQL, come parte di una distribuzione continua. Scopri come distribuire un back- end con il front-end (p. 12). • frontend: esegue i comandi di compilazione del front-end. • Sia front-end che back-end dispongono di tre phases, che rappresentano i comandi eseguiti in ogni sequenza della compilazione. • preBuild: lo script di pre-compilazione viene eseguito prima dell'inizio effettivo della compilazione, ma dopo aver installato le dipendenze. • build: i comandi di compilazione. • postBuild: lo script post-compilazione viene eseguito al termine della compilazione e dopo aver copiato tutti gli artefatti necessari nella directory di output. • artifacts>base-directory: la directory in cui si trovano artefatti di compilazione. • artifacts>files: specificare i file dall'artefatto da distribuire. **/* per includerli tutti. Scenari di compilazione I seguenti scenari descrivono come scrivere un YML di compilazione. Uso di impostazioni di compilazione specifiche per il branch Per configurare impostazioni di compilazione specifiche per il branch, aggiungere l'YML buildspec alla root del repository. L'operazione può essere eseguita in uno dei seguenti modi: • Quando si collega un nuovo branch scegliere Edit (Modifica). Apportare le modifiche, quindi scegliere Save and add to my repo (Salva e aggiungi al mio repository). La console Amplify aggiunge automaticamente il file YML al repository quando si distribuisce il branch. Nota: per non applicare queste impostazioni a tutti i branch, controllare di non aver unito in file negli altri branch. • Sulla console Amplify, scegliere App Settings (Impostazioni applicazione), quindi Build settings (Impostazioni di compilazione) e Download (Download). Apportare le modifiche, quindi aggiungere il file alla root del repository. Esplorazione di una sottocartella Per i monorepo, gli utenti vogliono poter eseguire comandi cd in una cartella, per eseguire la compilazione. Dopo aver eseguito il comando cd, viene applicato a tutte le fasi di compilazione, in modo da non dover ripetere il comando in fasi separate. version: 1.0 env: variables: key: value frontend: phases: 25
AWS Amplify Guida per l'utente della console Distribuzione del back-end con il front-end preBuild: commands: - cd react-app - npm ci build: commands: - npm run build Distribuzione del back-end con il front-end Utilizzare Amplify CLI per distribuire un back-end con il front-end. Scopri di più (p. 12) su come i comandi envCache e amplifyPush agevolino le distribuzioni del back-end. $AWS_BRANCH è una variabile d'ambiente definita dal sistema che seleziona il branch attuale. Le impostazioni di compilazione sottostanti distribuiscono un nuovo ambiente di back-end collegato a ogni feature branch. version: 1.0 env: variables: key: value backend: phases: build: commands: - export STACKINFO="$(envCache --get stackInfo)" - amplifyPush --environment $AWS_BRANCH - envCache --set stackInfo "$(amplify env get --json --name $AWS_BRANCH)" Impostazione della cartella di output Le seguenti impostazioni di compilazione impostano la directory di output per la cartella pubblica. frontend: phases: commands: build: - yarn run build artifacts: baseDirectory: public Installazione di pacchetti in fase di compilazione Per installare pacchetti durante la compilazione, è possibile utilizzare npm o yarn. frontend: phases: build: commands: - npm install -g pkg-foo - pkg-foo deploy - yarn run build artifacts: baseDirectory: public Uso di un registro npm privato Si possono aggiungere riferimenti a un registro privato nelle impostazioni di compilazione oppure come variabile d'ambiente. 26
AWS Amplify Guida per l'utente della console Installazione di pacchetti del sistema operativo build: phases: preBuild: commands: - npm config set - npm config set registry https://registry.npmjs.org - npm config set always-auth true - npm config set email hello@amplifyapp.com - yarn install Installazione di pacchetti del sistema operativo È possibile installare pacchetti del sistema operativo per le dipendenze mancanti. build: phases: preBuild: commands: - yum install -y 27
AWS Amplify Guida per l'utente della console Impostazione delle variabili d'ambiente Variabili di ambiente Le variabili d'ambiente sono coppie di chiave-valore disponibili in fase di compilazione. Queste configurazioni possono rappresentare qualsiasi cosa, tra cui: • Dettagli di connessione al database • Chiavi API terze parti • Diversi parametri di personalizzazione • Segreti Come best practice, si possono utilizzare variabili d'ambiente per esporre queste configurazioni. Tutte le variabili d'ambiente aggiunte sono crittografate per evitare accessi non autorizzati, in modo da poterle utilizzare per archiviare informazioni riservate. Impostazione delle variabili d'ambiente 1. Sulla console Amplify, scegliere App Settings (Impostazioni applicazione), quindi Environment Variables (Variabili d'ambiente). 2. Nei campi key (chiave) e value (valore), inserire tutte le variabili d'ambiente dell'applicazione. Per impostazione predefinita, la console Amplify applica le variabili d'ambiente a tutti i branch. Pertanto non è necessario immetterle nuovamente quando si collega un nuovo branch. 3. Seleziona Salva. Per personalizzare una variabile appositamente per un branch, si può aggiungere un override del branch. Per eseguire questa operazione, scegliere Actions (Azioni), quindi scegliere Add variable override (Aggiungi override variabile). A questo punto è stata impostato un set di variabili d'ambiente specifiche per il branch. Accesso alle variabili d'ambiente Per accedere a una variabile d'ambiente durante una compilazione, modificare le impostazioni di compilazione, inclusa la variabile d'ambiente nei comandi di compilazione. 28
AWS Amplify Guida per l'utente della console Accesso alle variabili d'ambiente 1. Sulla console Amplify, scegliere App Settings (Impostazioni applicazione), quindi Build settings (Impostazioni di compilazione) e Edit (Modifica). 2. Aggiungere la variabile d'ambiente al comando di compilazione. Ora dovrebbe essere possibile accedere alla variabile d'ambiente durante la prossima compilazione. build: commands: - npm run build:$BUILD_ENV 29
AWS Amplify Guida per l'utente della console Connessione a un dominio GoDaddy Connessione a domini personalizzati terze parti Connessione a un dominio GoDaddy 1. Attenersi alle istruzioni per aggiungere un dominio (p. 8) per provider terze parti. 2. Accedere al proprio account su GoDaddy e scegliere il DNS. 3. Aggiungere record CNAME tali da far puntare tutti i sottodomini al dominio amplifyapp e un altro record CNAME che punti al server di convalida di Amazon Certificate Manager. Un singolo ACM convalidato genera un certificato SSL per il dominio. Controllare di aver inserito solo il sottodominio (ad esempio, ) in **Host*, come mostrato sotto (non inserire yourdomainname.com). GoDaddy non supporta i record ANAME/ALIAS. Per i provider di DNS senza supporto di ANAME/ALIAS, si consiglia vivamente di migrare il DNS su Amazon Route 53. Se invece si vuole mantenere il provider 30
AWS Amplify Guida per l'utente della console Connessione a un dominio Google attuale e aggiornare il dominio root, aggiungere Forwarding (Inoltro) e configurare un inoltro del dominio. In Forward to (Inoltra a), immettere le informazioni seguenti: Connessione a un dominio Google 1. Attenersi alle istruzioni per aggiungere un dominio (p. 8) per provider terze parti. 2. Accedere al proprio account su https://domains.google e scegliere il DNS. 3. In Custom resource records (Record risorse personalizzati), inserire i record CNAME che devono far puntare tutti i sottodomini (https://*.awesomedomain.com) al dominio amplifyapp e un altro record CNAME che punti al server di convalida di Amazon Certificate Manager. Un singolo ACM convalidato genera un certificato SSL per il dominio. 31
AWS Amplify Guida per l'utente della console Connessione a un dominio Google I domini Google non supportano i record ANAME/ALIAS. Per i provider di DNS senza supporto di ANAME/ ALIAS, si consiglia vivamente di migrare il DNS su Amazon Route 53. Se invece si vuole mantenere il provider attuale e aggiornare il dominio root, aggiungere un Synthetic Record (Record sintetico) e configurare un Subdomain Forward (Inoltro del sottodominio). In Subdomain (Sottodominio), inserire il simbolo @, quindi scegliere Forward path (Inoltra percorso) come specificato di seguito: 32
AWS Amplify Guida per l'utente della console Fase 1: creazione di un ruolo di servizio Aggiunta di un ruolo di servizio alla console Amplify quando si connette un'applicazione La console Amplify richiede le autorizzazioni per distribuire le risorse di back-end con il front-end. Per eseguire questa operazione, è possibile utilizzare un ruolo di servizio. Un ruolo di servizio è il ruolo IAM che la console Amplify assume quando chiama altri servizi per conto dell'utente. Fase 1: creazione di un ruolo di servizio Fare clic con il pulsante destro del mouse sul collegamento seguente e scegliere Open link in new tab (Apri collegamento in una nuova scheda). Si apre la console CloudFormation con i valori predefiniti preselezionati. Fase 2: accettare tutte le impostazioni predefinite sulla console AWS CloudFormation Nella console di CloudFormation, accettare tutte le impostazioni predefinite sulle quattro schermate per la creazione di un ruolo. Questo ruolo consente alla console Amplify di distribuire le risorse del back-end durante una compilazione. Fase 3: tornare alla console Amplify Nella schermata di onboarding della console Amplify, scegliere refresh (aggiorna), quindi selezionare il ruolo appena creato. Dovrebbe essere simile a AmplifyConsoleServiceRole-AmplifyRole-XXXXXXXXXXX. La console Amplify ora dispone delle autorizzazioni per distribuire le risorse del back-end. 33
Puoi anche leggere