= Paano Gamitin ang AWS Amplify para mag-deploy ng React Application =
== Isang gabay sa pag-deploy ng React Applications gamit ang AWS Amplify ==
Dahil nagsimula akong kumunsulta bilang isang Software Engineer, gusto kong magsama-sama ng isang portfolio website na nagpapakita ng
personal at propesyonal na mga proyektong aking ginawa. Ngayong winter break, gumugol ako ng oras sa pagdidisenyo, pagbuo, at pag-deploy ng aking portfolio site, at sa artikulong ito, ituturo ko sa iyo kung paano ko ito na-deploy gamit ang AWS Amplify. Maaari mong tingnan ang website sa dan-murphy.com at ang code sa GitHub.
= Isang Maikling Background =
Karamihan sa aking propesyonal na trabaho ay nangangailangan ng pagbuo ng data-driven na mga application at pag-streamline ng mga pipeline ng data. Para magawa ang mga gawaing ito, regular kong ginagamit ang Python at Ruby at isinasama ang JavaScript para sa anumang gawaing pangharap. Sa pagsisikap na maging mas komportable sa React, nagpasya akong gamitin ang framework para buuin ang aking portfolio website.
= Pagse-set up ng Application =
Ang unang hakbang na ginawa ko ay ang pagpapasya kung paano ayusin ang application. nagamit ko
create-react-app bilang isang base template para sa aking mga direktoryo, at pagkatapos ay muling istruktura ang application na may ilang karagdagang mga folder. Ang pinal na setup ay ganito ang hitsura:
src
mga bahagi
âÃÂÃÂarchives
âÃÂÃÂmga extra
âÃÂÃÂdata
âÃÂÃÂimgs
mga pahina
âÃÂÃÂmga nilalaman
âÃÂÃÂdata
mga istilo
mga pagsubok
mga kabit
Ilan sa mga kapansin-pansing pagbabago ay ang
**mga bahagi**
, at
**mga pahina**
mga direktoryo.
**mga istilo**
,
: Dito ko iniimbak ang lahat ng mga bahagi para sa application. Sa pamamagitan ng pag-imbak ng mga bahagi sa isang sentralisadong folder, mas madaling gamitin muli at i-refactor ang aking code at mas madaling maunawaan para maunawaan ng iba. Ang ilan sa mga bahagi na bumubuo sa aking portfolio website ay
mga bahagi
Header,
Footer, at
ProjectSidebar.
: Dito ko binuo ang mga natatanging pahina para sa application. Ini-import ko ang mga kinakailangang sangkap mula sa
mga pahina
folder at pagkatapos ay pagsama-samahin ang mga ito upang idisenyo ang pahina. Narito ang isang halimbawa kung paano ko ginawa ito para sa
home page ng mga bahagi:
: Dito ko tinukoy ang mga global na istilo ng CSS para sa application. mahilig akong gumamit
mga istilo
naka-istilong-bahagi para sa mga indibidwal na bahagi, ngunit natagpuan ko rin na kapaki-pakinabang ang pagbuo ng mga pandaigdigang istilo na magagamit sa bawat pahina.
Panghuli, para imapa ang mga kahilingan sa tamang mga pahina, ginagamit namin
react-router-dom. Ang mga ruta ay tinukoy sa
App.js file tulad ng ipinapakita sa ibaba:
Magmapa ito
Homepage,
/projects humiling sa
ProjectsPage,
/tungkol sa mga kahilingan sa
Tungkol saPage, at
/bookshelf ay humihiling sa
Pahina ng Aklat. Ngayong kumpleto na ang pagbuo ng application, kailangan nating i-deploy ito para magamit ito ng iba!
/ humihiling sa
= Deploying Gamit ang AWS Amplify =
== Pangkalahatang-ideya ==
Mayroong ilang mga paraan upang mag-deploy ng isang website ng React, ngunit nalaman ko na ang isa sa pinakasimpleng ay ang paggamit
**Ang AWS Amplify Amplify ay inilalarawan bilang ang âÃÂÃÂpinakamabilis at pinakamadaling paraan upang bumuo ng mga mobile at web app na may sukat.âÃÂàUpang magawa ito, Isinasaalang-alang ng AWS ang lahat ng mga komplikasyon ng pag-set up ng isang server, pag-install ng mga dependency, at paggawa ng production build ng iyong website, na nagbibigay-daan sa iyong tumutok lamang sa pagbuo ng isang madaling gamitin na UX. Upang matuto nang higit pa tungkol sa kung ano ang inaalok ng AWS Amplify para sa mga application na batay sa data (partikular, ang mga website na may **frontend** at **backend, tingnan ang kanilang dokumentasyon.
== Pagkonekta sa iyong Repository ==
Upang i-host ang iyong web app sa AWS Amplify, kailangan mo munang ikonekta ang repositoryo na naglalaman ng iyong source code. Upang gawin ito, maaari kang mag-navigate sa
*AWS Amplify* *Pagsisimula* **I-host ang My Web App at i-click ang **Connect app repo *page, scroll to*page, scroll to 
Pagkatapos, ire-redirect ka sa isang hiwalay na pahina kung saan maaari mong ikonekta ang repositoryo na naglalaman ng iyong source code. Para sa halimbawang ito, pipiliin ko ang GitHub, ngunit sinusuportahan din ng AWS Amplify ang BitBucket, GitLab, AWS CodeCommit, at kahit na nagde-deploy nang walang Git provider.
Pagkatapos ng matagumpay na pahintulot, maaari mong piliin kung aling repositoryo ang gusto mong i-deploy at piliin ang sangay na AWS Amplify na dapat gamitin para sa mga production build.
Pagkatapos nito, i-click
**Next** at hihilingin sa iyo ng AWS na i-configure ang iyong mga setting ng *build* at *test*. Ang batayang template na ibinibigay ng AWS ay ipinapakita sa ibaba.
bersyon: 1
frontend:
mga yugto:
prebuild:
mga utos:
- npm install build:
mga utos:
- npm run build
artifacts:
baseDirectory: build
mga file:
-
cache:
mga landas:
- node_modules
Bukod pa rito, sa ilalim ng
**mga advanced na setting** toggle, maaari kang magtakda ng mga variable ng kapaligiran at isang custom na build container.
Panghuli, pagkatapos suriin ang mga setting para sa iyong aplikasyon, i-click
**Save and Deploy **at **AWS ay magsisimulang i-configure at i-deploy ang iyong application. Kapag tapos na ang AWS sa pag-deploy, maaari kang mag-navigate sa home page ng Amplify at makita ang iyong bagong-deploy na applicationAWS ay magsisimulang i-configure at i-deploy ang iyong application. Kapag tapos na ang AWS sa pag-deploy, maaari kang mag-navigate sa home page ng Amplify at makita ang iyong bagong-deploy na application.
Ngayon, i-customize natin ang URL na ginagamit
**AWS Amplify domain management
== Pagdaragdag ng Custom na Domain ==
Upang makapagsimulang magdagdag ng custom na domain, mag-navigate sa kaliwang sidebar at piliin
**pamamahala ng domain 
**pamamahala ng domain**setting.
Pagkatapos, piliin
**magdagdag ng domain **mag-configure ng domain **ipasok ang iyong domain name (tulad ng ipinapakita sa ibaba), at i-click**ipasok ang iyong domain name (tulad ng ipinapakita sa ibaba), at i-click ang 
Pagkatapos nito, maaari kang mag-set up ng anumang mga pag-redirect na kinakailangan para sa iyong domain. Halimbawa, sa sumusunod na halimbawa, gumawa ako ng redirect mula sa httpsdan-murphy.com patungo sa httpswww.dan-murphy.com.
Sa wakas, pagkatapos na mai-configure nang tama ang iyong custom na domain, bibigyan ka ng AWS ng isang
**Validation Certificate Maaari mo ring tingnan ang certificate na ito sa AWS Certificate Manager console.
== Pagdaragdag ng CNAME Record ==
Ang huling hakbang sa pag-configure ng iyong custom na domain ay ang pagdaragdag ng CNAME record. Sa sumusunod na halimbawa ay gumagamit ako ng Google Domains, ngunit ang mga pangunahing konsepto ay nananatiling pareho sa iba't ibang mga registrar ng domain.
Una, mag-scroll pababa sa
**Custom Resource Records** sa Google Domains. Gumawa ng *CNAME *record na nagtuturo sa lahat ng subdomain sa AWS Amplify domain: Pangalan: ilagay ang pangalan ng subdomain. Kung ang subdomain ay www.domain.com, ilagay ang . Kung ito ay www app.domain.com, ilagay ang app. Data: Sa pahina ng pamamahala ng domain, i-click ang Pagkilos at pagkatapos ay piliin ang Tingnan ang Mga Tala ng DNS. Pagkatapos, ilagay ang AWS Amplify domain na available sa ilalim ng Configure DNS provider. 
**Pamamahala ng Domain**pahina, piliin ang **Mga Pagkilos **Tingnan ang Mga Tala ng DNS**
Sa kabuuan, magiging ganito ang hitsura ng custom na resource record:
Susunod, magdagdag ng isa pa
*CNAME* record na tumuturo sa server ng pagpapatunay ng AWS Certificate Manager. Ang validated na AWS Certificate Manager ay humahawak ng TLS para sa iyong aplikasyon: Pangalan: ilagay ang subdomain ng validation server. Kung ang DNS record para sa pag-verify ng pagmamay-ari ng iyong domain ay _1234.example.com, ilagay lang ang _1234. Data: ilagay ang ACM validation certificate. Kung ang validation server ay _1234.abcdefg.acm-validations.aws., ilagay ang _1234.abcdefg.acm-validations.aws.
Ang lahat ng impormasyon para sa iyong mga Validation Certificate ay makikita sa AWS Certificate Manager console. Pagkatapos ng pangalawa
Idinagdag ang *CNAME*, dapat ganito ang hitsura ng iyong mga custom na tala: 
Panghuli, magdagdag tayo ng a
**Synthetic Record** para mag-set up ng subdomain forward: Subdomain: ilagay ang Domain URL: www. 
= Pagbabalot =
Sa pangkalahatan, sa artikulong ito, natutunan namin kung paano buuin ang Mga React Application at i-deploy ang mga ito gamit ang AWS Amplify. Una, tinalakay namin kung paano i-modularize ang isang react application sa
*mga bahagi* *mga pahina* mga folder. Pagkatapos, natutunan namin ang tungkol sa **AWS Amplify** at kung paano mag-deploy ng mga static at data-driven na application kasama nito. Sa wakas, natutunan namin ang tungkol sa paggamit ng **AWS Amplify Domain Management** at **Google Domains **upang i-customize ang domain ng aming application. **at at
Kung mayroon kang anumang mga katanungan, alalahanin, o puna sa artikulong ito o sa aking portfolio site, huwag mag-atubiling magkomento o mag-email sa akin sa
*
[email protected]*. Salamat sa pagbabasa!
