8 δωρεάν υπηρεσίες φιλοξενίας εφαρμογών React1 min read

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

Κατασκευάσαμε την εφαρμογή μας στο Figma χρησιμοποιώντας το Anima πρόσθετο, το οποίο μας επέτρεψε να προσθέσουμε λειτουργικότητα, συμπεριφορά απόκρισης και εμπλουτισμένα μέσα εξάγετε κώδικα React έτοιμο για προγραμματισμό για ολόκληρη τη διεπαφή χρήστη. Μας πήρε μια μέρα για να σχεδιάσουμε και να αναπτύξουμε.

Πού να φιλοξενήσετε την εφαρμογή React δωρεάν

Υπάρχει ένας αυξανόμενος αριθμός λύσεων φιλοξενίας χωρίς διακομιστή, χάρη στην άνοδο των πλαισίων που βασίζονται σε στοιχεία όπως το React. Το Amazon AWS, το Microsoft Azure και το Google Cloud είναι επί του παρόντος οι κυρίαρχες πλατφόρμες. Ωστόσο, υπάρχει μια αυξανόμενη στροφή προς τις αποκλειστικές υπηρεσίες φιλοξενίας frontend που απαιτούν λιγότερη προσπάθεια και μπορούν να σας φέρουν σε λειτουργία σε χρόνο μηδέν—και οι περισσότερες περιλαμβάνουν CI/CD. Ακολουθούν οι 8 δωρεάν υπηρεσίες φιλοξενίας εφαρμογών React που δοκιμάσαμε:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. Σελίδες GitHub

6. Σελίδες GitLab

7. Καθιστώ

8. Μέγα κύμα

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

Netlify

Φόντο

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

Τρόπος χρήσης

1. Στην ιδανική περίπτωση, θα εγγραφείτε ή θα συνδεθείτε με το GitHub. Αυτό διασφαλίζει ότι μπορείτε να έχετε πρόσβαση στα αποθετήρια του προφίλ σας και να τα αναπτύξετε γρήγορα.
2. Μόλις συνδεθείτε, κάντε κλικ στην «Προσθήκη νέου ιστότοπου» και επιλέξτε «Εισαγωγή υπάρχοντος έργου».
3. Στη συνέχεια, κάντε κλικ στο GitHub ως πάροχο.
4. Επιλέξτε τον “ιστότοπο τράπεζας” ή οποιοδήποτε άλλο όνομα είναι το έργο σας.
5. Βελτιστοποιήστε τις ρυθμίσεις ανάπτυξης (στην περίπτωση του ιστότοπού μας, οι προεπιλογές λειτουργούν τέλεια) και, στη συνέχεια, κάντε κλικ στην επιλογή “Ανάπτυξη ιστότοπου”.
6. Μόλις αναπτυχθεί, μπορείτε να το προβάλετε σε ένα δημόσιο URL το οποίο μπορείτε να μοιραστείτε με τον κόσμο. Ναι!

Εδώ είναι τη ζωντανή εφαρμογή που έχει αναπτυχθεί στο Netlify.

Τα υπέρ και τα κατά

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

Vercel

Φόντο

Το Vercel (αρχικά γνωστό ως Zeit) ιδρύθηκε το 2015 και έγινε γρήγορα φήμη. Είναι οι συντηρητές του Next.js, ενός δημοφιλούς πλαισίου React για τη δημιουργία ιστοσελίδων. Προσφέρουν ένα δωρεάν επίπεδο σε μη εμπορικούς ιστότοπους, καθώς και τρόπους χρήσης του δικτύου Edge για λειτουργίες χωρίς διακομιστή.

Τρόπος χρήσης

1. Συνδεθείτε ή εγγραφείτε με το GitHub.
2. Κάντε κλικ στο αναπτυσσόμενο μενού “Προσθήκη νέου…” και επιλέξτε “Έργο”.                                                             
3. Επιλέξτε την “τράπεζα-ιστοσελίδα” ή το αγαπημένο σας έργο React.
4. Ακολουθήσαμε τις προεπιλογές για τις ρυθμίσεις ανάπτυξης και, στη συνέχεια, κάναμε κλικ στο “Ανάπτυξη”.
5. Μετά από κάποιο χρονικό διάστημα, αναπτύξαμε τον ιστότοπο.

