= Ανάπτυξη εφαρμογών React στο Amazon S3 =
== Οδηγός 5 λεπτών για το πώς να αναπτύξετε το React Apps με το S3 ==
Έτσι έχετε ολοκληρώσει την εφαρμογή React και ψάχνετε να τη φιλοξενήσετε κάπου. Γνωρίζατε ότι μπορείτε να χρησιμοποιήσετε το Amazon AWS S3 για να φιλοξενήσετε τις εφαρμογές σας React; Είναι σχετικά εύκολο, χαμηλό κόστος και γρήγορο στην ανάπτυξη.
= Ας ξεκινήσουμε! =
== Προαπαιτούμενα ==
Πριν προχωρήσουμε στη φιλοξενία, ας ολοκληρώσουμε τη διοικητική ρύθμιση. Βεβαιωθείτε ότι έχετε συμπληρώσει τα ακόλουθα:
**Έχετε λογαριασμό AWS Εγγραφείτε για λογαριασμό AWS εδώ: httpsaws.amazon.com/resources/create-account/ **Δημιουργήστε έναν χρήστη AWS Στην Κονσόλα AWS, μεταβείτε στην καρτέλα IAM και μεταβείτε στο Ã Ενότητα "Χρήστες"στην πλαϊνή γραμμή.
Κάντε κλικ στο "Προσθήκη χρήστη"και επιλέξτε "Προγραμματική πρόσβαση".
Κάντε κλικ στο κουμπί "Επόμενο: Δικαιώματα"και εδώ επιλέξτε "Απευθείας επισύναψη υπαρχουσών πολιτικών". ÂÃÂ. Ελέγξτε το AdministratorAccess.
Κάντε κλικ στα κουμπιά Επόμενο και τέλος κάντε κλικ στο «Δημιουργία χρήστη».
Στο τελικό βήμα, λαμβάνουμε ένα αναγνωριστικό κλειδιού πρόσβασης και ένα μυστικό κλειδί πρόσβασης. Λήψη και
**αποθηκεύστε τα στον υπολογιστή σας καθώς θα το χρειαστείτε αργότερα
== Εγκαταστήστε το AWS CLI ==
Το AWS CLI είναι ένα ισχυρό εργαλείο που μπορεί να μας βοηθήσει να απλοποιήσουμε τη διαδικασία ανάπτυξης.
Ας εγκαταστήσουμε το AWS CLI χρησιμοποιώντας το Homebrew (για macOS). Εγκαταστήστε το Homebrew εάν δεν το έχετε κάνει ήδη.
*Σημείωση: Εάν χρησιμοποιείτε Windows, μπορείτε να βρείτε τις οδηγίες στα επίσημα έγγραφα * *εδώ*
Ανοίξτε το τερματικό σας και μπείτε
brew install awscli.
Μόλις εγκατασταθεί το εργαλείο CLI, μπορούμε να διαμορφώσουμε τον λογαριασμό μας στο AWS
aws διαμόρφωση. Εδώ θα χρειαστεί να εισαγάγετε τις βασικές πληροφορίες πρόσβασης που κατεβάσατε προηγουμένως. Θα πρέπει να είναι κάτι σαν το παρακάτω.
Για την περιοχή, μπορείτε να ελέγξετε τη διεύθυνση URL στην Κονσόλα AWS και θα αναφέρει την περιοχή σας. Για παράδειγμα, το δικό μου είναι âÃÂÃÂap-southeast-1âÃÂÃÂ.
= Δημιουργία εφαρμογής React =
Μπορεί να έχετε ήδη την εφαρμογή React έτοιμη για ανάπτυξη. Ωστόσο, εάν χρειάζεστε ένα δείγμα εφαρμογής, μπορείτε να χρησιμοποιήσετε τις ακόλουθες επιλογές:
- Δημιουργήστε μια εφαρμογή Boilerplate React εκτελώντας
npx create-react-app my-app
- Κάντε λήψη του δείγματος της εφαρμογής React μου (με παράδειγμα φόρμας) από τη διεύθυνση httpsgithub.com/harishv7/react-hook-form-example. Αυτό έγινε για ένα σεμινάριο για την προσθήκη φορμών στις εφαρμογές React. Δείτε το εδώ.
Μόλις τελειώσετε, βεβαιωθείτε ότι όλες οι εξαρτήσεις έχουν εγκατασταθεί χρησιμοποιώντας
εγκαταστήστε το νήμα και δώστε στην εφαρμογή μια εκτέλεση χρησιμοποιώντας
εκκίνηση νήματος.
= Ρυθμίστε έναν κάδο S3 =
Τώρα που έχουμε έτοιμο το δείγμα της εφαρμογής μας, ας διαμορφώσουμε έναν κάδο S3 για να φιλοξενήσει την εφαρμογή μας.
Στην Κονσόλα AWS, αναζητήστε το âÃÂÃÂS3âÃÂàκαι μεταβείτε στον πίνακα ελέγχου S3. Κάντε κλικ στο "Create bucket"και δώστε στον κάδο ένα όνομα όπως "my-react"-app-2021 âÃÂà(ή οτιδήποτε άλλο επιθυμείτε).
*Σημείωση: Το όνομα του κάδου πρέπει να είναι μοναδικό σε ολόκληρο το S3. Επιλέξτε λοιπόν ένα μοναδικό όνομα που δεν υπάρχει, διαφορετικά θα εμφανιστεί ένα σφάλμα!* 
Ενεργοποιήστε τη δημόσια πρόσβαση στον κάδο, καθώς τον φιλοξενούμε ζωντανά.
Αφήστε τις υπόλοιπες ρυθμίσεις ως έχουν και κάντε κλικ στο «Δημιουργία κάδου». Θα δείτε μια καταχώριση όπως η παρακάτω στο ταμπλό του S3.
Ας κάνουμε κλικ και πηγαίνουμε στον κάδο S3 που δημιουργήθηκε πρόσφατα.
Ας κάνουμε κλικ στο "Ιδιότητες"και μεταβείτε μέχρι το κάτω μέρος όπου θα δείτε τη φιλοξενία στατικής ιστοτόπου.
Κάντε κλικ στο âÃÂÃÂΕνεργοποίηση και πληκτρολογήστε àκάτω από το έγγραφο ευρετηρίου.
Αφήστε τα άλλα πεδία ίδια και κάντε κλικ στο «Αποθήκευση αλλαγών».
= Ανάπτυξη στο S3 =
Τώρα, είμαστε έτοιμοι να αναπτύξουμε την εφαρμογή μας στο S3. Ο τρόπος για να το κάνετε αυτό είναι να χρησιμοποιήσετε την ακόλουθη εντολή CLI:
aws s3 sync build/ s3your-bucket-name>--acl public-read
Μπορούμε να προσθέσουμε αυτήν την εντολή στο αρχείο package.json μας και ως σενάριο âÃÂÃÂdeployâÃÂÃÂ.
Ας δημιουργήσουμε την εφαρμογή μας χρησιμοποιώντας
κατασκευή νήματος που βοηθά στη δημιουργία μιας βελτιστοποιημένης κατασκευής παραγωγής.
Στη συνέχεια, ας εκτελέσουμε την εντολή CLI που δίνεται παραπάνω ή εάν έχετε ρυθμίσει το σενάριο δημοσίευσής σας στο package.json, μπορούμε να χρησιμοποιήσουμε
ανάπτυξη νήματος.
Αυτό είναι, η εφαρμογή μας έχει πλέον αναπτυχθεί!
Για να βρείτε πού φιλοξενείται η εφαρμογή μας (ο σύνδεσμος ιστότοπου), μεταβείτε στην κονσόλα AWS S3 και κάντε κλικ στον κάδο που δημιουργήσατε.
Μεταβείτε στην καρτέλα "Ιδιότητες"και πραγματοποιήστε κύλιση προς τα κάτω μέχρι τον Στατικό ιστότοπο "Ιδιότητες"φιλοξενία και η διεύθυνση URL μας θα είναι εκεί.
Κάντε κλικ σε αυτό και η εφαρμογή σας θα ανοίξει σε μια νέα καρτέλα. Ορίστε, είναι δικό μου!
= Συμπέρασμα =
Έχουμε αναπτύξει με επιτυχία την εφαρμογή React στο Amazon S3! Αυτή είναι μια εξαιρετική επιλογή για γρήγορη ανάπτυξη και δοκιμή των πρωτοτύπων React και να τα μοιραστείτε με άλλους. Είναι επίσης πολύ εύκολο και γρήγορο στην ανάπτυξη.
Ελπίζω ότι αυτό το σεμινάριο ήταν χρήσιμο για εσάς!
Καλή κωδικοποίηση! ðÃÃû
*Περισσότερο περιεχόμενο στο * *plainenglish.io*
