= Hosting della tua applicazione React con AWS in 30 minuti =
Questo tutorial è molto ricco di immagini e mirato a principianti assoluti. Spiega come puoi ospitare la tua applicazione React su un sito web, con un sistema di autorizzazione completo. Invoca la potenza di AWS MobileHub tramite la CLI (Command Line Interface) di Mobilehub. Il tutorial non richiede competenze con i servizi AWS e ti mostrerà anche come configurare un'applicazione standard React.
Se hai già un'applicazione React,
**puoi passare alla sezione 2 in cui installiamo awsmobile-cli e lo aggiungiamo alla nostra applicazione
= Prima di iniziare abbiamo bisogno di un paio di cose configurate sul tuo computer =
**Ambiente Node 8.x installato sul tuo computer**
- Questo è l'ambiente di runtime per i server delle applicazioni Javascript. Segue con il gestore di pacchetti del nodo (NPM).
- NPM viene utilizzato per installare pacchetti di nodi come React, AWS Amplify, un pacchetto di connettori AWS-JS e questo è fondamentalmente tutto.
- httpsnodejs.org/en/download/
**Un account del piano gratuito AWS
- Ottieni l'accesso gratuito ai servizi AWS tramite il piano gratuito. Per questo tutorial, questo dovrebbe essere più che sufficiente. Tuttavia, tieni presente che ogni servizio ha un limite di utilizzo ogni mese e questo potrebbe costarti denaro reale.
- httpsaws.amazon.com/free/
**Installa AWS CLI (Command Line Interface) per chiamare i servizi AWS direttamente dalla tua console** **Per questo corso utilizzeremo il boilerplate gestito da Facebook, creatori di React **Un editor a tua scelta
- Suggerisco di iniziare con Visual Studio Code, un editor leggero altamente modificabile che può eseguire la maggior parte dei linguaggi e dei framework di programmazione.
Suggerimento pro: nel processo di installazione di VS Code, assicurati di selezionare la casella che lo aggiunge ai nomi dei percorsi dell'ambiente. Questo ti dà accesso per aprire VS Code dal terminale digitando âÃÂÃÂcode filename.jsâÃÂào âÃÂà Âcodice .âÃÂàper l'intero progetto in cui sei attivo. **Un terminale in cui seiâÃÂà Ti senti a tuo agio
- La maggior parte degli sviluppatori dovrebbe avere Git installato sul proprio computer. Questo ti dà accesso a Git Bash, che è il terminale di riferimento di molti sviluppatori.
Cominciamo!
**1. Crea l'applicazione React e accedi alla cartella del progetto tramite il terminale**
Entra nel terminale e individua la cartella in cui memorizzi le applicazioni. Suggerisco una cartella denominata âÃÂÃÂdevâÃÂÃÂ.
npx create-react-app nome-progetto&& cd nome-progetto
o
npm -g install create-react-app create-react-app nome-progetto
Qui creiamo un'applicazione React basata sul boilerplate. âÃÂÃÂnpxâÃÂàè uno strumento Node che utilizza il server npm per chiamare i pacchetti remoti. Il secondo frammento di codice installa create-react-app localmente con
*npm -g install create-react-app* **e quindi crea l'applicazione. Suggerisco di utilizzare npx per essere sempre aggiornati con create-react-app e quindi crea l'applicazione. Suggerisco di utilizzare npx per essere sempre aggiornati con l'app create-react. **2. Installa awsmobile CLI sul tuo computer ed eseguilo nel progetto**
Da questo punto, dovresti prestare attenzione alla tua applicazione React nel tuo editor di codice. Verranno aggiunte cartelle come /awsmobile e alcune aggiunte al file package.json.
In una finestra di terminale, digitare
npm installa -g awsmobile-cli
per installare awsmobile-cli a livello globale. Lo useremo dopo aver svolto un po'di lavoro nella console AWS Mobile Hub.
Assicurati di essere all'interno del tuo progetto e digita
awsmobile init
Ti viene chiesto di rispondere a una serie di domande, in cui le impostazioni predefinite sono valide, quindi premi Invio attraverso ciascuna impostazione fino a quando non si apre automaticamente AWS nel tuo browser predefinito. Accedi con il tuo account di livello gratuito se non l'hai già fatto.
Questo assicura awsmobile-cli che siamo connessi all'account AWS corretto. Torna al tuo terminale e premi Invio per continuare.
AWS deve configurare un utente per controllare l'applicazione. Questa operazione verrà eseguita automaticamente da awsmobile-cli quando continui a premere Invio.
Dopo aver completato questo, verrai indirizzato ad AWS IAM dove dovrai solo âÃÂÃÂNextà ¢ÃÂàla tua strada verso la completezza! Nella seconda fase dovrebbe essere selezionato automaticamente âÃÂÃÂAdministrator AccessâÃÂàche dà all'utente l'accesso a tutte le funzionalità di AWS di cui abbiamo bisogno.
Al termine, è molto importante scaricare il file .csv con le credenziali segrete poiché verranno visualizzate solo una volta in AWS. Queste chiavi devono essere utilizzate nei passaggi successivi della finestra del terminale.
Questo crea correttamente la tua applicazione AWS MobileHub e installa automaticamente aws-amplify& aws-amplify-react nel tuo progetto React locale
Al termine di questo processo (~ 1 min) è possibile digitare
console awsmobile
per visualizzare l'applicazione Mobile Hub nel browser predefinito. Puoi anche digitare âÃÂÃÂawsmobileâÃÂàper visualizzare un elenco di diverse azioni. Da qui, aggiungeremo Cognito Login con il browser, ma puoi farlo dall'interfaccia a riga di comando di awsmobile.
**3. Aggiunta effettiva dell'accesso e dell'hosting di Cognito**
Per l'ultimo passaggio, aggiungeremo AWS Cognito al nostro progetto tramite la console AWS MobileHub. Puoi anche controllare Hosting che è già abilitato per impostazione predefinita.
Per testare l'hosting, fai clic sulla funzione nella tua console e fai clic sull'URL che ti è stato fornito. Il contenuto qui è un modello di AWS, ma presto lo sovrascriverai con l'applicazione React.
**Per aggiungere l'accesso utente Cognito, scorri verso il basso per trovare âÃÂÃÂAccesso utenteâÃÂàe fai clic su di esso. **Ciò abilita Cognito User Pools con un sistema di autenticazione. Usa âÃÂÃÂEmailâÃÂàda Indirizzo email o numero di telefono per forzare l'email come nome utente nel tuo login. Oppure puoi utilizzare Nome utente e abilitare âÃÂÃÂE-mailâÃÂà+ âÃÂÃÂNome utenteâà Âàper consentire all'utente di scegliere. Riceverai il codice di conferma tramite e-mail in entrambi i casi.
Accettiamo e-mail perché AWS non addebita alcun costo per l'invio di codici di conferma della registrazione tramite e-mail, mentre l'invio di SMS costa denaro reale.
Che risulta in:
Se fai clic su Azione >Modifica in Cognito, vedrai la console di Cognito per la gestione degli utenti e le funzionalità di sicurezza avanzate. Alcune impostazioni che hai eseguito in questo passaggio non sono reversibili, ma puoi sempre eliminare il tuo pool di utenti e crearne uno nuovo.
Questo completa la configurazione di AWS Cognito all'interno di MobileHub. È il momento di aggiungere il codice. Quanto? 5 righe! E 3 di loro sono solo importazioni in React.
= Aggiunta delle tue impostazioni al progetto React e pubblicazione sul tuo sito web =
Nel tuo terminale, puoi in qualsiasi momento utilizzare awsmobile pull o awsmobile push rispettivamente per eseguire il pull delle modifiche dalla console AWS MobileHub online alla tua applicazione o eseguire il push delle modifiche locali apportate tramite l'interfaccia a riga di comando di awsmobile nel terminale.
Per questo caso d'uso vogliamo recuperare le modifiche apportate. Torna al tuo terminale e digita
Di nuovo in VS Code, vedrai che il tuo progetto ora è stato modificato. Puoi controllare le tue configurazioni locali in ./awsmobile/backend/mobile-hub-project.yml
Inoltre, in ./package.json troverai le due librerie evidenziate aggiunte da awsmobile init come abbiamo fatto in precedenza.
Ora li useremo per avvolgere la nostra applicazione in una finestra di accesso di Cognito. Apri ./src/index.js e modifica questo:
a questo:
import React da 'react';
importa ReactDOM da 'react-dom';
importa index.css';
importa app da app';
import registerServiceWorker da registerServiceWorker';
importa awsMobile da aws-exports';
importa Amplify da 'aws-amplify';
import { withAuthenticator } from "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
