= Distribuisci le app React su Amazon S3 =
== Guida di 5 minuti su come distribuire le app React con S3 ==
Quindi hai completato la tua app React e stai cercando di ospitarla da qualche parte. Sapevi che puoi utilizzare Amazon AWS S3 per ospitare le tue app React? È relativamente facile, economico e veloce da implementare.
= Iniziamo! =
== Prerequisiti ==
Prima di passare all'hosting, eseguiamo la configurazione amministrativa. Assicurati che quanto segue sia stato completato:
**Disponi di un account AWS Registrati per un account AWS qui: httpsaws.amazon.com/resources/create-account/ **Crea un utente AWS Nella console AWS, vai alla scheda IAM e vai alla pagina à ¢ÃÂÃÂUsersâÃÂànella barra laterale.
Fare clic su âÃÂÃÂAggiungi utenteâÃÂàe selezionare âÃÂÃÂAccesso programmaticoâàÃÂ.
Fai clic su âÃÂÃÂAvanti: AutorizzazioniâÃÂàe qui seleziona âÃÂÃÂAllega policy esistenti direttamenteâà ÂÃÂ. Selezionare âÃÂÃÂAdministratorAccessâÃÂàper lo scopo della distribuzione.
Fare clic sui pulsanti Avanti e infine fare clic su âÃÂÃÂCrea utenteâÃÂÃÂ.
Nella fase finale, riceviamo un ID chiave di accesso e una chiave di accesso segreta. Scarica e
**salvali sul tuo computer poiché ne avrai bisogno in seguito
== Installa AWS CLI ==
L'AWS CLI è un potente strumento che può aiutarci a semplificare il processo di distribuzione.
Consente di installare AWS CLI utilizzando Homebrew (per macOS). Installa Homebrew se non l'hai già fatto.
*Nota: se utilizzi Windows, puoi trovare le istruzioni nei documenti ufficiali * *qui*
Apri il tuo terminale ed entra
brew install awscli.
Una volta installato lo strumento CLI, possiamo configurare il nostro account AWS con
configurare aws. Qui è dove dovrai inserire le informazioni sulla chiave di accesso che hai precedentemente scaricato. Dovrebbe essere qualcosa di simile al seguente.
Per la regione, puoi controllare il tuo URL sulla console AWS e menzionerà la tua regione. Ad esempio, il mio è âÃÂÃÂap-southeast-1âÃÂÃÂ.
= Creazione di un'app React =
Potresti già avere la tua app React pronta per essere distribuita. Tuttavia, se hai bisogno di un'app di esempio, puoi utilizzare le seguenti opzioni:
- Genera un'app React boilerplate eseguendo
npx crea-reagisci-app mia-app
- Scarica la mia app React di esempio (con un esempio di modulo) da httpsgithub.com/harishv7/react-hook-form-example. Questo è stato fatto per un tutorial per aggiungere moduli alle app React. Controllalo qui.
Una volta fatto, assicurati che tutte le dipendenze siano installate utilizzando
Yarn installa e prova l'app usando
inizio del filato.
= Imposta un bucket S3 =
Ora che abbiamo la nostra app di esempio pronta, configuriamo un bucket S3 per ospitare la nostra app.
Nella console AWS, cerca âÃÂÃÂS3âÃÂàe vai a S3 Dashboard. Fare clic su âÃÂÃÂCrea bucketâÃÂàe assegnare al bucket un nome come âÃÂÃÂmy-react -app-2021âÃÂà(o qualsiasi altra cosa desideri).
*Nota: il nome del bucket deve essere univoco in tutta S3. Quindi scegli un nome univoco che non esiste, altrimenti riceverai un errore!* 
Attiva l'accesso pubblico al bucket poiché lo stiamo ospitando dal vivo.
Lascia il resto delle impostazioni così come sono e fai clic su âÃÂÃÂCrea bucketâÃÂÃÂ. Vedrai una voce come la seguente sulla tua dashboard S3.
Facciamo clic e andiamo nel nostro bucket S3 appena creato.
Facciamo clic su âÃÂÃÂPropertiesâÃÂàe scorri fino in fondo dove lo farai vedi âÃÂÃÂHosting di siti web staticiâÃÂÃÂ.
Fare clic su âÃÂÃÂEnableâÃÂàe inserire âÃÂÃÂindex.htmlâààsotto Indice documento.
Lascia invariati gli altri campi e clicca su âÃÂÃÂSalva modificheâÃÂÃÂ.
= Distribuzione su S3 =
Ora siamo pronti per distribuire la nostra app su S3. Il modo per farlo è utilizzare il seguente comando CLI:
aws s3 sync build/ s3your-bucket-name>--acl public-read
Possiamo aggiungere questo comando anche al nostro file package.json come script âÃÂÃÂdeployâÃÂÃÂ.
Costruiamo la nostra app utilizzando
struttura del filato che aiuta a creare una struttura di produzione ottimizzata.
Successivamente, eseguiamo il comando CLI sopra indicato o se hai impostato il tuo script di pubblicazione in package.json, possiamo usare
distribuzione del filato.
Ecco fatto, la nostra app è ora distribuita!
Per scoprire dove è ospitata la nostra app (il collegamento al sito Web), vai alla console AWS S3 e fai clic sul bucket che hai creato.
Vai alla scheda âÃÂÃÂProprietàâÃÂàe scorri verso il basso fino al sito Web statico âÃÂàsezione hostingâÃÂàe il nostro URL sarà lì.
Fai clic su di esso e l'app si aprirà in una nuova scheda. Ecco il mio!
= Conclusione =
Abbiamo distribuito con successo la nostra app React su Amazon S3! Questa è un'ottima scelta per implementare e testare rapidamente i tuoi prototipi React e condividerli con altri. È anche molto facile e veloce da implementare.
Spero che questo tutorial ti sia stato utile!
Buona programmazione! ðÃÂÃÂû
*Altri contenuti su * *plainenglish.io*
HOSTING WEB CONDIVISO#7
