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

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

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

Αριστερά (Σύνδεση σελίδας) Κέντρο (Εξουσιοδότηση) Δεξιά (Netlify Online App)

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

npm run build

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

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

Σύρετε και ρίξτε

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

Σημείωση: Η εφαρμογή Netlify online είναι η οθόνη που εμφανίζεται αφού συνδεθείτε στον λογαριασμό σας.
Drag & Drop δημιουργήστε το φάκελο στο Netlify Online Application to Deploy

Netlify CLI

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

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

npm εγκαταστήσετε netlify-cli -g

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

netlify ανάπτυξη

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

Pop-Up παράθυρο που σας ζητά να συνδεθείτε με Netlify και να παραχωρήσετε πρόσβαση στο Netlify CLI

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

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

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

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

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

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

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

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

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

netlify ανάπτυξη --prod

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

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

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

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

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

404 Σφάλμα κατά την ανανέωση της εφαρμογής μετά την πλοήγηση σε διαφορετική διαδρομή

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

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

/ * /index.html 200

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

Το αρχείο _redirects μέσα στο φάκελο δημιουργίας που περιέχει τον κανόνα ανακατεύθυνσης

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

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

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

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