Εδώ είναι το ζωντανό URL.

Τα υπέρ και τα κατά

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

AWS Amplify

Φόντο

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

Τρόπος χρήσης

1. Εγγραφείτε ή συνδεθείτε στο AWS, στη συνέχεια αναζητήστε το AWS Amplify και κάντε κλικ στο “Έναρξη”.
2. Επιλέξτε GitHub και εξουσιοδοτήστε το (το επέτρεψα μόνο για το repo “τράπεζα-ιστοσελίδα”).
3. Επιλέξτε το repo στην ενότητα “Πρόσφατα ενημερωμένα αποθετήρια”.
   1. Στη ρύθμιση κατασκευής, θα πρέπει να αλλάξουμε το baseDirectory για να είναι η εφαρμογή μας απόσταση όπως έτσι: Στη συνέχεια, οι ρυθμίσεις κατασκευής θα πρέπει να μοιάζουν με αυτό:
4. Στο επόμενο βήμα, κάντε κλικ στην επιλογή “Αποθήκευση και ανάπτυξη”.
5. Μετά από κάποιο χρονικό διάστημα, ο ιστότοπος θα αναπτυχθεί και θα είναι έτοιμος για χρήση.

Και ζούμε! Εδώ είναι το URL.

Τα υπέρ και τα κατά

Πρέπει να επεξεργαστείτε το baseDirectory στις προδιαγραφές ανάπτυξης—δεν αναγνωρίζεται από το κουτί. Το UI φαίνεται λίγο άβολο, αλλά αυτό είναι μια προσωπική προτίμηση. Υπάρχει τεράστιες δυνατότητες για το AWS Amplify επειδή πολλές άλλες υπηρεσίες ιστού AWS βρίσκονται σε κοντινή απόσταση.

Firebase

Φόντο

Το Firebase είναι μια υπηρεσία της Google που είναι περισσότερο γνωστή ως πλατφόρμα αποθήκευσης σε πραγματικό χρόνο. Αλλά έχει επίσης μια επιλογή φιλοξενίας για στατικούς ιστότοπους και microservices Express.js ή API και υποστηρίζει προεπισκόπηση URL για υποκαταστήματα στα οποία εργάζεται η ομάδα σας. Όπως και με το Netlify, το Vercel και άλλα, εξυπηρετεί το αναπτυγμένο περιεχόμενο μέσω ενός δικτύου CDN.

Τρόπος χρήσης

1. Εγκαθιστώ firebase-εργαλεία με npm install -g firebase-tools.
2. Συνδεθείτε στο Firebase με σύνδεση στο firebase. Μόλις συνδεθείτε, θα δείτε ένα μήνυμα όπως αυτό:
3. Μεταβείτε στον κατάλογο του έργου και εκτελέστε firebase init, θα πρέπει να δείτε κάτι σαν αυτό: Επιλέξτε τη διαμόρφωση αρχείων για τη φιλοξενία Firebase με προαιρετικές αναπτύξεις δράσης GitHub. Στη συνέχεια, μπορείτε να δημιουργήσετε ένα έργο απευθείας από το CLI ή να χρησιμοποιήσετε το Firebase UI για να το κάνετε και αργότερα να το συνδέσετε. Δημιουργήσαμε το έργο από τη γραμμή εντολών και έτσι απαντήσαμε στις ερωτήσεις που προέκυψαν:                                                                    Μετά από αυτό, θα δημιουργηθούν τα απλά αρχεία `ebase και `firebase.
4. Μετά, τρέξε ανάπτυξη firebase για να αναπτύξετε πραγματικά τα αρχεία από το απόστασητηλεφωνικός κατάλογος. Εάν ο κατάλογος λείπει, φροντίστε να εκτελεστεί npm εκτέλεση κατασκευής πρώτα για τη δημιουργία αρχείων. Ο ανάπτυξη firebase Η εντολή θα πρέπει να παράγει έξοδο παρόμοια με το παρακάτω παράδειγμα:

Τώρα μπορείτε δείτε την ιστοσελίδα στο URL που παρέχεται. Ναι! 

Τα υπέρ και τα κατά

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

Σελίδες GitHub

Φόντο

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

Τρόπος χρήσης

