Δημιουργία τοπικού διακομιστή προσβάσιμου από δημόσια διεύθυνση

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

Σε αυτό το άρθρο, θα σας δείξω έναν εύκολο τρόπο εκτελέστε έναν τοπικό διακομιστή που μπορείτε πρόσβαση από το τηλέφωνό σας και από άλλες κινητές συσκευές και, επίσης, μεταδίδεται μέσω του Διαδικτύου, πράγμα που σημαίνει ότι μοιράζεστε τη δουλειά σας με τους πελάτες σας, χωρίς να αφήνετε καλή ol 'localhost.

Χρησιμοποιώντας το Vagrant για να δημιουργήσετε ένα τοπικό περιβάλλον

Πριν από λίγο καιρό έγραψα ένα άρθρο εδώ στο Χονγκκιάτ για τη χρήση του Vagrant, έτσι θα πάω μόνο τα βασικά εδώ. Για περισσότερες πληροφορίες, ρίξτε μια ματιά στο άρθρο!

Για να ξεκινήσετε, θα πρέπει να αρπάξετε και να εγκαταστήσετε το VirtualBox και το Vagrant. Και οι δύο είναι δωρεάν και χρησιμοποιούνται για τη δημιουργία μιας εικονικής μηχανής που θα τρέξει τον διακομιστή σας.

Τώρα, δημιουργήστε ένα φάκελο για την αποθήκευση των ιστότοπων σας. Ας χρησιμοποιήσουμε έναν κατάλογο που ονομάζεται “Ιστοσελίδες” μέσα στον κύριο κατάλογο χρηστών μας. Αυτό θα ήταν / Χρήστες / [όνομα χρήστη] / ιστότοποι σε OS X και C: / Χρήστες / [όνομα χρήστη] / ιστότοποι στα Windows.

Δημιουργήστε ένα νέο φάκελο που ονομάζεται wordpress. Εδώ θα δημιουργήσω την εικονική μηχανή. Η ιδέα είναι ότι κάθε φάκελος μέσα Ιστοσελίδες στεγάζει μια ξεχωριστή εικονική μηχανή. Ενώ εσείς μπορώ τοποθετήστε όσες ιστοσελίδες σε μια εικονική μηχανή όπως θέλετε, τους αρέσει να τις ομαδοποιώ από πλατφόρμες - π.χ.: WordPress, Laravel, Custom

Για τους σκοπούς αυτού του φροντιστηρίου θα δημιουργήσω μια ιστοσελίδα του WordPress.

μεσα στην WordPress θα πρέπει να δημιουργήσουμε δύο αρχεία, Συναγερμός και install.sh. Αυτά θα χρησιμοποιηθούν για τη ρύθμιση των εικονικών μηχανών μας. Ο Jeffrey Way έχει δημιουργήσει δύο μεγάλα αρχεία εκκίνησης. μπορείτε να πάρετε τα αρχεία Vagrantfile και install.sh.

Στη συνέχεια, χρησιμοποιώντας το τερματικό, περιηγηθείτε στο WordPress τον κατάλογο και τον τύπο ατενίζω. Αυτό θα διαρκέσει λίγο, αφού το κουτί πρέπει να γίνει λήψη και στη συνέχεια να εγκατασταθεί. Πιάσε ένα φλιτζάνι καφέ και δείτε αυτό το post σε 50 συμβουλές WordPress ενώ περιμένετε.

Μόλις ολοκληρωθεί η διαδικασία θα πρέπει να μπορείτε να πάτε 192.168.33.21 και δείτε μια σελίδα που προβάλλεται σωστά. Ο φάκελος περιεχομένου θα πρέπει να είναι ο φάκελος html μέσα στον κατάλογο WordPress. Τώρα μπορείτε να προσθέσετε αρχεία, να εγκαταστήσετε το WordPress ή οτιδήποτε άλλο επιθυμείτε.

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

Άνοιγμα τοπικών ιστότοπων στο ίδιο δίκτυο χρησιμοποιώντας το Gulp

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

