Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Το React είναι μια δημοφιλής βιβλιοθήκη JavaScript για τη δημιουργία λειτουργικών διεπαφών χρήστη σε δυναμικές εφαρμογές Ιστού. Ίσως έχετε αφιερώσει πολλές ώρες, διορθώνοντας τον κώδικα React σε μια προσπάθεια να δημιουργήσετε το επόμενο Instagram ή Airbnb.

Ανεξάρτητα από το τι χτίζετε, ο τελικός στόχος είναι πάντα να προβάλλετε τη δουλειά σας στον κόσμο. Αυτό είναι όπου οι πλατφόρμες φιλοξενίας όπως το Netlify είναι χρήσιμες. Παρέχουν μια σειρά εργαλείων που εξορθολογίζουν τη διαδικασία ανάπτυξης.

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

Τι είναι το Netlify;

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

instagram viewer

Τα κύρια χαρακτηριστικά του Netlify

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

  • Παρέχει βασικές δυνατότητες πρόσβασης και ελέγχου έκδοσης για να επιτρέψει στις ομάδες ανάπτυξης να συνεργάζονται αποτελεσματικά και αποτελεσματικά σε έργα.
  • Προσφέρει ασφαλείς υπηρεσίες φιλοξενίας που μπορείτε να προσαρμόσετε στις ανάγκες σας. Επιπλέον, παρέχει αυτοματοποιημένα αντίγραφα ασφαλείας σε περίπτωση απώλειας δεδομένων.
  • Ενσωματώνεται απρόσκοπτα με δημοφιλείς υπηρεσίες ανάπτυξης cloud όπως το GitHub, το GitLab και το Bitbucket.
  • Παρέχει λειτουργίες που διευκολύνουν τη ρύθμιση και τη διαμόρφωση μιας προσαρμοσμένης διεύθυνσης URL τομέα και ενός πιστοποιητικού SSL για την εφαρμογή σας.

Δημιουργήστε μια εφαρμογή Demo React

  1. Για να ξεκινήσετε, θα χρειαστεί πρώτα δημιουργήστε μια επίδειξη εφαρμογής React που τελικά θα αναπτύξετε στο Netlify. Εκτελέστε την παρακάτω εντολή στο τερματικό σας για να δημιουργήσετε μια εφαρμογή React: 
    npx create-react-app demo-react-netlify-app
  2. Στη συνέχεια, εκτελέστε αυτήν την εντολή τερματικού για να περιστρέψετε τον διακομιστή ανάπτυξης: 
    npm έναρξη
    Προχωρήστε και δείτε τα αποτελέσματα στο πρόγραμμα περιήγησής σας στο http://localhost: 3000.
  3. Τέλος, εκτελέστε αυτήν την εντολή για να δημιουργήσετε μια έκδοση έτοιμη για παραγωγή της εφαρμογής σας: 
    npm εκτέλεση κατασκευής
    Αυτή η εντολή δημιουργεί τα απαιτούμενα αρχεία παραγωγής και τα στοιχεία μέσα σε έναν νέο φάκελο στον ριζικό κατάλογο που ονομάζεται, build. Ο φάκελος build καταγράφει μια ελαχιστοποιημένη έκδοση ολόκληρης της εφαρμογής, που περιέχει όλα όσα απαιτούνται για την ανάπτυξη της εφαρμογής.

Αναπτύξτε την εφαρμογή React στο Netlify

Το Netlify παρέχει τρεις μεθόδους που μπορείτε να χρησιμοποιήσετε για να αναπτύξετε την εφαρμογή React. Μπορείς:

  • Εισαγάγετε το έργο σας από έναν κεντρικό υπολογιστή αποθετηρίου Git όπως το GitHub.
  • Χρησιμοποιήστε τη δυνατότητα μεταφοράς και απόθεσης.
  • Χρησιμοποιήστε το εργαλείο γραμμής εντολών, το CLI του Netlify.

