= Hosting aplikasi React karo AWS ing 30 menit =
Tutorial iki abot banget gambar lan ditargetake kanggo pamula lengkap. Iki nerangake carane sampeyan bisa dadi tuan rumah aplikasi React ing situs web, kanthi sistem wewenang sing lengkap. Njaluk daya AWS MobileHub liwat Mobilehub CLI (Command Line Interface). Tutorial ora mbutuhake katrampilan karo layanan AWS lan uga bakal nuduhake sampeyan nyetel aplikasi boilerplate React.
Yen sampeyan wis duwe aplikasi React,
**sampeyan bisa ngliwati bagean 2 ing ngendi kita nginstal awsmobile-cli lan ditambahake menyang aplikasi kita
= Sadurunge kita miwiti kita kudu saperangan saka iku nyiyapake ing komputer =
** Lingkungan Node 8.x diinstal ing komputer **
- Iki minangka lingkungan runtime kanggo server aplikasi Javascript. Iku nderek karo manajer paket simpul (NPM).
- NPM digunakake kanggo nginstal paket simpul kayata React, AWS Amplify, paket konektor AWS-JS lan sing umume.
- httpsnodejs.org/en/download/
**Akun Tingkat Gratis AWS
- Sampeyan entuk akses gratis menyang Layanan AWS liwat Tier Gratis. Kanggo tutorial iki, iki kudu luwih saka cukup. Nanging, elinga yen saben layanan duwe watesan panggunaan saben wulan lan iki bisa uga mbutuhake dhuwit nyata.
- httpsaws.amazon.com/free/
** Instal AWS CLI (Command Line Interface) kanggo nelpon layanan AWS langsung saka konsol sampeyan ** ** Kanggo kursus iki, kita bakal nggunakake boilerplate sing dikelola saka Facebook, pencipta React ** Editor sing dipilih
- Aku suggest miwiti karo Visual Studio Code, editor entheng Highly bisa dimodifikasi kang bisa mbukak paling basa program lan frameworks.
Tip Pro: Ing proses instal VS Code, priksa kothak sing ditambahake menyang jeneng path lingkungan sampeyan. Iki menehi akses kanggo mbukak Kode VS saka terminal kanthi ngetik âÃÂÃÂkode filename.jsâÃÂàutawa âÃÂÃ. Âkode .âÃÂàkanggo kabeh proyek sing sampeyan tindakake. **Terminal sampeyan  nyaman ing
- Umume pangembang kudu nginstal Git ing komputer. Iki menehi akses menyang Git Bash sing akeh pangembang menyang terminal.
Ayo miwiti!
**1. Gawe aplikasi React lan ketik folder proyek liwat terminal**
Ketik terminal lan temokake folder ing ngendi sampeyan nyimpen aplikasi. Aku nyaranake folder sing jenenge âÃÂÃÂdevâÃÂÃÂ.
npx create-react-app project-name&& cd project-name
utawa
npm -g nginstal create-react-app create-react-app project-name
Ing kene kita nggawe aplikasi React adhedhasar boilerplate. âÃÂÃÂnpxâÃÂàminangka alat Node sing nggunakake server npm kanggo nelpon paket remot. Potongan kode kapindho nginstal create-react-app sacara lokal karo
*npm -g install create-react-app* **banjur gawe aplikasi kasebut. Aku suggest nggunakake npx kanggo tansah up-to-date karo create-react-app lan banjur nggawe aplikasi. Aku suggest nggunakake npx kanggo tansah up-to-date karo create-react-app. **2. Instal awsmobile CLI menyang komputer lan jalanake ing proyek **
Saka titik iki, sampeyan kudu menehi perhatian marang aplikasi React ing editor kode sampeyan. Bakal ditambahake folder kayata /awsmobile lan sawetara tambahan menyang file package.json.
Ing jendhela terminal, ketik
npm nginstal -g awsmobile-cli
kanggo nginstal awsmobile-cli global. Kita bakal nggunakake iki sawise nindakake sawetara karya ing console AWS Mobile Hub.
Priksa manawa sampeyan ana ing proyek sampeyan lan ketik
awsmobile init
Sampeyan bakal dijaluk sawetara pitakonan, sing standare apik, mula penet enter liwat saben setelan nganti AWS kanthi otomatis mbukak ing browser gawan. Mlebet nganggo akun Tier Gratis yen sampeyan durung.
Iki njamin awsmobile-cli yen kita wis disambungake menyang akun AWS sing bener. Bali menyang terminal banjur Pencet Enter kanggo nerusake.
AWS kudu nyiyapake pangguna kanggo ngontrol aplikasi kasebut. Iki bakal ditindakake kanthi otomatis dening awsmobile-cli nalika sampeyan terus menet enter.
Sawise ngrampungake iki, sampeyan bakal digawa menyang AWS IAM ing ngendi sampeyan mung bakal nerusake. ¢ÃÂàdalan sampeyan nganti lengkap! Ing langkah kapindho, kudu kanthi otomatis mriksa âÃÂÃÂAdministrator AccessâÃÂàsing menehi akses pangguna menyang kabeh fitur AWS sing dibutuhake.
Yen wis rampung, penting banget yen sampeyan ngundhuh file .csv nganggo kredensial rahasia amarga mung bakal ditampilake sapisan ing AWS. Tombol iki bakal digunakake ing langkah sabanjure ing jendhela terminal.
Iki kasil nggawe aplikasi AWS MobileHub lan nginstal aws-amplify kanthi otomatis& aws-amplify-react menyang proyek React lokal sampeyan
Nalika proses iki rampung (~ 1 min) sampeyan bisa ngetik
konsol awsmobile
kanggo ndeleng aplikasi Mobile Hub ing browser gawan. Sampeyan uga bisa ngetik âÃÂÃÂawsmobileâÃÂàkanggo ndeleng dhaptar tumindak sing beda. Saka kene, kita bakal nambah Cognito Login karo browser, nanging sampeyan bisa nindakake saka CLI awsmobile.
**3. Bener nambahake Cognito Sign-in lan Hosting**
Kanggo langkah pungkasan, kita bakal nambah AWS Cognito menyang proyek kita liwat AWS MobileHub Console. Sampeyan uga bisa mriksa Hosting sing wis diaktifake kanthi standar.
Kanggo nyoba Hosting, klik fitur ing console lan klik URL sing wis diwenehake. Konten ing kene minangka cithakan dening AWS, nanging sampeyan bakal nimpa kanthi aplikasi React.
**Kanggo nambah Cognito User Sign-in, gulung mudhun kanggo nemokake âÃÂÃÂUser Sign-inâÃÂàbanjur klik. ** Iki mbisakake Cognito User Pools kanthi sistem otentikasi. Gunakake âÃÂÃÂEmailâÃÂàsaka alamat Email utawa nomer telpon kanggo meksa email minangka jeneng pangguna ing login sampeyan. Utawa sampeyan bisa nggunakake Jeneng pangguna lan aktifake âÃÂÃÂEmailâÃÂà+ âÃÂÃÂJeneng panganggoâà Âàkanggo ngidini pangguna milih. Sampeyan bakal nampa kode konfirmasi liwat email salah siji cara.
Kita nampa email amarga AWS ora ngisi biaya kanggo ngirim kode konfirmasi registrasi menyang email, nanging biaya nyata kanggo ngirim SMS.
Sing nyebabake:
Yen sampeyan ngeklik Action >Edit in Cognito, sampeyan bakal weruh konsol Cognito kanggo ngatur Pangguna lan fitur keamanan sing luwih maju. Sawetara persiyapan sing sampeyan tindakake ing langkah iki ora bisa dibatalake nanging sampeyan bisa mbusak blumbang pangguna lan nggawe sing anyar.
Iki ngrampungake konfigurasi AWS Cognito ing MobileHub. Iku wektu kanggo nambah kode. Pinten? 5 larik! Lan 3 mung impor ing React.
= Nambahake setelan sampeyan menyang proyek React lan nerbitake menyang situs web sampeyan =
Ing terminal sampeyan, sampeyan bisa sawayah-wayah nggunakake awsmobile pull utawa awsmobile push kanggo narik owah-owahan saka AWS MobileHub Console online menyang aplikasi sampeyan, utawa push pangowahan lokal sing ditindakake liwat awsmobile CLI ing terminal.
Kanggo kasus panggunaan iki, kita pengin njupuk pangowahan sing digawe. Bali menyang terminal banjur ketik
Mbalik ing Kode VS, sampeyan bakal weruh manawa proyek sampeyan saiki wis diowahi. Sampeyan bisa mriksa konfigurasi lokal ing ./awsmobile/backend/mobile-hub-project.yml
Uga, ing ./package.json sampeyan bakal nemokake loro perpustakaan sing disorot sing ditambahake dening awsmobile init sing wis ditindakake sadurunge.
Saiki kita bakal nggunakake iki kanggo mbungkus aplikasi kita ing jendhela login Cognito. Bukak ./src/index.js lan owahi iki:
iki:
ngimpor React saka 'react';
ngimpor ReactDOM saka 'react-dom';
ngimpor index.css';
ngimpor App saka App';
ngimpor registerServiceWorker saka registerServiceWorker';
ngimpor awsMobile saka aws-exports';
ngimpor Amplify saka 'aws-amplify';
ngimpor {withAuthenticator} saka "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