Στην ιδανική περίπτωση, θα θέλετε να ανοίξετε τον τοπικό ιστότοπό σας στις κινητές συσκευές σας. Αυτό δεν είναι πολύ δύσκολο να γίνει, υπό την προϋπόθεση ότι οι συσκευές σας βρίσκονται στο ίδιο δίκτυο.

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

Εγκατάσταση Gulp

Η εγκατάσταση του Gulp είναι πολύ εύκολη. Προχωρήστε στη σελίδα Getting Started για τις οδηγίες. Μία προϋπόθεση είναι η NPM (Node Package Manager). Ο ευκολότερος τρόπος για να το κάνετε αυτό είναι να εγκαταστήσετε τον ίδιο τον κόμβο. Προχωρήστε προς τα κάτω στην ιστοσελίδα κόμβων για οδηγίες.

Μόλις χρησιμοποιήσετε το npm install --global gulp εντολή για να εγκαταστήσετε το gulp σε παγκόσμιο επίπεδο, πρέπει να το προσθέσετε στο έργο σας. Ο τρόπος για να γίνει αυτό είναι να τρέξει npm εγκαταστήστε --save-dev gulp στο ριζικό φάκελο του έργου σας, στη συνέχεια προσθέστε ένα gulpfile.js αρχείο εκεί.

Προς το παρόν, ας προσθέσουμε μια ενιαία γραμμή κώδικα μέσα σε αυτό το αρχείο που δείχνει ότι θα χρησιμοποιήσουμε το ίδιο το Gulp.

var gulp = απαιτούν ('gulp');

Αν ενδιαφέρεστε για όλα τα δροσερά πράγματα που μπορεί να κάνει ο Gulp όπως τη δημιουργία σεναρίων, τη σύνταξη του Sass και της ΜΙΚΡΗΣ, τη βελτιστοποίηση των εικόνων και ούτω καθεξής, διαβάστε τον οδηγό μας για το Gulp. Σε αυτό το άρθρο θα επικεντρωθούμε στη δημιουργία ενός διακομιστή.

Χρησιμοποιώντας το Browsersync

Το Browsersync έχει μια επέκταση Gulp που μπορούμε να εγκαταστήσουμε σε δύο βήματα. Πρώτον, ας χρησιμοποιήσουμε npm για να το κατεβάσετε, και στη συνέχεια το προσθέτουμε στο Gulpfile μας.

Εκδώστε το npm εγκατάσταση προγράμματος περιήγησης-συγχρονισμού gulp --save-dev εντολή στη ρίζα του έργου στο τερματικό. αυτό θα κάνει λήψη της επέκτασης. Στη συνέχεια, ανοίξτε το Gulpfile και προσθέστε την ακόλουθη γραμμή:

var browserSync = απαιτούν ('sync browser').

Αυτό επιτρέπει στον Gulp να γνωρίζει ότι θα χρησιμοποιήσουμε το Browsersync. Στη συνέχεια θα ορίσουμε μια εργασία που θα ελέγχει τον τρόπο λειτουργίας του Browsersync.

gulp.task ('browser-sync', λειτουργία () browserSync.init (proxy: "192.168.33.21"););

Μόλις προστεθεί, μπορείτε να πληκτρολογήσετε gulp browser-sync στο τερματικό για να ξεκινήσει ένας διακομιστής. Θα πρέπει να δείτε κάτι σαν την παρακάτω εικόνα.

Υπάρχουν τέσσερις ξεχωριστές διευθύνσεις URL εδώ, εδώ είναι αυτό που εννοούν:

