= I-deploy ang React Apps sa Amazon S3 =
== 5 minutong gabay sa kung paano mag-deploy ng React Apps na may S3 ==
Kaya nakumpleto mo na ang iyong React app at hinahanap mo itong i-host sa isang lugar. Alam mo bang magagamit mo ang Amazon AWS S3 upang i-host ang iyong mga React app? Ito ay medyo madali, mura at mabilis na i-deploy.
= Magsimula na tayo! =
== Mga Kinakailangan ==
Bago tayo pumunta sa hosting, gawin natin ang administrative setup. Tiyaking nakumpleto ang mga sumusunod:
**Mayroon kang AWS Account Mag-sign up para sa isang AWS account dito: httpsaws.amazon.com/resources/create-account/ **Gumawa ng AWS User Sa AWS Console, pumunta sa tab na IAM, at pumunta sa à ¢ÃÂÃÂUsersâÃÂàseksyon sa sidebar.
Mag-click sa âÃÂÃÂAdd UserâÃÂàat suriin ang âÃÂÃÂProgrammatic accessâàÃÂ.
I-click ang âÃÂÃÂNext: Mga PahintulotâÃÂàat dito piliin ang âÃÂÃÂDirektang ilakip ang mga kasalukuyang patakaranâà ÂÃÂ. Lagyan ng check ang âÃÂÃÂAdministratorAccessâÃÂàpara sa layunin ng deployment.
Mag-click sa Susunod na mga pindutan at sa wakas ay mag-click sa âÃÂÃÂGumawa ng userâÃÂÃÂ.
Sa huling hakbang, makakatanggap kami ng Access key ID at Secret access key. I-download at
**i-save ang mga ito sa iyong computer dahil kakailanganin mo ito sa ibang pagkakataon
== I-install ang AWS CLI ==
Ang AWS CLI ay isang mahusay na tool na makakatulong sa amin na pasimplehin ang proseso ng pag-deploy.
I-install natin ang AWS CLI gamit ang Homebrew (para sa macOS). I-install ang Homebrew kung hindi mo pa nagagawa.
*Tandaan: Kung gumagamit ka ng Windows, mahahanap mo ang mga tagubilin sa mga opisyal na doc * *dito*
Buksan ang iyong terminal, at pumasok
brew install awscli.
Kapag na-install na ang CLI tool, maaari naming i-configure ang aming AWS account gamit ang
aws configure. Dito kakailanganin mong ilagay ang impormasyon ng access key na na-download mo dati. Dapat itong tulad ng sumusunod.
Para sa rehiyon, maaari mong tingnan ang iyong URL sa AWS Console at babanggitin nito ang iyong rehiyon. Halimbawa, ang akin ay âÃÂÃÂap-southeast-1âÃÂÃÂ.
= Paggawa ng React App =
Maaaring handa ka nang i-deploy ang iyong React app. Gayunpaman, kung kailangan mo ng sample na app, maaari mong gamitin ang mga sumusunod na opsyon:
- Bumuo ng boilerplate React app sa pamamagitan ng pagpapatakbo
npx create-react-app my-app
- I-download ang aking sample na React app (na may halimbawa ng form) mula sa httpsgithub.com/harishv7/react-hook-form-example. Ginawa ito para sa isang tutorial upang magdagdag ng mga form sa React apps. Tingnan ito dito.
Kapag tapos na, siguraduhin na ang lahat ng mga dependency ay naka-install gamit
i-install ang sinulid at bigyan ang app ng pagtakbo gamit
pagsisimula ng sinulid.
= Mag-setup ng S3 Bucket =
Ngayong handa na ang aming sample na app, mag-configure tayo ng S3 bucket para i-host ang aming app.
Sa AWS Console, hanapin ang âÃÂÃÂS3âÃÂàat pumunta sa S3 Dashboard. Mag-click sa âÃÂÃÂGumawa ng bucketâÃÂàat bigyan ang bucket ng pangalan tulad ng âÃÂÃÂmy-react -app-2021âÃÂà(o anumang bagay na gusto mo).
*Tandaan: Ang pangalan ng bucket ay dapat na natatangi sa buong S3. Kaya pumili ng isang natatanging pangalan na wala, kung hindi, magkakaroon ka ng error!* 
I-on ang pampublikong access sa bucket dahil live kaming nagho-host nito.
Iwanan ang natitirang mga setting kung ano ang mga ito at i-click ang âÃÂÃÂGumawa ng bucketâÃÂÃÂ. Makakakita ka ng entry tulad ng sumusunod sa iyong S3 dashboard.
Mag-click at pumunta sa aming bagong likhang S3 bucket.
Mag-click sa âÃÂÃÂPropertiesâÃÂàat mag-scroll hanggang sa ibaba kung saan mo gagawin tingnan ang âÃÂÃÂStatic website hostingâÃÂÃÂ.
Mag-click sa âÃÂÃÂEnableâÃÂàat ipasok ang âÃÂÃÂindex.htmlâààsa ilalim ng Index ng dokumento.
Iwanang pareho ang ibang mga field at mag-click sa âÃÂÃÂSave changesâÃÂÃÂ.
= Nagde-deploy sa S3 =
Ngayon, handa na kaming i-deploy ang aming app sa S3. Ang paraan upang gawin iyon ay ang paggamit ng sumusunod na CLI command:
aws s3 sync build/ s3your-bucket-name>--acl public-read
Maaari din naming idagdag ang command na ito sa aming package.json file bilang âÃÂÃÂdeployâÃÂàscript.
Buuin natin ang aming app gamit ang
yarn build na nakakatulong sa paggawa ng optimized production build.
Susunod, hayaan nating patakbuhin ang CLI command na ibinigay sa itaas o kung na-setup mo ang iyong publish script sa package.json, magagamit namin
pag-deploy ng sinulid.
Iyon lang, naka-deploy na ngayon ang aming app!
Upang malaman kung saan naka-host ang aming app (ang link ng website), pumunta sa AWS S3 console at mag-click sa bucket na iyong ginawa.
Pumunta sa tab na âÃÂÃÂPropertiesâÃÂàat mag-scroll pababa hanggang sa âÃÂÃÂStatic website hostingâÃÂàseksyon at ang aming URL ay naroroon.
Mag-click dito at magbubukas ang iyong app sa isang bagong tab. Eto ang akin!
= Konklusyon =
Matagumpay naming nai-deploy ang aming React app sa Amazon S3! Ito ay isang mahusay na pagpipilian upang mabilis na i-deploy at subukan ang iyong mga prototype ng React at ibahagi ito sa iba. Ito ay talagang madali at mabilis ding i-deploy.
Sana ay naging kapaki-pakinabang ang tutorial na ito para sa iyo!
Maligayang coding! ðÃÂÃÂû
*Higit pang nilalaman sa * *plainenglish.io*
Ibinahagi ang WEB HOSTING#7