Σημειώστε ότι πρέπει να επεξεργαστείτε το App.jsx όπου καλούμε Δρομολογητής και προσθέστε όνομα βάσης για να ταιριάζει με το όνομα του repo. Έτσι λοιπόν App.jsx πρέπει να φαίνεται:                                                                                        Πρέπει να αλλάξουμε το όνομα βάσης επειδή οι σελίδες GitHub θα αναπτύξουν τον ιστότοπο σε ένα URL αυτής της μορφής `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Ο ιστότοπος δεν θα λειτουργεί σωστά χωρίς το όνομα βάσης που έχει οριστεί για το react-router-dom.

1. Αφού αλλάξει ο κώδικας, πρέπει να το εγκαταστήσουμε gh-σελίδες πακέτο με:
2. Και, προσθέστε ένα εκ των προτέρων και α αναπτύσσω σενάριο προς πακέτο.json:
3. Μετά, απλά τρέχουμε npm εκτέλεση ανάπτυξης. Θα πυροδοτήσει npm εκτέλεση κατασκευής και θα χρησιμοποιήσει gh-σελίδες να δημοσιεύσει το περιεχόμενο του απόσταση σε έναν ξεχωριστό κλάδο στο GitHub που ονομάζεται gh-σελίδες.
4. Τέλος, ελέγξτε αν το gh-σελίδες χρησιμοποιείται για σελίδες GitHub όπως παρακάτω:

Εδώ είναι το ζωντανό URL.

Τα υπέρ και τα κατά

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

Δεν υποστηρίζει συνεχή ανάπτυξη out-of-the-box στην περίπτωση χρήσης μας, αλλά μπορείτε να το ρυθμίσετε. Μόλις ρυθμιστεί, είναι γρήγορη η ανάπτυξη των αλλαγών.

Σελίδες GitLab

Φόντο

Όπως το GitHub, το GitLab έχει τη δική του λύση φιλοξενίας και την αποκαλούν GitLab Pages. Πρέπει να τους το δώσω, είναι πιο εύκολο να ρυθμίσετε μια συνεχή ανάπτυξη στις Σελίδες GitLab παρά για τις Σελίδες GitHub.

Τρόπος χρήσης

1. Εγγραφείτε ή συνδεθείτε στο GitLab
2. Προσθέστε ένα repo στο GitLab εάν δεν το έχετε ήδη εκεί. Μπορείτε πιρούνι αυτό που πρόσθεσα εκεί 
   Παρόμοια με τις σελίδες GitHub, πρέπει να επεξεργαστείτε τις App.jsx όπου καλούμε Δρομολογητής και προσθέστε  όνομα βάσης για να ταιριάζει με το όνομα του repo. Αυτή είναι λοιπόν η τελική αλλαγή:                                                               Πρέπει να αλλάξουμε το όνομα βάσης επειδή οι σελίδες του GitLab θα αναπτύξουν τον ιστότοπο σε ένα URL αυτής της μορφής: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Ο ιστότοπος δεν θα λειτουργεί σωστά χωρίς το όνομα βάσης που έχει οριστεί για το react-router-dom.
3. Αφού επεξεργαστείτε και προωθήσετε το έργο στο GitLab, μεταβείτε στις Ρυθμίσεις > Σελίδες και θα σας υποδεχθεί ένας οδηγός τεσσάρων βημάτων για την ανάπτυξη του αποθετηρίου στις Σελίδες του GitLab. 
4. Το πρώτο βήμα στον οδηγό είναι να εισαγάγετε την εικόνα κατασκευής. Θα χρησιμοποιήσουμε το Node.js LTS.
5. Στη συνέχεια, θα εισαγάγουμε την εντολή pre-build. Ο npm ci θα αρκεί εδώ.
6. Τώρα για το βήμα κατασκευής. Πρέπει να περάσουμε — — dist-dir public επειδή οι Σελίδες GitLab αναμένουν να έχουν ενσωματωμένο τον ιστότοπο κοινό τηλεφωνικός κατάλογος. Δεν μπορείτε να ξεφύγετε από κανέναν άλλο κατάλογο, συγγνώμη.
7. Δεσμεύστε το νέο που δημιουργήθηκε .gitlab-ci.yml αρχείο που λέει στο GitLab πώς να αναπτύξει τον ιστότοπό σας.
8. Τώρα, μεταβείτε στο τμήμα CI/CD -> Pipelines του αποθετηρίου και παρατηρήστε την απόδοση του αγωγού που προστέθηκε πρόσφατα.
9. Μετά από κάποιο χρονικό διάστημα, η εργασία διοχέτευσης θα ολοκληρωθεί και ο ιστότοπος θα αναπτυχθεί στις Σελίδες GitLab.

Εδώ είναι το αποτέλεσμα.

Τα υπέρ και τα κατά

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

Καθιστώ

Φόντο

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

Τρόπος χρήσης

1. Εγγραφείτε ή συνδεθείτε στο Render.
2. Δημιουργήστε έναν νέο στατικό ιστότοπο πατώντας το κουμπί “Νέος” και επιλέγοντας “Στατική τοποθεσία”.
3. Επιλέξτε το repo που θέλετε να αναπτύξετε.
4. Κρατήστε το νήμα; κατασκευή νήματος εντολή build στη ρύθμιση build. Δυστυχώς, δεν λειτουργεί με npm ci; npm εκτέλεση κατασκευής όπως και άλλες υπηρεσίες. Αλλάξτε το “Δημοσίευση καταλόγου” σε απόσταση και κάντε κλικ στο «Δημιουργία στατικής τοποθεσίας».
5. Μετά από κάποιο χρονικό διάστημα, το Render θα αναπτύξει τον κώδικα.

Εδώ είναι το ζωντανό URL από το Render.

Τα υπέρ και τα κατά

Είναι πραγματικά γρήγορο, αλλά δεν λειτουργεί καλά για το έργο μας με τις εντολές «npm ci» και «npm run build». Μόνο το «νήμα» φαίνεται να λειτουργεί.

Μέγα κύμα

Φόντο

Το Surge υπάρχει εδώ και αρκετό καιρό. Δεξιά από το ρόπαλο, η υπηρεσία τους είναι απλή στη χρήση και χρειάζονται μόνο μία ή δύο εντολές για την ανάπτυξη του στατικού ιστοτόπου σας. Είναι δωρεάν, αλλά προσφέρει ένα πρόγραμμα επί πληρωμή 30$/μήνα. Η στωικότητα του εργαλείου είναι που το κάνει να λάμπει. Δεν απαιτείται πολύπλοκη ρύθμιση, απλώς εγκαταστήστε το “surge” και εκτελέστε το με το “surge”.

Τρόπος χρήσης

1. Για προετοιμασία, τρέξτε npm εκτέλεση κατασκευής για να δημιουργήσετε στατικά αρχεία μέσα απόσταση τηλεφωνικός κατάλογος. Ο μέγα κύμα θα τα χρησιμοποιήσει για ανάπτυξη.
2. Τρέξιμο npm εγκατάσταση — παγκόσμιο κύμα
3. Μετά, τρέξε μέγα κύμα.

Μερικά πράγματα που πρέπει να σημειώσετε:
Εάν είναι η πρώτη φορά που το εκτελείτε, θα πρέπει να δημιουργήσετε έναν λογαριασμό με το Surge. Μην ανησυχείς, είναι εύκολο. Απλώς εισάγετε το email σας και τον επιθυμητό κωδικό πρόσβασης.

Στη συνέχεια, θα σας ζητηθεί να εισαγάγετε το “project”, το οποίο θα πρέπει να είναι η διαδρομή προς το απόσταση τηλεφωνικός κατάλογος. Μπορείτε απλώς να προσθέσετε απόσταση στο μονοπάτι που σας δίνεται, αν περάσατε απότομα μέσα στο repo που αναπτύσσετε.

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

Μετά την είσοδο URL, το μέγα κύμα θα αναπτύξει περιεχόμενο από απόσταση πάνω στο καθορισμένο URL. Να τι πήρα:

Τα υπέρ και τα κατά

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

Ώρα για ανάπτυξη για κάθε υπηρεσία φιλοξενίας

Οι κορυφαίες 3 δωρεάν υπηρεσίες φιλοξενίας React

1. Netlify
2. Vercel
3. Μέγα κύμα

Βασικά φαγητά

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

Αυτοματοποιήστε την κατασκευή του frontend σας και στείλτε την εφαρμογή σας 10 φορές πιο γρήγορα. Μάθετε περισσότερα.