= Come utilizzare AWS Amplify per distribuire un'applicazione React =
== Una guida alla distribuzione di applicazioni React con AWS Amplify ==
Da quando ho iniziato a fare consulenza come ingegnere del software, ho voluto mettere insieme un sito Web portfolio che mostrasse il
progetti personali e professionali su cui ho lavorato. Durante la pausa invernale, ho dedicato del tempo a progettare, sviluppare e distribuire il mio sito portfolio e, in questo articolo, ti illustrerò come l'ho distribuito con AWS Amplify. È possibile visualizzare il sito Web all'indirizzo dan-murphy.com e il codice su GitHub.
= Un breve background =
La maggior parte del mio lavoro professionale comporta la creazione di applicazioni basate sui dati e l'ottimizzazione delle pipeline di dati. Per svolgere queste attività, utilizzo regolarmente Python e Ruby e incorporo JavaScript per qualsiasi lavoro di frontend. Nel tentativo di sentirmi più a mio agio con React, ho deciso di utilizzare il framework per creare il mio sito Web di portfolio.
= Impostazione dell'applicazione =
Il primo passo che ho fatto è stato decidere come strutturare l'applicazione. ho utilizzato
create-react-app come modello di base per le mie directory, quindi ho ristrutturato l'applicazione con alcune cartelle aggiuntive. La configurazione finalizzata è simile a questa:
src
componenti
âÃÂÃÂarchivi
âÃÂÃÂextra
âÃÂÃÂdati
âÃÂÃÂimgs
pagine
âÃÂÃÂcontenuto
âÃÂÃÂdati
stili
test
infissi
Alcuni dei cambiamenti notevoli sono il
**componenti**
, E
**pagine**
directory.
**stili**
,
: Qui è dove memorizzo tutti i componenti per l'applicazione. Memorizzando i componenti in una cartella centralizzata, è più facile riutilizzare e rifattorizzare il mio codice e più intuitivo da capire per gli altri. Alcuni dei componenti che compongono il sito web del mio portfolio lo sono
componenti
Intestazione,
Piè di pagina e
Barra laterale del progetto.
: Qui è dove costruisco le pagine distinte per l'applicazione. Importo i componenti necessari dal file
pagine
cartella e quindi aggregarli per progettare la pagina. Ecco un esempio di come l'ho fatto per il
home page dei componenti:
: Qui è dove definisco gli stili CSS globali per l'applicazione. Mi piace usare
stili
styled-components per singoli componenti, ma ho anche trovato utile creare stili globali disponibili per ogni pagina.
Infine, per mappare le richieste alle pagine corrette, utilizziamo
reagisci-router-dom. I percorsi sono definiti nel
File App.js come mostrato di seguito:
Questo mapperà
Pagina iniziale,
/progetti richieste a
Pagina Progetti,
/sulle richieste a
Informazioni sulla pagina e
/bookshelf richieste a
Pagina libro. Ora che lo sviluppo dell'applicazione è completo, dobbiamo distribuirlo in modo che altri possano usarlo!
/richieste a
= Distribuzione con AWS Amplify =
== Panoramica ==
Esistono diversi modi per distribuire un sito Web React, ma ho scoperto che uno dei più semplici è utilizzare
**AWS Amplify Amplify è descritto come il modo âÃÂÃÂpiù rapido e semplice per creare app mobili e Web scalabili.âÃÂàPer raggiungere questo obiettivo, AWS estrapola tutte le complicazioni della configurazione di un server, dell'installazione delle dipendenze e della creazione di una build di produzione del tuo sito Web, consentendoti di concentrarti esclusivamente sulla creazione di un'esperienza utente intuitiva. Per ulteriori informazioni su cosa offre AWS Amplify per le applicazioni basate sui dati (in particolare, i siti Web con un **frontend** e un **backend) consulta la relativa documentazione.
== Collegamento del tuo repository ==
Per ospitare la tua app Web su AWS Amplify, devi prima connettere il repository contenente il codice sorgente. Per fare ciò, puoi navigare nel file
*AWS Amplify* *Guida introduttiva* **Ospita My Web App e fai clic su **Connetti repository app *pagina, scorri fino a*pagina, scorri fino a 
Quindi, verrai reindirizzato a una pagina separata in cui puoi connetterti al repository contenente il tuo codice sorgente. Per questo esempio, sceglierò GitHub, ma AWS Amplify supporta anche BitBucket, GitLab, AWS CodeCommit e persino la distribuzione senza un provider Git.
Dopo aver ottenuto l'autorizzazione, puoi selezionare il repository che desideri distribuire e selezionare il ramo che AWS Amplify deve utilizzare per le build di produzione.
Successivamente, fai clic
**Avanti** e AWS ti chiederà di configurare le impostazioni di *build* e *test*. Il modello di base fornito da AWS è mostrato di seguito.
versione: 1
fine frontale:
fasi:
precompilazione:
comandi:
- build di installazione npm:
comandi:
- npm esegue la compilazione
artefatti:
baseDirectory: build
File:
-
cache:
percorsi:
- node_modules
Inoltre, sotto il
**impostazioni avanzate** attiva/disattiva, puoi impostare variabili di ambiente e un contenitore di build personalizzato.
Infine, dopo aver esaminato le impostazioni per la tua applicazione, fai clic su
**Salva e distribuisci **e **AWS inizierà a configurare e distribuire la tua applicazione. Al termine della distribuzione di AWS, puoi accedere alla home page di Amplify e visualizzare l'applicazione appena distribuita. AWS inizierà a configurare e distribuire la tua applicazione. Al termine della distribuzione di AWS, puoi accedere alla home page di Amplify e visualizzare l'applicazione appena distribuita.
Ora, personalizziamo l'URL utilizzando
**Gestione del dominio AWS Amplify
== Aggiunta di un dominio personalizzato ==
Per iniziare ad aggiungere un dominio personalizzato, vai alla barra laterale sinistra e seleziona
**gestione del dominio 
**impostazione di gestione del dominio**.
Quindi, seleziona
**aggiungi dominio **configura dominio **inserisci il tuo nome di dominio (come mostrato di seguito) e fai clic su**inserisci il tuo nome di dominio (come mostrato di seguito) e fai clic su 
Successivamente, puoi impostare tutti i reindirizzamenti necessari per il tuo dominio. Ad esempio, nell'esempio seguente creo un reindirizzamento da httpsdan-murphy.com a httpswww.dan-murphy.com.
Infine, dopo che il tuo dominio personalizzato è stato configurato correttamente, AWS ti fornirà un file
**Certificato di convalida Puoi anche visualizzare questo certificato nella console AWS Certificate Manager.
== Aggiunta di un record CNAME ==
L'ultimo passaggio nella configurazione del tuo dominio personalizzato è l'aggiunta di un record CNAME. Nell'esempio seguente utilizzo Google Domains, ma i concetti fondamentali rimangono gli stessi tra diversi registrar di domini.
Innanzitutto, scorri verso il basso fino a
**Record di risorse personalizzati** in Google Domains. Crea un record *CNAME * che indirizzi tutti i sottodomini al dominio AWS Amplify: Nome: inserisci il nome del sottodominio. Se il sottodominio è www.domain.com, inserisci . Se è www app.domain.com, inserisci app. Dati: nella pagina di gestione del dominio, fai clic su Azioni, quindi seleziona Visualizza record DNS. Quindi, inserisci il dominio AWS Amplify disponibile in Configure DNS provider. 
Nella pagina **Gestione domini**, seleziona **Azioni **Visualizza record DNS**
Complessivamente, il record della risorsa personalizzata sarà simile al seguente:
Quindi, aggiungine un altro
Record *CNAME* che punta al server di convalida AWS Certificate Manager. L'AWS Certificate Manager convalidato gestisce TLS per la tua applicazione: Nome: inserisci il sottodominio del server di convalida. Se il record DNS per la verifica della proprietà del tuo dominio è _1234.example.com, inserisci solo _1234. Dati: inserire il certificato di convalida ACM. Se il server di convalida è _1234.abcdefg.acm-validations.aws., immettere _1234.abcdefg.acm-validations.aws.
Tutte le informazioni per i certificati di convalida si trovano nella console AWS Certificate Manager. Dopo il secondo
*CNAME* viene aggiunto, i tuoi record personalizzati dovrebbero avere questo aspetto: 
Infine, aggiungiamo a
**Record sintetico** per impostare un inoltro di sottodominio: Sottodominio: inserisci l'URL del dominio: www. 
= Conclusione =
Nel complesso, in questo articolo, abbiamo imparato come strutturare le applicazioni React e distribuirle con AWS Amplify. Innanzitutto, abbiamo discusso su come modularizzare un'applicazione di reazione in
*componenti* *pagine* cartelle. Quindi, abbiamo appreso di **AWS Amplify** e di come distribuire applicazioni statiche e basate sui dati con esso. Infine, abbiamo imparato a utilizzare **AWS Amplify Domain Management** e **Google Domains **per personalizzare il dominio della nostra applicazione. **e e
Se hai domande, dubbi o feedback su questo articolo o sul sito del mio portfolio, non esitare a commentare o inviarmi un'e-mail a
*
[email protected]*. Grazie per aver letto!
