= Cum să utilizați AWS Amplify pentru a implementa o aplicație React =
== Un ghid pentru implementarea aplicațiilor React cu AWS Amplify ==
De când am început să consult ca inginer software, mi-am dorit să creez un site web de portofoliu care să prezinte
proiecte personale și profesionale la care am lucrat. În această vacanță de iarnă, mi-am petrecut timp proiectând, dezvoltând și implementând site-ul meu de portofoliu și, în acest articol, vă voi prezenta modul în care l-am implementat cu AWS Amplify. Puteți vizualiza site-ul la dan-murphy.com și codul pe GitHub.
= Un scurt context =
Majoritatea muncii mele profesionale implică construirea de aplicații bazate pe date și eficientizarea conductelor de date. Pentru a îndeplini aceste sarcini, folosesc în mod regulat Python și Ruby și încorporez JavaScript pentru orice lucrare de tip frontend. În efortul de a deveni mai confortabil cu React, am decis să folosesc cadrul pentru a-mi construi site-ul de portofoliu.
= Configurarea aplicației =
Primul pas pe care l-am făcut a fost să decid cum să structurez aplicația. am folosit
create-react-app ca șablon de bază pentru directoarele mele și apoi am restructurat aplicația cu câteva foldere suplimentare. Configurația finalizată arată astfel:
src
componente
âÃÂÃÂarhive
âÃÂÃÂextras
âÃÂÃÂdate
âÃÂÃÂimgs
pagini
âÃÂÃÂconţinut
âÃÂÃÂdate
stiluri
teste
corpuri de fixare
Unele dintre schimbările notabile sunt
**componente**
, și
**pagini**
directoare.
**stiluri**
,
: Aici stochez toate componentele aplicației. Prin stocarea componentelor într-un folder centralizat, este mai ușor să reutilizați și să refactorez codul meu și mai intuitiv pentru alții să înțeleagă. Unele dintre componentele care compun site-ul meu portofoliu sunt
componente
Antet,
Subsol și
Bara laterală a proiectului.
: Aici construiesc paginile distincte pentru aplicație. Import componentele necesare din
pagini
folder și apoi agregați-le pentru a proiecta pagina. Iată un exemplu despre cum am făcut asta pentru
Pagina principală a componentelor:
: Aici definesc stilurile CSS globale pentru aplicație. Îmi place să folosesc
stiluri
styled-componentspentru componente individuale, dar am găsit, de asemenea, util să construiesc stiluri globale care sunt disponibile pentru fiecare pagină.
În cele din urmă, pentru a mapa cererile către paginile corecte, folosim
reacţionează-router-dom. Traseele sunt definite în
Fișierul App.js, așa cum se arată mai jos:
Aceasta va cartografi
Pagina principala,
/proiecte solicitări către
Pagina de proiecte,
/despre cereri către
AboutPage și
/bookshelf solicită să
BookPage. Acum că dezvoltarea aplicației este completă, trebuie să o implementăm pentru ca alții să o poată folosi!
/cere la
= Implementarea cu AWS Amplify =
== Prezentare generală ==
Există mai multe modalități de a implementa un site web React, dar am descoperit că una dintre cele mai simple este de a utiliza
**AWS Amplify Amplify este descris ca fiind cel mai rapid și simplu mod de a crea aplicații mobile și web care să se extindă. AWS extrapolează toate complicațiile legate de configurarea unui server, instalarea dependențelor și crearea unei versiuni de producție a site-ului dvs. web, permițându-vă să vă concentrați numai pe construirea unui UX intuitiv. Pentru a afla mai multe despre ce oferă AWS Amplify pentru aplicațiile bazate pe date (în special, site-urile web cu **frontend** și **backend, consultați documentația acestora.
== Conectarea depozitului dvs. ==
Pentru a găzdui aplicația dvs. web pe AWS Amplify, mai întâi trebuie să vă conectați depozitul care conține codul sursă. Pentru a face acest lucru, puteți naviga la
*AWS Amplify* *Noțiuni introductive* **Găzduiește aplicația mea web și dați clic pe **Conectați depozitul de aplicații *pagina, derulați la*pagina, derulați la 
Apoi, veți fi redirecționat către o pagină separată unde puteți conecta depozitul care conține codul sursă. Pentru acest exemplu, voi alege GitHub, dar AWS Amplify acceptă și BitBucket, GitLab, AWS CodeCommit și chiar implementarea fără un furnizor Git.
După autorizarea cu succes, puteți selecta ce depozit doriți să implementați și selectați ramura pe care AWS Amplify ar trebui să o folosească pentru versiunile de producție.
După aceea, faceți clic
**Next** și AWS vă va cere să configurați setările pentru *build* și *test*. Șablonul de bază oferit de AWS este prezentat mai jos.
versiunea: 1
în față:
faze:
prebuild:
comenzi:
- npm install build:
comenzi:
- npm run build
artefacte:
baseDirectory: build
fisiere:
-
cache:
trasee:
- module_nod
În plus, sub
**Setări avansate** comută, puteți seta variabile de mediu și un container de construcție personalizat.
În cele din urmă, după ce ați examinat setările aplicației dvs., faceți clic pe
**Salvați și implementați **și **AWS va începe configurarea și implementarea aplicației dvs. Când AWS s-a terminat de implementat, puteți naviga la pagina de pornire Amplify și puteți vedea aplicația dvs. nou implementată. AWS va începe configurarea și implementarea aplicației dvs. Când AWS a terminat de implementat, puteți naviga la pagina de pornire Amplify și puteți vedea aplicația dvs. recent implementată.
Acum, să personalizăm URL-ul folosind
**Gestionarea domeniului AWS Amplify
== Adăugarea unui domeniu personalizat ==
Pentru a începe să adăugați un domeniu personalizat, navigați în bara laterală din stânga și selectați
**gestionarea domeniului 
**setare de gestionare a domeniului**.
Apoi, selectați
**adăugați domeniul **configurați domeniul **introduceți numele domeniului dvs. (după cum se arată mai jos) și faceți clic pe**introduceți numele domeniului dvs. (după cum se arată mai jos) și faceți clic pe 
După aceasta, puteți configura orice redirecționări care sunt necesare pentru domeniul dvs. De exemplu, în exemplul următor, creez o redirecționare de la httpsdan-murphy.com la httpswww.dan-murphy.com.
În cele din urmă, după ce domeniul dvs. personalizat este configurat corect, AWS vă va oferi un
**Certificat de validare Puteți vizualiza acest certificat și în consola AWS Certificate Manager.
== Adăugarea unei înregistrări CNAME ==
Ultimul pas în configurarea domeniului personalizat este adăugarea unei înregistrări CNAME. În exemplul următor, folosesc Google Domains, dar conceptele fundamentale rămân aceleași pentru diferiți registratori de domenii.
Mai întâi, derulați în jos la
**Înregistrări personalizate de resurse** în Google Domains. Creați o înregistrare *CNAME * care indică toate subdomeniile către domeniul AWS Amplify: Nume: introduceți numele subdomeniului. Dacă subdomeniul este www.domain.com, introduceți . Dacă este www app.domain.com, introduceți app. Date: pe pagina de gestionare a domeniului, faceți clic pe Acțiuni și apoi selectați Vizualizare înregistrări DNS. Apoi, introduceți domeniul AWS Amplify disponibil în Configurați furnizorul DNS. 
Pagina **Gestionarea domeniilor**, selectați **Acțiuni **Vizualizare înregistrări DNS**
În total, înregistrarea resurselor personalizate va arăta astfel:
Apoi, adăugați încă unul
Înregistrare *CNAME* care indică serverul de validare AWS Certificate Manager. Managerul de certificate AWS validat gestionează TLS pentru aplicația dvs.: Nume: introduceți subdomeniul serverului de validare. Dacă înregistrarea DNS pentru verificarea dreptului de proprietate asupra domeniului dvs. este _1234.example.com, introduceți numai _1234. Date: introduceți certificatul de validare ACM. Dacă serverul de validare este _1234.abcdefg.acm-validations.aws., introduceți _1234.abcdefg.acm-validations.aws.
Toate informațiile pentru certificatele dvs. de validare se găsesc în consola AWS Certificate Manager. După a doua
Este adăugat *CNAME*, înregistrările dvs. personalizate ar trebui să arate astfel: 
În cele din urmă, să adăugăm a
**Înregistrare sintetică** pentru a configura un subdomeniu înainte: Subdomeniu: introduceți adresa URL a domeniului: www. 
= Încheierea =
În general, în acest articol, am învățat cum să structuram aplicațiile React și să le implementăm cu AWS Amplify. În primul rând, am discutat despre modul de modulare a unei aplicații react
foldere *componente* *pagini*. Apoi, am aflat despre **AWS Amplify** și despre cum să implementăm aplicații statice și bazate pe date cu acesta. În cele din urmă, am aflat despre utilizarea **AWS Amplify Domain Management** și **Google Domains **pentru a personaliza domeniul aplicației noastre. **si si
Dacă aveți întrebări, nelămuriri sau feedback cu privire la acest articol sau site-ul meu de portofoliu, nu ezitați să comentați sau să-mi trimiteți un e-mail la
*
[email protected]*. Multumesc pentru lectura!