Ανάπτυξη με χρήση της δυνατότητας εισαγωγής GitHub

  1. Ξεκινήστε από δημιουργώντας ένα αποθετήριο στο GitHub για να φιλοξενήσετε τα αρχεία του έργου της εφαρμογής React. Εναλλακτικά, μπορείτε επίσης να φιλοξενήσετε τα αρχεία του έργου σας σε οποιονδήποτε άλλο υποστηριζόμενο πάροχο Git όπως το GitLab, το Bitbucket ή το Azure DevOps.
  2. Στη συνέχεια, εγγραφείτε για έναν λογαριασμό στο Netlify. Μόλις εγγραφείτε, μεταβείτε στον πίνακα ελέγχου του λογαριασμού σας και επιλέξτε το Τοποθεσίες αυτί.
  3. Κάνε κλικ στο Εισαγωγή από το Git κουμπί.
  4. Επιλέξτε την προτιμώμενη πλατφόρμα παρόχου Git. Το Netlify θα σας ζητήσει να πραγματοποιήσετε έλεγχο ταυτότητας με τον πάροχο Git για να του παραχωρήσετε πρόσβαση στον λογαριασμό και στα αποθετήρια σας.
  5. Μόλις το κάνετε αυτό, το Netlify θα εμφανίσει μια λίστα αποθετηρίων στον πάροχο Git σας. Επιλέξτε το αποθετήριο έργου React που προωθήσατε αρχικά στον πάροχο Git.
  6. Αφού επιλέξετε το αποθετήριο, πρέπει να καθορίσετε τον τρόπο με τον οποίο το Netlify θα πρέπει να χειρίζεται τη διαδικασία ανάπτυξης. Συνήθως, για στατικούς ιστότοπους, δεν χρειάζεται να κάνετε αλλαγές, ωστόσο, για δυναμικούς ιστότοπους όπως οι εφαρμογές React, θα πρέπει να ορίσετε τις ρυθμίσεις κατασκευής. Ευτυχώς, το Netlify από προεπιλογή εντοπίζει αυτόματα το πλαίσιο που χρησιμοποιείται για τη δημιουργία της εφαρμογής και συμπληρώνει τα πεδία με τις απαιτούμενες ρυθμίσεις κατασκευής.
  7. Τέλος, κάντε κλικ Ανάπτυξη ιστότοπου για να τελειώσει η διαδικασία.

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

Ανάπτυξη με χρήση της δυνατότητας μεταφοράς και απόθεσης

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

  1. Στον πίνακα ελέγχου του Netlify, επιλέξτε το Ιστοσελίδα αυτί. Στη συνέχεια, κάντε κλικ στο Προσθήκη νέου ιστότοπου και μετά επιλέξτε Αναπτύξτε χειροκίνητα από τις επιλογές του αναπτυσσόμενου μενού.
  2. Στη σελίδα δυνατοτήτων μεταφοράς και απόθεσης, επιλέξτε το φάκελο που περιέχει τα αρχεία έκδοσης του React και αποθέστε τον σε αυτήν τη διεπαφή χρήστη. Το έργο θα αναπτυχθεί άμεσα στο Netlify. Εναλλακτικά, μπορείτε να κάνετε κλικ στο Περιηγηθείτε για μεταφόρτωση για να επιλέξετε το φάκελο κατασκευής σας από το σύστημα αρχείων.

Αναπτύξτε χρησιμοποιώντας τη διεπαφή γραμμής εντολών του Netlify

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

  1. Εκτελέστε την παρακάτω εντολή στο τερματικό σας για να εγκαταστήσετε το CLI του Netlify: 
    npm εγκαθιστώ netlify-cli -g
  2. Τώρα, εκτελέστε την παρακάτω εντολή για να αναπτύξετε την εφαρμογή σας. Βεβαιωθείτε ότι βρίσκεστε στον κατάλογο εργασίας του έργου πριν από την ανάπτυξη. 
    netlify ανάπτυξη
    Το CLI του Netlify θα σας ζητήσει να του επιτρέψετε να κάνει αλλαγές στον λογαριασμό σας. Αφού χορηγήσετε την άδεια, δώστε το όνομα του λογαριασμού της ομάδας που δώσατε κατά την εγγραφή σας, στη συνέχεια επιλέξτε εάν θα συνδέσετε τον κατάλογο της εφαρμογής με έναν υπάρχοντα ιστότοπο ή εάν θα δημιουργήσετε και θα διαμορφώσετε έναν νέο ένας. Ολοκληρώστε παρέχοντας ένα προσαρμοσμένο όνομα ιστότοπου και το όνομα του φακέλου κατασκευής σας.
  3. Το CLI θα αναπτύξει μια πρόχειρη έκδοση της αίτησής σας. Ελέγξτε ότι όλα λειτουργούν όπως αναμένεται.
  4. Τέλος, εκτελέστε την παρακάτω εντολή για να αναπτύξετε την εφαρμογή σας στην παραγωγή. 
    netlify ανάπτυξη --κέντρο

Σύγκριση των Τριών Μεθόδων Ανάπτυξης

Η μέθοδος εισαγωγής GitHub είναι η πιο αποτελεσματική για την ανάπτυξη εφαρμογών παραγωγής, καθώς σας δίνει τη δυνατότητα να συνδέσετε το αποθετήριο Git σας απευθείας στο Netlify και διατηρήστε τον κώδικά σας συγχρονισμένο με τον ζωντανό ιστότοπο ή την εφαρμογή τους. Όταν πραγματοποιείτε και προωθείτε αλλαγές στο αποθετήριο Git, το Netlify θα ενημερώνει αυτόματα τον ιστότοπο.

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

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

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

Χρήση του Netlify για την ανάπτυξη άλλων εφαρμογών

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

Η φιλική προς το χρήστη διεπαφή διευκολύνει τη διαμόρφωση, τη διαχείριση και την ανάπτυξη των API σας.