• Τοπικός: Η τοπική διεύθυνση URL είναι εκεί όπου μπορείτε να προσεγγίσετε το διακομιστή στο μηχάνημα στο οποίο την εκτελείτε. Στις περιπτώσεις μας μπορείτε να χρησιμοποιήσετε 192.168.33.21 ή μπορείτε να χρησιμοποιήσετε αυτό που παρέχεται από την Borwsersync.
• Εξωτερικός: Αυτή είναι η διεύθυνση URL που μπορείτε να χρησιμοποιήσετε σε οποιαδήποτε συσκευή που είναι συνδεδεμένη στο δίκτυο για να φτάσετε στον ιστότοπο. Θα λειτουργήσει στο τοπικό σας μηχάνημα, στο τηλέφωνο, στο tablet σας και ούτω καθεξής.
• UI: Αυτή η διεύθυνση URL υποδεικνύει τις επιλογές για τον τρέχοντα διακομιστή. Μπορείτε να δείτε τις συνδέσεις, να ρυθμίσετε τον περιορισμό του δικτύου, να δείτε το ιστορικό ή τις επιλογές συγχρονισμού.
• Εξωτερικό περιβάλλον εργασίας χρήστη: Αυτό είναι το ίδιο με το περιβάλλον χρήστη, αλλά είναι προσβάσιμο από οποιαδήποτε συσκευή του δικτύου.

Γιατί να χρησιμοποιήσετε το Browsersync?

Τώρα που ολοκληρώσαμε αυτή τη φάση ίσως να σκέφτεστε: γιατί να χρησιμοποιήσετε το Browsersync καθόλου; Η διεύθυνση URL 192.168.33.21 μπορεί επίσης να προσεγγιστεί από οποιαδήποτε συσκευή. Ενώ αυτό συμβαίνει, θα πρέπει να εγκαταστήσετε το WordPress σε αυτήν τη διεύθυνση URL.

Συνήθως χρησιμοποιώ virtualhosts και έχουν τομείς όπως wordpress.local ή myproject.dev. Αυτά επιλύονται τοπικά, ώστε να μην μπορείτε να επισκεφθείτε το wordpress.local στο κινητό σας τηλέφωνο και να δείτε το ίδιο αποτέλεσμα με τον τοπικό σας υπολογιστή.

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

Χρησιμοποιώντας ngrok Για να μοιραστούμε το Localhost μας

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

Εγκατάσταση ngrok

Πηγαίνετε στη σελίδα λήψης ngrok και αρπάξτε την έκδοση που χρειάζεστε. Μπορείτε να το εκτελέσετε από το φάκελο που βρίσκεται ή να το μετακινήσετε σε μια τοποθεσία που σας επιτρέπει να το εκτελέσετε από οπουδήποτε. Σε Mac / Linux μπορείτε να εκτελέσετε την ακόλουθη εντολή:

sudo mv ngrok / usr / local / bin / ngrok

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

Χρησιμοποιώντας ngrok

Ευτυχώς αυτό το κομμάτι είναι εξαιρετικά απλό. Μόλις εκτελέσετε το διακομιστή σας μέσω του Gulp, ρίξτε μια ματιά στη θύρα που χρησιμοποιεί. Στο παραπάνω παράδειγμα, ο τοπικός διακομιστής εκτελείται σε http: // localhost: 3000 πράγμα που σημαίνει ότι χρησιμοποιεί τη θύρα 3000. Σε μια νέα καρτέλα τερματικού, εκτελέστε την ακόλουθη εντολή:

ngrok http 3000

Αυτό θα δημιουργήσει μια προσιτή σήραγγα στο τοπικόhost σας, το αποτέλεσμα θα πρέπει να είναι κάτι σαν αυτό:

Η διεύθυνση URL που βλέπετε δίπλα “Προώθηση” είναι αυτό που μπορείτε να χρησιμοποιήσετε για να αποκτήσετε πρόσβαση στον ιστότοπό σας από οπουδήποτε.

συμπέρασμα

Στο τέλος της ημέρας μπορούμε τώρα να κάνουμε τρία πράγματα:

• Προβολή και εργασία στο έργο μας τοπικά
• Δείτε τον ιστότοπό μας μέσω οποιασδήποτε συσκευής στο δίκτυο
• Αφήστε τους άλλους να δουν το έργο μας οπουδήποτε με έναν απλό σύνδεσμο

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

Αν έχετε διαφορετική μέθοδο εργασίας τοπικά και μοιράζεστε το αποτέλεσμα, ενημερώστε μας!