= Φιλοξενία της εφαρμογής React με AWS σε 30 λεπτά =
Αυτό το σεμινάριο είναι πολύ βαρύ και απευθύνεται σε εντελώς αρχάριους. Εξηγεί πώς μπορείτε να φιλοξενήσετε την εφαρμογή React σε έναν ιστότοπο, με ένα πλήρες σύστημα εξουσιοδότησης. Επικαλείται τη δύναμη του AWS MobileHub μέσω του Mobilehub CLI (Διεπαφή Γραμμής Εντολών). Το σεμινάριο δεν απαιτεί δεξιότητες με τις υπηρεσίες AWS και θα σας δείξει επίσης να ρυθμίσετε μια εφαρμογή Boilerplate React.
Εάν έχετε ήδη μια εφαρμογή React,
**μπορείτε να μεταβείτε στην ενότητα 2 όπου εγκαθιστούμε το awsmobile-cli και να το προσθέσετε στην εφαρμογή μας
= Πριν ξεκινήσουμε, χρειαζόμαστε μερικά πράγματα να ρυθμίσουμε στον υπολογιστή σας =
**Το περιβάλλον Node 8.x είναι εγκατεστημένο στον υπολογιστή σας**
- Αυτό είναι το περιβάλλον χρόνου εκτέλεσης για διακομιστές εφαρμογών Javascript. Ακολουθεί ο διαχειριστής πακέτων κόμβου (NPM).
- Το NPM χρησιμοποιείται για την εγκατάσταση πακέτων κόμβων όπως React, AWS Amplify, ένα πακέτο σύνδεσης AWS-JS και αυτό είναι βασικά.
- httpsnodejs.org/en/download/
**Ένας λογαριασμός AWS Free Tier
- Έχετε δωρεάν πρόσβαση στις Υπηρεσίες AWS μέσω του Free Tier. Για αυτό το σεμινάριο, αυτό θα πρέπει να είναι περισσότερο από αρκετό. Ωστόσο, μην ξεχνάτε ότι κάθε υπηρεσία έχει ένα όριο στη χρήση κάθε μήνα και αυτό μπορεί να σας κοστίσει πραγματικά χρήματα.
- httpsaws.amazon.com/free/
**Εγκαταστήστε το AWS CLI (Διασύνδεση γραμμής εντολών) για να καλέσετε τις υπηρεσίες AWS απευθείας από την κονσόλα σας** **Για αυτό το μάθημα θα χρησιμοποιήσουμε το συντηρημένο boilerplate από το Facebook, δημιουργούς του React **Ένας επεξεργαστής της επιλογής σας
- Προτείνω να ξεκινήσετε με το Visual Studio Code, έναν εξαιρετικά τροποποιήσιμο, ελαφρύ επεξεργαστή που μπορεί να τρέξει τις περισσότερες γλώσσες προγραμματισμού και πλαίσια.
Επαγγελματική συμβουλή: Στη διαδικασία εγκατάστασης του VS Code, βεβαιωθείτε ότι επιλέξτε το πλαίσιο που τον προσθέτει στα ονόματα διαδρομής του περιβάλλοντος σας. Αυτό σας δίνει πρόσβαση για να ανοίξετε τον Κωδικό VS από το τερματικό πληκτρολογώντας âÃÂÃÂcode filename.jsâÃÂÃÂ ή Ã¢ÃÂà Âκωδικός .âÃÂàγια ολόκληρο το έργο στο οποίο βρίσκεστε. **Ένα τερματικό Είσαι άνετα μέσα
- Οι περισσότεροι προγραμματιστές θα πρέπει να έχουν εγκατεστημένο το Git στον υπολογιστή τους. Αυτό σας δίνει πρόσβαση στο Git Bash, το οποίο είναι το τερματικό πολλών προγραμματιστών.
Ας ξεκινήσουμε!
**1. Δημιουργήστε την εφαρμογή React και εισαγάγετε τον φάκελο του έργου μέσω τερματικού**
Εισαγάγετε το τερματικό και εντοπίστε το φάκελο όπου αποθηκεύετε εφαρμογές. Προτείνω έναν φάκελο με το όνομα âÃÂÃÂdevâÃÂÃÂ.
npx create-react-app-project-name&& όνομα έργου cd
ή
npm -g εγκατάσταση δημιουργία-react-app δημιουργία-react-app-όνομα έργου
Εδώ δημιουργούμε μια εφαρμογή React με βάση το boilerplate. Το âÃÂÃÂnpxâÃÂàείναι ένα εργαλείο κόμβου που χρησιμοποιεί τον διακομιστή npm για την κλήση σε απομακρυσμένα πακέτα. Το δεύτερο απόσπασμα κώδικα εγκαθιστά τη δημιουργία-αντίδραση-εφαρμογή τοπικά με
*npm -g εγκατάσταση create-react-app* **και στη συνέχεια δημιουργεί την εφαρμογή. Προτείνω να χρησιμοποιείτε το npx για να είστε πάντα ενημερωμένοι με το create-react-appand και στη συνέχεια δημιουργεί την εφαρμογή. Προτείνω να χρησιμοποιείτε το npx για να είστε πάντα ενημερωμένοι με το create-react-app. **2. Εγκαταστήστε το awsmobile CLI στον υπολογιστή σας και εκτελέστε το στο έργο**
Από αυτό το σημείο, θα πρέπει να δώσετε προσοχή στην εφαρμογή React στον επεξεργαστή κώδικα. Θα προστεθούν φάκελοι όπως το /awsmobile και μερικές προσθήκες στο αρχείο package.json.
Σε ένα παράθυρο τερματικού, πληκτρολογήστε
npm εγκατάσταση -g awsmobile-cli
για να εγκαταστήσετε το awsmobile-cli παγκοσμίως. Θα το χρησιμοποιήσουμε αφού κάνουμε κάποια εργασία στην κονσόλα AWS Mobile Hub.
Βεβαιωθείτε ότι βρίσκεστε εντός του έργου και του τύπου σας
awsmobile init
Σας ζητείται ένα σύνολο ερωτήσεων, στις οποίες οι προεπιλογές είναι καλές, επομένως πατήστε enter σε κάθε ρύθμιση μέχρι να ανοίξει αυτόματα το AWS στο προεπιλεγμένο πρόγραμμα περιήγησής σας. Συνδεθείτε με τον λογαριασμό σας Free Tier εάν δεν το είχατε ήδη.
Αυτό διαβεβαιώνει το awsmobile-cli ότι είμαστε συνδεδεμένοι στον σωστό λογαριασμό AWS. Επιστρέψτε στο τερματικό σας και πατήστε Enter για να συνεχίσετε.
Το AWS πρέπει να ρυθμίσει έναν χρήστη για να ελέγχει την εφαρμογή. Αυτό θα γίνει αυτόματα από το awsmobile-cli όταν συνεχίσετε να πατάτε enter.
Μετά την ολοκλήρωση αυτού, θα μεταφερθείτε στο AWS IAM όπου θα είστε απλώς Επόμενος Ο δρόμος σας προς την πληρότητα! Στο δεύτερο βήμα, θα πρέπει να έχει αυτόματα τσεκάρει το «Administrator Access» το οποίο δίνει στον χρήστη πρόσβαση σε όλες τις δυνατότητες του AWS που χρειαζόμαστε.
Όταν τελειώσετε, είναι πολύ σημαντικό να κάνετε λήψη του αρχείου .csv με τα μυστικά διαπιστευτήριά σας, καθώς θα εμφανίζονται μόνο μία φορά στο AWS. Αυτά τα κλειδιά πρόκειται να χρησιμοποιηθούν στα επόμενα βήματα του παραθύρου του τερματικού σας.
Αυτό δημιουργεί με επιτυχία την εφαρμογή AWS MobileHub και εγκαθιστά αυτόματα το aws-amplify& aws-amplify-react στο τοπικό σας έργο React
Όταν ολοκληρωθεί αυτή η διαδικασία (~1 λεπτό) μπορείτε να πληκτρολογήσετε
κονσόλα awsmobile
για να δείτε την εφαρμογή Mobile Hub στο προεπιλεγμένο πρόγραμμα περιήγησής σας. Μπορείτε επίσης να πληκτρολογήσετε "awsmobile"για να δείτε μια λίστα με διαφορετικές ενέργειες. Από εδώ, θα προσθέσουμε Cognito Login με το πρόγραμμα περιήγησης, αλλά θα μπορούσατε να το κάνετε από το awsmobile CLI.
**3. Πραγματικά προσθήκη Cognito Sign-in και Hosting**
Για το τελευταίο βήμα, θα προσθέσουμε το AWS Cognito στο έργο μας μέσω της Κονσόλας AWS MobileHub. Μπορείτε επίσης να ελέγξετε τη Φιλοξενία που είναι ήδη ενεργοποιημένη από προεπιλογή.
Για να δοκιμάσετε τη Φιλοξενία, κάντε κλικ στη λειτουργία στην κονσόλα σας και κάντε κλικ στη διεύθυνση URL που σας δόθηκε. Το περιεχόμενο εδώ είναι ένα πρότυπο από την AWS, αλλά θα το αντικαταστήσετε σύντομα με την εφαρμογή React.
**Για να προσθέσετε το Cognito User Sign-in, κάντε κύλιση προς τα κάτω για να βρείτε το User Sign-In και κάντε κλικ σε αυτό. **Αυτό ενεργοποιεί τις ομάδες χρηστών Cognito με ένα σύστημα ελέγχου ταυτότητας. Χρησιμοποιήστε âÃÂÃÂEmailâÃÂàαπό τη διεύθυνση ηλεκτρονικού ταχυδρομείου ή τον αριθμό τηλεφώνου για να επιβάλετε το email ως όνομα χρήστη στη σύνδεσή σας. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε Όνομα χρήστη και να ενεργοποιήσετε το Ηλεκτρονικό ταχυδρομείο + Όνομα χρήστη. àγια να αφήσετε τον χρήστη να επιλέξει. Θα λάβετε τον κωδικό επιβεβαίωσης μέσω email με κάθε τρόπο.
Δεχόμαστε email επειδή το AWS δεν χρεώνει για την αποστολή κωδικών επιβεβαίωσης εγγραφής στο email, ενώ η αποστολή SMS κοστίζει πραγματικά χρήματα.
Το οποίο έχει ως αποτέλεσμα:
Εάν κάνετε κλικ στην επιλογή Ενέργεια >Επεξεργασία σε Cognito, θα δείτε την κονσόλα Cognito για τη διαχείριση των χρηστών και των προηγμένων λειτουργιών ασφαλείας. Ορισμένες ρυθμίσεις που κάνατε σε αυτό το βήμα είναι μη αναστρέψιμες, αλλά μπορείτε πάντα να διαγράψετε τη συγκέντρωση χρηστών και να δημιουργήσετε μια νέα.
Αυτό ολοκληρώνει τη διαμόρφωση του AWS Cognito μέσα στο MobileHub. Ήρθε η ώρα να προσθέσετε κώδικα. Πόσο? 5 γραμμές! Και 3 από αυτά είναι μόνο εισαγωγές στο React.
= Προσθήκη των ρυθμίσεών σας στο έργο React και δημοσίευση στον ιστότοπό σας =
Στο τερματικό σας, μπορείτε ανά πάσα στιγμή να χρησιμοποιήσετε το awsmobile pull ή το awsmobile push για να τραβήξετε αντίστοιχα τις αλλαγές σας από το AWS MobileHub Console online στην εφαρμογή σας ή να προωθήσετε τις τοπικές αλλαγές που έγιναν μέσω του awsmobile CLI στο τερματικό.
Για αυτήν την περίπτωση χρήσης θέλουμε να ανακτήσουμε τις αλλαγές που κάναμε. Επιστρέψτε στο τερματικό σας και πληκτρολογήστε
Πίσω στον Κώδικα VS, θα δείτε ότι το έργο σας τώρα έχει τροποποιηθεί. Μπορείτε να ελέγξετε τις τοπικές σας διαμορφώσεις στο ./awsmobile/backend/mobile-hub-project.yml
Επίσης, στο ./package.json θα βρείτε τις δύο επισημασμένες βιβλιοθήκες να προστίθενται από το awsmobile init, κάτι που κάναμε νωρίτερα.
Θα τα χρησιμοποιήσουμε τώρα για να τυλίξουμε την εφαρμογή μας σε ένα παράθυρο σύνδεσης Cognito. Ανοίξτε το ./src/index.js και τροποποιήστε αυτό:
σε αυτό:
εισαγωγή Αντίδραση από το 'react';
εισαγωγή ReactDOM από το 'react-dom'.
εισαγωγή index.css';
εισαγωγή εφαρμογής από την εφαρμογή';
εισαγωγή registerServiceWorker από registerServiceWorker';
εισαγωγή awsMobile από aws-exports';
εισαγωγή Ενίσχυση από το 'aws-amplify'.
εισαγωγή { withAuthenticator } από το "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
