Creazione di un server locale accessibile da un indirizzo pubblico

Ho sviluppato siti web per la parte migliore di 10 anni e uno dei miei maggiori problemi è sempre stato lo sviluppo locale e la sincronizzazione dei siti locali per testare dal vivo. L'utilizzo di un ambiente locale è ottimo perché è veloce, ma non è visualizzabile da lontano e il trasferimento da qualche parte significa operazione di database, ridenominazione di tabelle, valori e così via.

In questo articolo, ti mostrerò un modo semplice per eseguire un server locale quale puoi accesso dal tuo telefono e altri dispositivi mobili in modo nativo, e anche trasmesso su Internet, il che significa condividere il tuo lavoro con i clienti, senza lasciare il buon vecchio host locale.

Utilizzo di Vagrant per creare un ambiente locale

Poco fa ho scritto un articolo qui su Hongkiat sull'uso di Vagrant, quindi qui esaminerò solo le basi. Per maggiori informazioni, dai un'occhiata all'articolo!

Per iniziare, devi prendere e installare VirtualBox e Vagrant. Entrambi sono gratuiti e utilizzati per creare una macchina virtuale che eseguirà il tuo server.

Ora, crea una cartella in cui memorizzare i tuoi siti Web. Usiamo una directory chiamata “siti web” all'interno della nostra directory utente principale. Sarebbe / Utenti / [nome utente] / Siti Web su OS X e C: / Users / [nome utente] / Siti Web Su Windows.

Crea una nuova cartella chiamata wordpress. Questo è dove creerò la macchina virtuale. L'idea è che ogni cartella all'interno siti web ospita una macchina virtuale separata. Mentre tu può metti tanti siti web su una macchina virtuale come desideri, mi piace raggrupparli per piattaforme - ad esempio: WordPress, Laravel, Custom

Ai fini di questo tutorial creerò un sito Web WordPress.

Dentro il WordPress cartella avremo bisogno di creare due file, Vagrantfile e install.sh. Questi verranno utilizzati per configurare le nostre macchine virtuali. Jeffrey Way ha creato due ottimi file di avvio; puoi prendere i suoi file Vagrantfile e install.sh.

Quindi, utilizzando il terminale, accedere a WordPress directory e tipo vagabondo. Questo richiederà un po 'di tempo, dal momento che la scatola deve essere scaricata e quindi installata. Prendi una tazza di caffè e dai un'occhiata a questo post su 50 consigli WordPress mentre aspetti.

Una volta che il processo è completo, dovresti essere in grado di andare a 192.168.33.21 e vedere una pagina opportunamente servita. La cartella del contenuto deve essere la cartella html all'interno della directory di WordPress. Ora puoi iniziare ad aggiungere file, installare WordPress o qualsiasi altra cosa desideri.

Non dimenticare di leggere la guida completa di Vagrant per maggiori informazioni sulla creazione di host virtuali, mappando domini come mytest.dev e così via.

Aprire siti locali sulla stessa rete usando Gulp

Mentre costruisci un sito dovresti pensare alla reattività. Piccoli schermi possono essere emulati in una certa misura restringendo la finestra del browser, ma non è la stessa esperienza, soprattutto se si proiettano schermi retina nel mix.

Idealmente vorrai aprire il tuo sito web locale sui tuoi dispositivi mobili. Questo non è troppo difficile da fare, a condizione che i tuoi dispositivi siano sulla stessa rete.

Per fare questo, useremo Gulp e Browsersync. Gulp è uno strumento per l'automazione dello sviluppo, Browsersync è un ottimo strumento che non solo può creare un server locale ma sincronizzare lo scorrimento, i clic, i moduli e altro ancora su tutti i dispositivi.

Installazione di Gulp

Installare Gulp è molto semplice. Vai alla pagina Introduzione per le istruzioni. Un prerequisito è NPM (Node Package Manager). Il modo più semplice per ottenere questo è installare il nodo stesso. Vai al sito web del nodo per istruzioni.

Una volta che hai usato il npm install --global gulp comando per installare gulp a livello globale, è necessario aggiungerlo al progetto. Il modo per farlo è correre Installa npm --save-dev gulp nella cartella principale del tuo progetto, quindi aggiungi un gulpfile.js file lì.

Al momento aggiungiamo una singola riga di codice all'interno di quel file che indica che useremo Gulp stesso.

var gulp = require ('gulp');

