= Pagho-host ng iyong React application sa AWS sa loob ng 30 minuto =
Ang tutorial na ito ay napakabigat ng imahe at naka-target sa kumpletong mga nagsisimula. Ipinapaliwanag nito kung paano mo mai-host ang iyong React application sa isang website, na may kumpletong sistema ng pahintulot. Hinihimok nito ang kapangyarihan ng AWS MobileHub sa pamamagitan ng Mobilehub CLI (Command Line Interface). Ang tutorial ay hindi nangangailangan ng mga kasanayan sa mga serbisyo ng AWS at ipapakita rin sa iyo na mag-set up ng isang React boilerplate application.
Kung mayroon ka nang React application,
**maaari kang lumaktaw sa seksyon 2 kung saan nag-install kami ng awsmobile-cli at idagdag ito sa aming application
= Bago tayo magsimula kailangan natin ng ilang bagay na naka-set up sa iyong computer =
**Node 8.x environment na naka-install sa iyong computer**
- Ito ang runtime na kapaligiran para sa mga server ng aplikasyon ng Javascript. Sinusundan ito ng node package manager (NPM).
- Ginagamit ang NPM para mag-install ng mga node package gaya ng React, AWS Amplify, isang AWS-JS connector package at iyon talaga.
- httpsnodejs.org/en/download/
**Isang AWS Free Tier account
- Makakakuha ka ng libreng access sa Mga Serbisyo ng AWS sa pamamagitan ng Libreng Tier. Para sa tutorial na ito, ito ay dapat na higit pa sa sapat. Gayunpaman, tandaan na ang bawat serbisyo ay may limitasyon sa paggamit bawat buwan at ito ay maaaring magdulot sa iyo ng totoong pera.
- httpsaws.amazon.com/free/
**I-install ang AWS CLI (Command Line Interface) upang tawagan ang mga serbisyo ng AWS nang direkta mula sa iyong console** **Para sa kursong ito gagamitin namin ang pinapanatili na boilerplate mula sa Facebook, mga tagalikha ng React **Isang editor na iyong pinili
- Iminumungkahi kong magsimula sa Visual Studio Code, isang lubos na nababago na magaan na editor na maaaring magpatakbo ng karamihan sa mga programming language at frameworks.
Pro tip: Sa proseso ng pag-install ng VS Code, tiyaking lagyan ng check ang kahon na nagdaragdag nito sa iyong mga pangalan ng path ng kapaligiran. Nagbibigay ito sa iyo ng access upang buksan ang VS Code mula sa terminal sa pamamagitan ng pag-type ng âÃÂÃÂcode filename.jsâÃÂào âÃÂÃÃ. Âcode .âÃÂàpara sa buong proyekto kung nasaan ka. **Isang terminal na ikaw ay Âkumportable sa
- Karamihan sa mga developer ay dapat na naka-install ang Git sa kanilang computer. Nagbibigay ito sa iyo ng access sa Git Bash na kung saan ay maraming developer ang pumunta-to na terminal.
Magsimula tayo!
**1. Lumikha ng React application at ipasok ang folder ng proyekto sa pamamagitan ng terminal**
Ipasok ang terminal at hanapin ang iyong folder kung saan ka nag-iimbak ng mga application. Iminumungkahi ko ang isang folder na may pangalang âÃÂÃÂdevâÃÂÃÂ.
npx create-react-app project-name&& cd project-name
o
npm -g i-install ang create-react-app create-react-app project-name
Dito kami lumikha ng isang React application batay sa boilerplate. Ang âÃÂÃÂnpxâÃÂàay isang Node tool na gumagamit ng npm server para sa pagtawag sa mga malalayong pakete. Ang pangalawang code snippet ay nag-i-install ng create-react-app nang lokal gamit ang
*npm -g i-install ang create-react-app* **at pagkatapos ay gagawa ng application. Iminumungkahi ko ang paggamit ng npx upang palaging maging up-to-date sa create-react-appat pagkatapos ay gagawa ng application. Iminumungkahi ko ang paggamit ng npx upang palaging maging up-to-date sa create-react-app. **2. I-install ang awsmobile CLI sa iyong computer at patakbuhin ito sa proyekto**
Mula sa puntong ito, dapat mong bigyang pansin ang iyong React application sa iyong code editor. May idaragdag na mga folder tulad ng /awsmobile at ilang mga karagdagan sa package.json file.
Sa isang terminal window, i-type
npm install -g awsmobile-cli
upang i-install ang awsmobile-cli sa buong mundo. Gagamitin namin ito pagkatapos gumawa ng ilang trabaho sa AWS Mobile Hub console.
Tiyaking nasa loob ka ng iyong proyekto at mag-type
awsmobile init
Na-prompt ka ng isang hanay ng mga tanong, kung saan maganda ang mga default kaya pindutin ang enter sa bawat setting hanggang sa awtomatiko nitong buksan ang AWS sa iyong default na browser. Mag-login gamit ang iyong Free Tier account kung hindi mo pa nagagawa.
Tinitiyak nito ang awsmobile-cli na nakakonekta kami sa tamang AWS account. Bumalik sa iyong terminal at Pindutin ang Enter upang magpatuloy.
Kailangang i-setup ng AWS ang isang user para makontrol ang application. Awtomatiko itong gagawin ng awsmobile-cli kapag patuloy mong pinindot ang enter.
Pagkatapos makumpleto ito, dadalhin ka sa AWS IAM kung saan susunod ka na lang. ¢ÃÂàang iyong paraan hanggang sa pagkakumpleto! Sa pangalawang hakbang, dapat ay awtomatiko nitong nasuri ang âÃÂÃÂAdministrator AccessâÃÂàna nagbibigay sa User ng access sa lahat ng feature ng AWS na kailangan namin.
Kapag tapos na, napakahalagang i-download mo ang .csv file gamit ang iyong mga lihim na kredensyal dahil isang beses lang ipapakita ang mga ito sa AWS. Ang mga key na ito ay gagamitin sa mga susunod na hakbang ng iyong terminal window.
Matagumpay nitong nagagawa ang iyong AWS MobileHub application at awtomatikong nag-i-install ng aws-amplify& aws-amplify-react sa iyong lokal na proyekto ng React
Kapag ang prosesong ito ay tapos na (~1 min) maaari kang mag-type
awsmobile console
upang makita ang iyong Mobile Hub application sa iyong default na browser. Maaari mo ring i-type ang âÃÂÃÂawsmobileâÃÂàupang makakita ng listahan ng iba't ibang pagkilos. Mula dito, magdaragdag kami ng Cognito Login gamit ang browser, ngunit magagawa mo ito mula sa awsmobile CLI.
**3. Talagang nagdaragdag ng Cognito Sign-in at Hosting**
Para sa huling hakbang, idaragdag namin ang AWS Cognito sa aming proyekto sa pamamagitan ng AWS MobileHub Console. Maaari mo ring tingnan ang Hosting na pinagana na bilang default.
Upang subukan ang Hosting, i-click ang feature sa iyong console at i-click ang URL na ibinigay sa iyo. Ang nilalaman dito ay isang template ng AWS, ngunit i-overwrite mo ito sa application ng React sa lalong madaling panahon.
**Upang magdagdag ng Cognito User Sign-in, mag-scroll pababa upang mahanap ang âÃÂÃÂUser Sign-inâÃÂàat i-click ito. **Ito ay nagbibigay-daan sa Cognito User Pools na may isang authentication system. Gamitin ang âÃÂÃÂEmailâÃÂàmula sa Email address o numero ng telepono upang pilitin ang email bilang username sa iyong pag-login. O maaari mong gamitin ang Username at paganahin ang âÃÂÃÂEmailâÃÂà+ âÃÂÃÂUsernameâà Âàupang hayaan ang user na pumili. Matatanggap mo ang confirmation code sa pamamagitan ng email sa alinmang paraan.
Tumatanggap kami ng email dahil ang AWS ay hindi naniningil para sa pagpapadala ng mga code ng kumpirmasyon sa pagpaparehistro sa email, habang nagkakahalaga ito ng totoong pera upang magpadala ng SMS.
Alin ang nagreresulta sa:
Kung iki-click mo ang Aksyon >I-edit sa Cognito, makikita mo ang Cognito console para sa pamamahala sa iyong Mga User at mga advanced na feature ng seguridad. Ang ilang setup na ginawa mo sa hakbang na ito ay hindi na mababawi ngunit maaari mong i-delete anumang oras ang iyong user pool at gumawa ng bago.
Kinukumpleto nito ang configuration ng AWS Cognito sa loob ng MobileHub. Oras na para magdagdag ng code. Magkano? 5 linya! At 3 sa kanila ay mga import lamang sa React.
= Pagdaragdag ng iyong mga setting sa React project at pag-publish sa iyong website =
Sa iyong terminal, maaari kang gumamit ng awsmobile pull o awsmobile push anumang oras upang makuha ang iyong mga pagbabago mula sa AWS MobileHub Console online sa iyong application, o itulak ang iyong mga lokal na pagbabago na ginawa sa pamamagitan ng awsmobile CLI sa terminal.
Para sa use case na ito, gusto naming kunin ang mga pagbabagong ginawa namin. Bumalik sa iyong terminal at mag-type
Bumalik sa VS Code, makikita mo na ngayon ang iyong proyekto ay nabago. Maaari mong tingnan ang iyong mga lokal na configuration sa ./awsmobile/backend/mobile-hub-project.yml
Gayundin, sa ./package.json makikita mo ang dalawang naka-highlight na library na idinagdag ng awsmobile init na ginawa namin kanina.
Gagamitin na namin ang mga ito para i-wrap ang aming application sa isang window sa pag-login ng Cognito. Buksan ang ./src/index.js at baguhin ito:
Sa ganito:
import React mula sa 'react';
import ReactDOM mula sa 'react-dom';
import index.css';
mag-import ng App mula sa App';
mag-import ng registerServiceWorker mula sa registerServiceWorker';
mag-import ng awsMobile mula sa aws-exports';
import Amplify mula sa 'aws-amplify';
import { withAuthenticator } mula sa "aws-amplify-react"Amplify.configure(awsMobile);
const AppWithAuth = withAuthenticator(App)ReactDOM.render(
('root
registerServiceWorker
And youâÃÂÃÂre done! Try to run your application from your terminal with
npm start
and see it be loaded into the browser with a sleek GUI created by AWS:
From here you can register, login or reset users, and as an admin you can see the users who are registering.
**To add hosting simply go to your terminal and type
awsmobile publish
If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:
When this process is done, your hosted website automatically opens in your default browser:
**There, youâÃÂÃÂre done
= Pitfalls in the process =
If the application says âÃÂÃÂNo user poolsâÃÂÃÂ, make sure your MobileHub console has Sign-In activated, and that youâÃÂÃÂve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!
**Further challenges** **Use the ** **aws-amplify authentication documentation ** **to add a signout button to your application
Hint: YouâÃÂÃÂll need to import Auth and call its signOut function.
import { Auth } from aws-amplify-react
**Add your custom domain name to the hosted website**This is done through CloudFront, which you can access in MobileHub âÃÂÃÂHosting and StreamingâÃÂÃÂ. Read the docs provided if you want assitance:
== Using Custom URLs for Files by Adding Alternate Domain Names (CNAMEs) - Amazon CloudFront ==
Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the defaultâÃÂæ
docs.aws.amazon.com
**Add Google Login**Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work. **Hope you enjoyed this very detailed introduction to AWS MobileHub. ItâÃÂÃÂs a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy
