Πώς να αναπτύξετε μια εφαρμογή React στο Netlify

Θα σας διδάξω πώς να αναπτύξετε και να φιλοξενήσετε την εφαρμογή React με το Netlify.

Το Netlify είναι μια υπηρεσία που αυτοματοποιεί τη δημιουργία, την ανάπτυξη και τη διαχείριση των ιστότοπών σας. Είναι μια από τις πιο γρήγορες και ευκολότερες λύσεις ανάπτυξης αυτές τις μέρες.

Το Netlify προσφέρει ένα δωρεάν πρόγραμμα. Πρώτα λοιπόν, θα συνδεθούμε στο Netlify χρησιμοποιώντας οποιαδήποτε από τις επιλογές (Github, Gitlab, Bitbucket, Email) που δίνονται στη σελίδα σύνδεσης.

Θα ξεκινήσουμε δημιουργώντας ένα build της εφαρμογής μας εκτελώντας αυτήν την εντολή:

npm run build

Έτσι, τώρα θα δημιουργηθεί ο φάκελος build που θα περιέχει όλα τα έτοιμα για παραγωγή αρχεία.

Τώρα, υπάρχουν δύο τρόποι για την ανάπτυξη της εφαρμογής μας στο Netlify.

Μεταφορά και απόθεση

Η Netifly το έχει καταστήσει τόσο εύκολο που πρέπει απλώς να μεταφέρουμε και να ρίξουμε το φάκελο build στην ηλεκτρονική του εφαρμογή (δεξιά εικόνα πάνω) και η εφαρμογή μας θα αναπτυχθεί σε μια ζωντανή διεύθυνση URL.

Σημείωση: Η διαδικτυακή εφαρμογή Netlify είναι η οθόνη που εμφανίζεται αφού συνδεθείτε στον λογαριασμό σας netlify.

Netlify CLI

Το Netifly παρέχει επίσης μια διεπαφή γραμμής εντολών που σας επιτρέπει να αναπτύξετε την εφαρμογή σας απευθείας από τη γραμμή εντολών. Αυτό θα κάνουμε τώρα.

Πρώτα λοιπόν, θα εγκαταστήσουμε το CLI χρησιμοποιώντας την ακόλουθη εντολή:

npm install netlify-cli -g

Τώρα, είμαστε έτοιμοι να το αναπτύξουμε. Για να αναπτύξουμε την εφαρμογή πρέπει να βεβαιωθούμε ότι είμαστε στον φάκελο του έργου και στη συνέχεια θα εκτελέσουμε αυτήν την εντολή:

netlify deploy

Ενδέχεται να λάβουμε ένα αναδυόμενο παράθυρο που θα μας ζητά να συνδεθούμε με το Netlify και να παραχωρήσουμε πρόσβαση στο Netlify CLI .

Τώρα, θα κάνουμε κλικ στην επιλογή Εξουσιοδότηση. Τώρα που έχουμε εξουσιοδότηση, μπορούμε να ακολουθήσουμε τις οδηγίες γραμμής εντολών για την ανάπτυξη της εφαρμογής.

Γραμμές εντολών

  1. Στην κονσόλα, αναφέρει ότι " Αυτός ο φάκελος δεν έχει συνδεθεί ακόμα σε ιστότοπο. Τι θα ήθελες να κάνεις?" Θέλει να μάθει εάν θέλουμε να συνδέσουμε αυτόν τον κατάλογο με έναν υπάρχοντα ιστότοπο ή να δημιουργήσουμε και να διαμορφώσουμε έναν νέο ιστότοπο. Δεδομένου ότι πρόκειται για έναν νέο ιστότοπο, θα επιλέξουμε Δημιουργία και διαμόρφωση ενός νέου ιστότοπου.

2. Μας δίνει την επιλογή να δώσουμε ένα όνομα στον ιστότοπό μας. Θα πληκτρολογήσω χαρτοφυλάκιο στο netlify (Μπορείτε να πληκτρολογήσετε οποιοδήποτε διαθέσιμο όνομα που σας αρέσει).

3. Τώρα θα ζητήσει τον λογαριασμό Netlify που θέλετε να χρησιμοποιήσετε, οπότε θα επιλέξω τον λογαριασμό μου (Abhishek Jakhar) , μπορείτε να επιλέξετε τον δικό σας.

4. Τώρα, ως διαδρομή ανάπτυξης, πρέπει να καθορίσουμε τον κατάλογο build του έργου μας που περιέχει τα στοιχεία για ανάπτυξη. Έτσι, θα πληκτρολογήσουμε το build εκεί και πατήστε enter.

5. Τώρα, ο ιστότοπός μας θα δημιουργηθεί και θα αναπτυχθεί πρώτα σε ένα πρόχειρο URL, το οποίο μπορούμε να δούμε αντιγράφοντας και επικολλώντας τη διεύθυνση URL στο πρόγραμμα περιήγησης.

Τώρα, πίσω στην κονσόλα, λέει "Εάν όλα φαίνονται καλά στο πρόχειρο URL σας, πάρτε το για να ζήσετε με τη σημαία --prod" .

Για να κάνουμε ζωντανή την εφαρμογή μας, θα εκτελέσουμε την εντολή που εμφανίζεται στη γραμμή εντολών

netlify deploy --prod

Θα μας ζητήσει μια ακόμη φορά να καθορίσουμε τη διαδρομή ανάπτυξης για το ζωντανό build που είναι και πάλι ο φάκελος build.

Τώρα, στην έξοδο της κονσόλας, λαμβάνουμε δύο διευθύνσεις URL. Μια μοναδική διεύθυνση URL ανάπτυξης, η οποία αντιπροσωπεύει τη μοναδική διεύθυνση URL για κάθε μεμονωμένη ανάπτυξη και μια ζωντανή διεύθυνση URL που εμφανίζει πάντα την τελευταία σας ανάπτυξη.

Έτσι κάθε φορά που ενημερώνετε τον ιστότοπό σας και τον αναπτύσσετε, θα λαμβάνετε μια μοναδική διεύθυνση URL για αυτήν την ανάπτυξη. Βασικά, εάν αναπτύξουμε πολλές φορές θα έχουμε πολλές μοναδικές διευθύνσεις URL, ώστε να μπορείτε να κατευθύνετε τους χρήστες σε μια συγκεκριμένη έκδοση της εφαρμογής σας. Ωστόσο, η ζωντανή διεύθυνση URL εμφανίζει πάντα τις πιο πρόσφατες αλλαγές σας στην ίδια διεύθυνση URL.

Σημείωση: Netlify ασφαλίζει αυτόματα το site σας πάνω HTTPS για δωρεάν .

Η σελίδα δεν βρέθηκε σφάλμα

Εάν δημοσιεύετε μια εφαρμογή που χρησιμοποιεί έναν δρομολογητή, όπως το React Router, θα πρέπει να διαμορφώσετε ανακατευθύνσεις και να ξαναγράψετε κανόνες για τα URL σας. Επειδή όταν κάνουμε κλικ σε οποιοδήποτε στοιχείο πλοήγησης για να αλλάξουμε τη σελίδα (διαδρομή) και να ανανεώσουμε το πρόγραμμα περιήγησης, λαμβάνουμε μια σελίδα σφάλματος 404.

Έτσι, το Netlify καθιστά πολύ εύκολη τη διαμόρφωση ανακατευθύνσεων και την επανεγγραφή κανόνων για τις διευθύνσεις URL. Θα χρειαστεί να προσθέσουμε ένα αρχείο μέσα στο φάκελο build της εφαρμογής μας με το όνομα _redirects. Μέσα στο αρχείο, πρέπει να συμπεριλάβουμε τον ακόλουθο κανόνα επανεγγραφής.

/* /index.html 200

Αυτός ο κανόνας επανεγγραφής θα εξυπηρετεί το αρχείο index.html αντί να δίνει 404, ανεξάρτητα από το URL που ζητά το πρόγραμμα περιήγησης.

Τώρα λοιπόν, για να δούμε τις πιο πρόσφατες αλλαγές στο ζωντανό URL, πρέπει να το αναπτύξουμε με netlify deploy. Και πάλι, θα καθορίσουμε το build ως διαδρομή ανάπτυξης. Τώρα, όταν βλέπουμε τη ζωντανή διεύθυνση URL και ανανεώνουμε την εφαρμογή μετά την αλλαγή της διαδρομής, δεν θα βλέπουμε πλέον τη σελίδα σφάλματος 404.

Αυτό είναι το μόνο που υπάρχει. Στο netlify.com μπορείτε να δείτε τις ρυθμίσεις του ιστότοπού σας. Εκεί μπορείτε να κάνετε πράγματα όπως να δημιουργήσετε έναν προσαρμοσμένο τομέα ή να συνδέσετε τον ιστότοπο σε ένα αποθετήριο GitHub.

Netlify: Πλατφόρμα all-in-one για αυτοματοποίηση σύγχρονων έργων Ιστού

Ανάπτυξη σύγχρονων στατικών ιστότοπων με το Netlify. Αποκτήστε CDN, Συνεχή ανάπτυξη, HTTPS 1 κλικ και όλες τις υπηρεσίες που έχετε… www.netlify.com

Ελπίζω να βρήκατε αυτήν την ανάρτηση ενημερωτική και χρήσιμη. Θα ήθελα πολύ να ακούσω τα σχόλιά σας!

Ευχαριστούμε που το διαβάσατε!