Se sei interessato a tutte le cose interessanti che Gulp può fare come concatenare script, compilare Sass e LESS, ottimizzare le immagini e così via, leggi la nostra Guida al Gulp. In questo articolo ci concentreremo sulla creazione di un server.

Utilizzo di Browsersync

Browsersync ha un'estensione Gulp che possiamo installare in due passaggi. Per prima cosa, usiamo npm per scaricarlo, quindi lo aggiungiamo al nostro Gulpfile.

Emettere il npm installa browser-sync gulp --save-dev comando nella radice del progetto nel terminale; questo scaricherà l'estensione. Quindi, apri Gulpfile e aggiungi la seguente riga:

var browserSync = require ('browser-sync'). create ();

Ciò consente a Gulp di sapere che utilizzeremo Browsersync. Successivamente definiremo un'attività che controlla il funzionamento di Browsersync.

gulp.task ('browser-sync', function () browserSync.init (proxy: "192.168.33.21"););

Una volta aggiunto, puoi digitare gulp browser-sync nel terminale per avviare un server. Dovresti vedere qualcosa come l'immagine qui sotto.

Ci sono quattro URL separati lì, ecco cosa significano:

Locale: L'URL locale è il punto in cui è possibile raggiungere il server sul computer su cui viene eseguito. Nei nostri casi puoi usare 192.168.33.21 oppure puoi usare quello fornito da Borwsersync.
Esterno: Questo è l'URL che puoi utilizzare su qualsiasi dispositivo connesso alla rete per raggiungere il sito web. Funzionerà sulla tua macchina locale, sul tuo telefono, tablet e così via.
UI: Questo URL punta alle opzioni per il server attualmente in esecuzione. Puoi vedere le connessioni, impostare la limitazione della rete, visualizzare la cronologia o le opzioni di sincronizzazione.
Interfaccia utente esterna: È uguale all'interfaccia utente, ma accessibile da qualsiasi dispositivo sulla rete.

Perché utilizzare Browsersync?

Ora che abbiamo terminato questa fase, potresti pensare: perché usare Browsersync? L'URL 192.168.33.21 può anche essere raggiunto da qualsiasi dispositivo. Mentre è così, è necessario installare WordPress su questo URL.

Di solito uso virtualhosts e ho domini come wordpress.local o myproject.dev. Questi risolvono localmente quindi non puoi visitare wordpress.local sul tuo cellulare e vedere lo stesso risultato sul tuo computer locale.

Fin qui tutto bene, ora abbiamo un sito di test a cui è possibile accedere da qualsiasi dispositivo sulla rete. Ora è il momento di andare a livello globale e trasmettere il nostro lavoro su Internet.

Usando ngrok per condividere il nostro Localhost

ngrok è uno strumento che puoi usare per creare tunnel sicuri sul tuo localhost. Se ti iscrivi (ancora gratis) ottieni tunnel protetti da password, TCP e più tunnel simultanei.

Installare ngrok

Vai alla pagina di download di ngrok e prendi la versione che ti serve. Puoi eseguirlo dalla cartella in cui si trova o spostarlo in una posizione che ti consenta di eseguirlo da qualsiasi luogo. Su Mac / Linux puoi eseguire il seguente comando:

sudo mv ngrok / usr / local / bin / ngrok

Se ricevi un errore che questa posizione non esiste, crea semplicemente le cartelle mancanti.

Utilizzando ngrok

Per fortuna questa parte è estremamente semplice. Una volta eseguito il server tramite Gulp, dai un'occhiata alla porta che sta utilizzando. Nell'esempio sopra, il server locale è in esecuzione su http: // localhost: 3000 il che significa che sta usando la porta 3000. In una nuova scheda del terminale, esegui il seguente comando:

ngrok http 3000

Questo creerà un tunnel accessibile al tuo localhost, il risultato dovrebbe essere qualcosa del genere:

L'URL che vedi accanto “spedizione” è ciò che puoi usare per accedere al tuo sito web da qualsiasi luogo.

Conclusione

Alla fine della giornata possiamo ora fare tre cose:

Visualizza e lavora sul nostro progetto a livello locale
Visualizza il nostro sito Web tramite qualsiasi dispositivo sulla rete
Consenti agli altri di vedere il nostro lavoro ovunque con un semplice link

Questo ti consentirà di concentrarti sullo sviluppo anziché sulle corse per mantenere sincronizzati i server locali e di prova, migrare database e altre attività preoccupanti.

Se hai un metodo diverso di lavorare localmente e condividere il risultato, faccelo sapere!