= Implementați aplicațiile React pe Amazon S3 =
== Ghid de 5 minute despre cum să implementați React Apps cu S3 ==
Deci ați completat aplicația React și doriți să o găzduiți undeva. Știați că puteți folosi Amazon AWS S3 pentru a vă găzdui aplicațiile React? Este relativ ușor, ieftin și rapid de implementat.
= Să începem! =
== Cerințe preliminare ==
Înainte de a intra în găzduire, să facem configurarea administrativă. Asigurați-vă că sunt completate următoarele:
**Aveți un cont AWS Înscrieți-vă pentru un cont AWS aici: httpsaws.amazon.com/resources/create-account/ **Creați un utilizator AWS În Consola AWS, accesați fila IAM și accesați à ¢ÃÂÃÂUtilizatoriâ¢ÃÂàsecţiunea din bara laterală.
Faceți clic pe „Adăugați utilizator” și bifați „Acces programat” ÃÂ.
Faceți clic pe âÃÂÃÂUrmătorul: Permisiuniâ¢ÃÂàși selectați aici âÃÂÃÂAtașați direct politicile existente... ÂÃÂ. Bifați âÃÂÃÂAdministratorAccessâÃÂàpentru scopul implementării.
Faceți clic pe butoanele Următorul și, în cele din urmă, faceți clic pe „Creare utilizator“.
În pasul final, primim un ID cheie de acces și o cheie de acces secretă. Descărcați și
**Salvați-le pe computer, deoarece veți avea nevoie de aceasta mai târziu
== Instalați AWS CLI ==
AWS CLI este un instrument puternic care ne poate ajuta să simplificăm procesul de implementare.
Să instalăm AWS CLI folosind Homebrew (pentru macOS). Instalați Homebrew dacă nu ați făcut-o deja.
*Notă: dacă utilizați Windows, puteți găsi instrucțiunile în documentele oficiale * *aici*
Deschideți terminalul și intrați
brew install awscli.
Odată ce instrumentul CLI este instalat, ne putem configura contul AWS cu
aws configure. Aici va trebui să introduceți informațiile cheie de acces pe care le-ați descărcat anterior. Ar trebui să fie ceva de genul următor.
Pentru regiune, vă puteți verifica adresa URL pe Consola AWS și va menționa regiunea dvs. De exemplu, al meu este âÃÂÃÂap-sud-est-1âÃÂÃÂ.
= Crearea unei aplicații React =
Este posibil să aveți deja aplicația React gata de implementare. Cu toate acestea, dacă aveți nevoie de un exemplu de aplicație, puteți utiliza următoarele opțiuni:
- Generați o aplicație Boilerplate React rulând
npx create-react-app aplicația mea
- Descărcați proba mea de aplicație React (cu un exemplu de formular) de pe httpsgithub.com/harishv7/react-hook-form-example. Acest lucru a fost făcut pentru un tutorial pentru a adăuga formulare în aplicațiile React. Verificați aici.
Odată terminat, asigurați-vă că toate dependențele sunt instalate folosind
instalați fire și rulați aplicația folosind
începutul firului.
= Configurați o găleată S3 =
Acum că avem aplicația noastră eșantion pregătită, haideți să configuram o găleată S3 pentru a găzdui aplicația noastră.
Pe Consola AWS, căutați âÃÂÃÂS3âÃÂàși accesați S3 Dashboard. Faceți clic pe âÃÂÃÂCreare bucketâÃÂàși dați găleții un nume, cum ar fi âÃÂÃÂmy-react -app-2021âÃÂà(sau orice altceva doriți).
*Notă: numele compartimentului trebuie să fie unic pe întregul S3. Deci alegeți un nume unic care nu există, altfel veți primi o eroare!* 
Activați accesul public la bucket, deoarece îl găzduim live.
Lăsați restul setărilor așa cum sunt și faceți clic pe âÃÂÃÂCreați găleată... Veți vedea o intrare ca următoarea pe tabloul de bord S3.
Să facem clic și să intri în găleata S3 nou creată.
Să facem clic pe âÃÂÃÂPropertiesâÃÂàși derulați până la capăt, unde veți vezi âÃÂÃÂStatic site hostingâÃÂÃÂ.
Faceţi clic pe âÃÂÃÂEnableâÃÂàşi introduceţi âÃÂÃÂindex.htmlâààsub documentul index.
Lăsați celelalte câmpuri la fel și faceți clic pe âÃÂÃÂSalvare modificări...
= Implementarea în S3 =
Acum, suntem gata să implementăm aplicația noastră pe S3. Modul de a face acest lucru este să utilizați următoarea comandă CLI:
aws s3 sync build/ s3your-bucket-name>--acl public-read
Putem adăuga această comandă la fișierul nostru package.json și ca script âÃÂÃÂdeployâÃÂÃÂ.
Să construim aplicația noastră folosind
construcție de fire care ajută la crearea unei structuri de producție optimizate.
Apoi, să rulăm comanda CLI dată mai sus sau dacă ați configurat scriptul de publicare în package.json, putem folosi
desfășurarea firelor.
Asta e, aplicația noastră este acum implementată!
Pentru a afla unde este găzduită aplicația noastră (linkul site-ului), accesați consola AWS S3 și faceți clic pe compartimentul pe care l-ați creat.
Accesați fila „Proprietăți” și derulați în jos până la site-ul web static hostingâ¢ÃÂàși URL-ul nostru va fi acolo.
Faceți clic pe el și aplicația se va deschide într-o filă nouă. Aici... e al meu!
= Concluzie =
Am implementat cu succes aplicația noastră React pe Amazon S3! Aceasta este o alegere excelentă pentru a implementa și a testa rapid prototipurile dvs. React și a le partaja altora. Este, de asemenea, foarte ușor și rapid de implementat.
Sper că acest tutorial v-a fost util!
Codare fericită! ðÃÂÃÂû
*Mai mult conținut la * *plainenglish.io*
