= Πώς να χρησιμοποιήσετε το AWS Amplify για να αναπτύξετε μια εφαρμογή React =
== Ένας οδηγός για την ανάπτυξη εφαρμογών React με το AWS Amplify ==
Από τότε που άρχισα να συμβουλεύομαι ως Μηχανικός Λογισμικού, ήθελα να δημιουργήσω έναν ιστότοπο χαρτοφυλακίου που να παρουσιάζει
προσωπικά και επαγγελματικά έργα στα οποία έχω δουλέψει. Αυτό το χειμερινό διάλειμμα, αφιέρωσα χρόνο στο να σχεδιάσω, να αναπτύξω και να αναπτύξω τον ιστότοπο του χαρτοφυλακίου μου και σε αυτό το άρθρο, θα σας καθοδηγήσω στον τρόπο που τον ανέπτυξα με το AWS Amplify. Μπορείτε να δείτε τον ιστότοπο στο dan-murphy.com και τον κώδικα στο GitHub.
= Σύντομο Ιστορικό =
Το μεγαλύτερο μέρος της επαγγελματικής μου δουλειάς περιλαμβάνει τη δημιουργία εφαρμογών που βασίζονται σε δεδομένα και τον εξορθολογισμό των αγωγών δεδομένων. Για να ολοκληρώσω αυτές τις εργασίες, χρησιμοποιώ τακτικά Python και Ruby και ενσωματώνω JavaScript για οποιαδήποτε εργασία στο frontend. Σε μια προσπάθεια να γίνω πιο άνετος με το React, αποφάσισα να χρησιμοποιήσω το πλαίσιο για να δημιουργήσω τον ιστότοπο του χαρτοφυλακίου μου.
= Ρύθμιση της Εφαρμογής =
Το πρώτο βήμα που έκανα ήταν να αποφασίσω πώς να δομήσω την εφαρμογή. χρησιμοποίησα
create-react-app ως βασικό πρότυπο για τους καταλόγους μου και, στη συνέχεια, αναδιάρθρωσα την εφαρμογή με μερικούς επιπλέον φακέλους. Η οριστική ρύθμιση μοιάζει με αυτό:
src
συστατικά
Αρχεία
Ἐξτρα
Στοιχεία
Εικ
σελίδες
Περιεχόμενα
Στοιχεία
στυλ
δοκιμές
φωτιστικά
Μερικές από τις αξιοσημείωτες αλλαγές είναι οι
**συστατικά**
, και
**σελίδες**
καταλόγους.
**στυλ**
,
: Εδώ αποθηκεύω όλα τα στοιχεία για την εφαρμογή. Αποθηκεύοντας τα στοιχεία σε έναν κεντρικό φάκελο, είναι πιο εύκολο να ξαναχρησιμοποιήσω και να αναδιαμορφώσω τον κώδικά μου και πιο διαισθητικό για άλλους να το καταλάβουν. Μερικά από τα στοιχεία που συνθέτουν τον ιστότοπο του χαρτοφυλακίου μου είναι
συστατικά
Επί κεφαλής,
Υποσέλιδο, και
ProjectSidebar.
: Εδώ χτίζω τις ξεχωριστές σελίδες για την εφαρμογή. Εισάγω τα απαραίτητα εξαρτήματα από το
σελίδες
φάκελο και στη συνέχεια συγκεντρώστε τα για να σχεδιάσετε τη σελίδα. Εδώ είναι ένα παράδειγμα για το πώς το έκανα αυτό για το
αρχική σελίδα στοιχείων:
: Εδώ ορίζω καθολικά στυλ CSS για την εφαρμογή. Μου αρέσει να χρησιμοποιώ
στυλ
styled-componentsγια μεμονωμένα στοιχεία, αλλά βρήκα επίσης χρήσιμο να δημιουργήσω καθολικά στυλ που είναι διαθέσιμα σε κάθε σελίδα.
Τέλος, για να αντιστοιχίσουμε αιτήματα στις σωστές σελίδες, χρησιμοποιούμε
react-router-dom. Οι διαδρομές ορίζονται στο
Αρχείο App.js όπως φαίνεται παρακάτω:
Αυτό θα χαρτογραφηθεί
Αρχική Σελίδα,
/projects requests to
Σελίδα Έργων,
/σχετικά με αιτήματα προς
AboutPage, και
/bookshelf αιτήματα για να
Σελίδα Βιβλίου. Τώρα που ολοκληρώθηκε η ανάπτυξη της εφαρμογής, πρέπει να την αναπτύξουμε για να τη χρησιμοποιήσουν και άλλοι!
/αιτήματα σε
= Ανάπτυξη με AWS Amplify =
== Επισκόπηση ==
Υπάρχουν διάφοροι τρόποι για την ανάπτυξη ενός ιστότοπου React, αλλά έχω διαπιστώσει ότι ένας από τους απλούστερους είναι η χρήση
**Το AWS Amplify Amplify περιγράφεται ως ο «γρηγορότερος και ευκολότερος τρόπος δημιουργίας εφαρμογών για κινητά και web που κλιμακώνονται. Για να το πετύχετε αυτό, Το AWS προεκτείνει όλες τις επιπλοκές της εγκατάστασης ενός διακομιστή, της εγκατάστασης εξαρτήσεων και της δημιουργίας μιας έκδοσης παραγωγής του ιστότοπού σας, επιτρέποντάς σας να εστιάσετε αποκλειστικά στη δημιουργία ενός διαισθητικού UX. Για να μάθετε περισσότερα σχετικά με το τι προσφέρει το AWS Amplify για εφαρμογές που βασίζονται σε δεδομένα (συγκεκριμένα, ιστότοποι με **frontend** και **backend ελέγξτε την τεκμηρίωσή τους.
== Σύνδεση του Αποθετηρίου σας ==
Για να φιλοξενήσετε την εφαρμογή Ιστού σας στο AWS Amplify, πρέπει πρώτα να συνδέσετε το αποθετήριο που περιέχει τον πηγαίο κώδικα. Για να το κάνετε αυτό, μπορείτε να πλοηγηθείτε στο
*AWS Amplify* *Ξεκινώντας* ** Φιλοξενήστε την εφαρμογή My Web και κάντε κλικ στο **Σύνδεση αποθετηρίου εφαρμογών *σελίδα, κάντε κύλιση στη*σελίδα, κάντε κύλιση στο 
Στη συνέχεια, θα ανακατευθυνθείτε σε μια ξεχωριστή σελίδα όπου μπορείτε να συνδέσετε το αποθετήριο που περιέχει τον πηγαίο κώδικα σας. Για αυτό το παράδειγμα, θα επιλέξω το GitHub, αλλά το AWS Amplify υποστηρίζει επίσης BitBucket, GitLab, AWS CodeCommit και ακόμη και ανάπτυξη χωρίς πάροχο Git.
Μετά την επιτυχή εξουσιοδότηση, μπορείτε να επιλέξετε ποιο αποθετήριο θέλετε να αναπτύξετε και να επιλέξετε τον κλάδο που θα πρέπει να χρησιμοποιεί το AWS Amplify για εκδόσεις παραγωγής.
Μετά από αυτό, κάντε κλικ
Το **Next** και το AWS θα σας ζητήσουν να διαμορφώσετε τις ρυθμίσεις *build* και *test*. Το βασικό πρότυπο που παρέχει το AWS φαίνεται παρακάτω.
έκδοση: 1
frontend:
φάσεις:
προκατασκευή:
εντολές:
- npm εγκατάσταση κατασκευής:
εντολές:
- npm εκτέλεση κατασκευής
τεχνουργήματα:
baseDirectory: κατασκευή
αρχεία:
-
κρύπτη:
μονοπάτια:
- node_modules
Επιπλέον, κάτω από το
Εναλλαγή **προχωρημένων ρυθμίσεων**, μπορείτε να ορίσετε μεταβλητές περιβάλλοντος και ένα προσαρμοσμένο κοντέινερ κατασκευής.
Τέλος, αφού ελέγξετε τις ρυθμίσεις για την εφαρμογή σας, κάντε κλικ
**Αποθήκευση και ανάπτυξη **και **Το AWS θα ξεκινήσει τη διαμόρφωση και την ανάπτυξη της εφαρμογής σας. Όταν ολοκληρωθεί η ανάπτυξη του AWS, μπορείτε να πλοηγηθείτε στην αρχική σελίδα Ενίσχυση και να δείτε ότι η νέα εφαρμογή σας AWS θα αρχίσει να διαμορφώνει και να αναπτύσσει την εφαρμογή σας. Όταν ολοκληρωθεί η ανάπτυξη του AWS, μπορείτε να πλοηγηθείτε στην αρχική σελίδα του Amplify και να δείτε την εφαρμογή που αναπτύχθηκε πρόσφατα.
Τώρα, ας προσαρμόσουμε τη διεύθυνση URL χρησιμοποιώντας
**AWS Ενισχύστε τη διαχείριση τομέα
== Προσθήκη προσαρμοσμένου τομέα ==
Για να ξεκινήσετε την προσθήκη ενός προσαρμοσμένου τομέα, μεταβείτε στην αριστερή πλαϊνή γραμμή και επιλέξτε
**διαχείριση τομέα 
**διαχείριση τομέα**ρύθμιση.
Στη συνέχεια, επιλέξτε
**προσθήκη τομέα **διαμόρφωση τομέα **εισαγάγετε το όνομα τομέα σας (όπως φαίνεται παρακάτω) και κάντε κλικ**εισαγάγετε το όνομα τομέα σας (όπως φαίνεται παρακάτω) και κάντε κλικ στο 
Μετά από αυτό, μπορείτε να ρυθμίσετε τυχόν ανακατευθύνσεις που είναι απαραίτητες για τον τομέα σας. Για παράδειγμα, στο παρακάτω παράδειγμα, δημιουργώ μια ανακατεύθυνση από το httpsdan-murphy.com στο httpswww.dan-murphy.com.
Τέλος, αφού διαμορφωθεί σωστά ο προσαρμοσμένος τομέας σας, το AWS θα σας παράσχει ένα
**Πιστοποιητικό επικύρωσης Μπορείτε επίσης να δείτε αυτό το πιστοποιητικό στην κονσόλα Διαχείρισης πιστοποιητικών AWS.
== Προσθήκη εγγραφής CNAME ==
Το τελευταίο βήμα για τη διαμόρφωση του προσαρμοσμένου τομέα σας είναι η προσθήκη μιας εγγραφής CNAME. Στο παρακάτω παράδειγμα χρησιμοποιώ το Google Domains, αλλά οι θεμελιώδεις έννοιες παραμένουν οι ίδιες σε διαφορετικούς καταχωρητές τομέων.
Πρώτα, μετακινηθείτε προς τα κάτω στο
**Προσαρμοσμένα αρχεία πόρων** στους Τομείς Google. Δημιουργήστε μια εγγραφή *CNAME * που οδηγεί όλους τους υποτομείς στον τομέα AWS Amplify: Όνομα: εισαγάγετε το όνομα υποτομέα. Εάν ο υποτομέας είναι www.domain.com, πληκτρολογήστε . Αν είναι www app.domain.com, μπείτε στην εφαρμογή. Δεδομένα: Στη σελίδα διαχείρισης τομέα, κάντε κλικ στο Actions και, στη συνέχεια, επιλέξτε Προβολή εγγραφών DNS. Στη συνέχεια, εισαγάγετε τον τομέα AWS Amplify που είναι διαθέσιμος στην ενότητα Διαμόρφωση παρόχου DNS. 
**Διαχείριση τομέων**σελίδα, επιλέξτε **Ενέργειες **Προβολή εγγραφών DNS**
Συνολικά, η εγγραφή προσαρμοσμένου πόρου θα έχει την εξής μορφή:
Στη συνέχεια, προσθέστε ένα ακόμη
Εγγραφή *CNAME* που οδηγεί στον διακομιστή επικύρωσης του Διαχειριστή πιστοποιητικών AWS. Ο επικυρωμένος Διαχειριστής πιστοποιητικών AWS χειρίζεται το TLS για την εφαρμογή σας: Όνομα: εισαγάγετε τον υποτομέα του διακομιστή επικύρωσης. Εάν η εγγραφή DNS για την επαλήθευση της ιδιοκτησίας του τομέα σας είναι _1234.example.com, εισαγάγετε μόνο _1234. Δεδομένα: εισάγετε το πιστοποιητικό επικύρωσης ACM. Εάν ο διακομιστής επικύρωσης είναι _1234.abcdefg.acm-validations.aws., πληκτρολογήστε _1234.abcdefg.acm-validations.aws.
Όλες οι πληροφορίες για τα Πιστοποιητικά επικύρωσης βρίσκονται στην κονσόλα AWS Certificate Manager. Μετά το δεύτερο
Το *CNAME* προστέθηκε, οι προσαρμοσμένες εγγραφές σας θα πρέπει να έχουν την εξής μορφή: 
Τέλος, ας προσθέσουμε ένα
**Συνθετική εγγραφή** για να ρυθμίσετε έναν υποτομέα προώθησης: Υποτομέας: εισαγάγετε τη διεύθυνση URL τομέα: www. 
= Αναδίπλωση =
Συνολικά, σε αυτό το άρθρο, μάθαμε πώς να δομούμε τις εφαρμογές React και να τις αναπτύσσουμε με το AWS Amplify. Αρχικά, συζητήσαμε πώς να προσαρμόσουμε μια εφαρμογή react σε μια εφαρμογή
φακέλους *components* *pages*. Στη συνέχεια, μάθαμε για το **AWS Amplify** και τον τρόπο ανάπτυξης στατικών εφαρμογών και εφαρμογών που βασίζονται σε δεδομένα με αυτό. Τέλος, μάθαμε για τη χρήση του **AWS Amplify Domain Management** και του **Google Domains **για την προσαρμογή του τομέα της εφαρμογής μας. **και**και
Εάν έχετε οποιεσδήποτε ερωτήσεις, ανησυχίες ή σχόλια σχετικά με αυτό το άρθρο ή τον ιστότοπο του χαρτοφυλακίου μου, μη διστάσετε να σχολιάσετε ή να μου στείλετε email στο
*
[email protected]*. Ευχαριστώ για την ανάγνωση!
