= Găzduirea aplicației dvs. React cu AWS în 30 de minute =
Acest tutorial este foarte greu de imagine și se adresează începătorilor completi. Acesta explică cum vă puteți găzdui aplicația React pe un site web, cu un sistem complet de autorizare. Acesta invocă puterea AWS MobileHub prin intermediul CLI (Interfață de linie de comandă) Mobilehub. Tutorialul nu necesită abilități cu serviciile AWS și vă va arăta, de asemenea, să configurați o aplicație React boilerplate.
Dacă aveți deja o aplicație React,
**puteți sări la secțiunea 2 unde instalăm awsmobile-cli și îl adăugam la aplicația noastră
= Înainte de a începe, avem nevoie de câteva lucruri configurate pe computer =
**Mediul Node 8.x instalat pe computer**
- Acesta este mediul de rulare pentru serverele de aplicații Javascript. Urmează cu managerul de pachete nod (NPM).
- NPM este folosit pentru a instala pachete de noduri, cum ar fi React, AWS Amplify, un pachet de conector AWS-JS și asta este în principiu.
- httpsnodejs.org/en/download/
**Un cont AWS Free Tier
- Aveți acces gratuit la Serviciile AWS prin Nivelul gratuit. Pentru acest tutorial, acest lucru ar trebui să fie mai mult decât suficient. Cu toate acestea, rețineți că fiecare serviciu are o limită de utilizare în fiecare lună și acest lucru vă poate costa bani reali.
- httpsaws.amazon.com/free/
**Instalați AWS CLI (Command Line Interface) pentru a apela serviciile AWS direct de pe consola dvs.** **Pentru acest curs vom folosi standardul menținut de la Facebook, creatorii lui React **Un editor la alegerea dvs.
- Vă sugerez să începeți cu Visual Studio Code, un editor ușor modificabil, care poate rula majoritatea limbajelor și cadrelor de programare.
Sfat profesionist: În procesul de instalare a VS Code, asigurați-vă că bifați caseta care îl adaugă la numele căilor de mediu. Acest lucru vă oferă acces la deschiderea VS Code de pe terminal, tastând âÃÂÃÂcode filename.jsâÃÂàsau âÃÂà Âcod .âÃÂàpentru întregul proiect în care te afli. **Un terminal pe care îl... ești confortabil înăuntru
- Majoritatea dezvoltatorilor ar trebui să aibă Git instalat pe computer. Acest lucru vă oferă acces la Git Bash, care este un terminal de acces la mulți dezvoltatori.
Sa incepem!
**1. Creați aplicația React și introduceți folderul proiectului prin terminal**
Introduceți terminalul și găsiți folderul în care stocați aplicațiile. Vă sugerez un folder numit âÃÂÃÂdevâÃÂÃÂ.
npx create-react-app nume-proiect&& nume-proiect cd
sau
npm -g install create-react-app create-react-app nume-proiect
Aici creăm o aplicație React bazată pe boilerplate. âÃÂÃÂnpxâÃÂàeste un instrument Node care utilizează serverul npm pentru apelarea pachetelor de la distanță. Al doilea fragment de cod instalează local create-react-app cu
*npm -g install create-react-app* **și apoi creează aplicația. Vă sugerez să utilizați npx pentru a fi mereu la curent cu create-react-app și apoi creează aplicația. Vă sugerez să utilizați npx pentru a fi mereu la curent cu create-react-app. **2. Instalați awsmobile CLI pe computer și rulați-l în proiect**
Din acest punct, ar trebui să acordați atenție aplicației React din editorul de cod. Vor fi adăugate foldere precum /awsmobile și unele completări la fișierul package.json.
Într-o fereastră de terminal, tastați
npm install -g awsmobile-cli
pentru a instala awsmobile-cli la nivel global. Vom folosi acest lucru după ce vom lucra în consola AWS Mobile Hub.
Asigurați-vă că sunteți în proiectul dvs. și scrieți
awsmobile init
Vi se solicită un set de întrebări, în care valorile implicite sunt bune, așa că apăsați pe Enter prin fiecare setare până când deschide automat AWS în browserul dvs. implicit. Conectează-te cu contul tău gratuit dacă nu ai făcut-o deja.
Acest lucru asigură awsmobile-cli că suntem conectați la contul AWS corect. Reveniți la terminal și apăsați Enter pentru a continua.
AWS trebuie să configureze un utilizator pentru a controla aplicația. Acest lucru se va face automat de awsmobile-cli când continuați să apăsați enter.
După ce ați terminat acest lucru, veți fi dus la AWS IAM, unde veți â¢ÃÂàdoar âÃÂÃÂUrmătorul ¢ÃÂàdrumul spre totalitate! În al doilea pas, ar fi trebuit să fi bifat automat âÃÂÃÂAcces de administratorâ¢ÃÂÃÂ, care oferă utilizatorului acces la toate caracteristicile AWS de care avem nevoie.
Când ați terminat, este foarte important să descărcați fișierul .csv cu acreditările dvs. secrete, deoarece acestea vor fi afișate o singură dată în AWS. Aceste taste vor fi folosite în următorii pași ai ferestrei terminalului.
Acest lucru creează cu succes aplicația AWS MobileHub și instalează automat aws-amplify& aws-amplify-react în proiectul local React
Când acest proces este terminat (~1 min), puteți tasta
consola awsmobile
pentru a vedea aplicația Mobile Hub în browserul implicit. De asemenea, puteți tasta âÃÂÃÂawsmobileâÃÂàpentru a vedea o listă cu diferite acțiuni. De aici, vom adăuga Cognito Login cu browser, dar o puteți face din CLI-ul awsmobile.
**3. Adăugând de fapt conectare și găzduire Cognito**
Pentru ultimul pas, vom adăuga AWS Cognito la proiectul nostru prin Consola AWS MobileHub. De asemenea, puteți verifica Gazduire, care este deja activată în mod implicit.
Pentru a testa găzduirea, faceți clic pe caracteristica din consola dvs. și faceți clic pe adresa URL care vi-a fost furnizată. Conținutul de aici este un șablon de la AWS, dar îl veți suprascrie în curând cu aplicația React.
**Pentru a adăuga Cognito User Sign-in, derulați în jos pentru a găsi âÃÂÃÂUser Sign-in¢ÃÂàși faceți clic pe el. **Acest lucru activează grupurile de utilizatori Cognito cu un sistem de autentificare. Folosiți âÃÂÃÂE-mailâÃÂàde la adresa de e-mail sau numărul de telefon pentru a forța e-mailul ca nume de utilizator în datele de conectare. Sau puteți folosi Nume de utilizator și activa âÃÂÃÂE-mailâÃÂà+ âÃÂÃÂNume de utilizatorâà Âàpentru a permite utilizatorului să aleagă. Veți primi codul de confirmare prin e-mail în orice caz.
Acceptăm e-mailuri, deoarece AWS nu taxează pentru trimiterea codurilor de confirmare a înregistrării pe e-mail, în timp ce trimiterea SMS-urilor costă bani reali.
Ceea ce are ca rezultat:
Dacă faceți clic pe Acțiune >Editați în Cognito, veți vedea consola Cognito pentru gestionarea utilizatorilor și a funcțiilor avansate de securitate. Unele setări pe care le-ați făcut în acest pas sunt ireversibile, dar puteți oricând să ștergeți grupul de utilizatori și să creați unul nou.
Aceasta completează configurarea AWS Cognito în MobileHub. Este timpul să adăugați codul. Cât costă? 5 rânduri! Și 3 dintre ele sunt doar importuri în React.
= Adăugarea setărilor dvs. la proiectul React și publicarea pe site-ul dvs. =
În terminalul dvs., puteți oricând să utilizați awsmobile pull sau awsmobile push pentru a trage modificările online din Consola AWS MobileHub în aplicația dvs. sau puteți împinge modificările locale efectuate prin CLI awsmobile din terminal.
Pentru acest caz de utilizare dorim să preluăm modificările pe care le-am făcut. Reveniți la terminal și tastați
Înapoi în VS Code, veți vedea că acum proiectul dvs. a fost modificat. Puteți verifica configurațiile locale în ./awsmobile/backend/mobile-hub-project.yml
De asemenea, în ./package.json veți găsi cele două biblioteci evidențiate adăugate de awsmobile init, ceea ce am făcut mai devreme.
Acum le vom folosi pentru a include aplicația noastră într-o fereastră de conectare Cognito. Deschideți ./src/index.js și modificați acest lucru:
la acest:
import React din 'react';
import ReactDOM din 'react-dom';
import index.css';
importați aplicația din aplicație”;
import registerServiceWorker din registerServiceWorker';
import awsMobile din aws-exports';
import Amplify din „aws-amplify”;
import { withAuthenticator } din „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
