Creación de un servidor local accesible desde una dirección pública

He estado desarrollando sitios web durante la mayor parte de 10 años y uno de mis mayores problemas siempre fue el desarrollo local y la sincronización de sitios locales con pruebas en vivo. Usar un entorno local es genial porque es rápido, pero no se puede ver desde lejos y transferir a algún lugar significa la operación de la base de datos, cambiar el nombre de tablas, valores, etc.

En este artículo, le mostraré una manera fácil de ejecutar un servidor local al que puede acceder desde su teléfono y otros dispositivos móviles de forma nativa, y también transmitir a través de Internet, lo que significa compartir su trabajo con los clientes, sin salir de casa. localhost.

Usando Vagrant para crear un entorno local

Hace poco escribí un artículo aquí en Hongkiat sobre el uso de Vagrant, así que solo repasaré lo básico aquí. Para obtener más información, ¡eche un vistazo al artículo!

Para comenzar, deberá tomar e instalar VirtualBox y Vagrant . Ambos son gratuitos y se utilizan para crear una máquina virtual que ejecutará su servidor.

Ahora, cree una carpeta para almacenar sus sitios web. Usemos un directorio llamado “Sitios web” dentro de nuestro directorio de usuarios principal. Eso estaría /Users/[username]/Websitesen OS X y C:/Users/[username]/Websitesen Windows.

Cree una nueva carpeta llamada wordpress. Aquí es donde crearé la máquina virtual. La idea es que cada carpeta Websitescontenga una máquina virtual separada. Si bien puede colocar tantos sitios web en una máquina virtual como desee, me gustaría agruparlos por plataformas, por ejemplo: WordPress, Laravel, Custom

Para los propósitos de este tutorial, crearé un sitio web de WordPress.

Dentro de la WordPresscarpeta, necesitaremos crear dos archivos Vagrantfiley install.sh. Estos se utilizarán para configurar nuestras máquinas virtuales. Jeffrey Way ha creado dos excelentes archivos de inicio; puede tomar su Vagrantfile e install.sh archivos.

Luego, usando la terminal, navegue hasta el WordPressdirectorio y escriba vagrant up. Esto llevará un tiempo, ya que la caja debe descargarse y luego instalarse. Tome una taza de café y consulte esta publicación sobre más de 60 consejos de WordPress mientras espera.

Una vez que se complete el proceso, debería poder ir 192.168.33.21y ver una página correctamente servida. Su carpeta de contenido debe ser la carpeta html dentro del directorio de WordPress. Ahora puede comenzar a agregar archivos, instalar WordPress o cualquier otra cosa que desee.

No olvide leer la guía completa de Vagrant para obtener más información sobre cómo crear hosts virtuales, mapear dominios como, mytest.devetc.

Abrir sitios locales en la misma red usando Gulp

Al construir un sitio, debe pensar en la capacidad de respuesta. Las pantallas pequeñas se pueden emular hasta cierto punto reduciendo la ventana del navegador, pero no es la misma experiencia, especialmente si agregas pantallas de retina a la mezcla.

Idealmente, querrá abrir su sitio web local en sus dispositivos móviles. Esto no es demasiado difícil de hacer, siempre que sus dispositivos estén en la misma red.

Para hacer esto, usaremos Gulp y Browsersync . Gulp es una herramienta para la automatización del desarrollo, Browsersync es una gran herramienta que no solo puede crear un servidor local, sino también sincronizar el desplazamiento, los clics, los formularios y más en todos los dispositivos.

Instalación de Gulp

Instalar Gulp es muy sencillo. Dirígete a la página de Inicio para obtener las instrucciones. Un requisito previo es NPM (Node Package Manager). La forma más sencilla de conseguirlo es instalar el propio Node. Dirígete al sitio web de Node para obtener instrucciones.

Una vez que haya usado el npm install --global gulpcomando para instalar gulp globalmente, debe agregarlo a su proyecto. La forma de hacerlo es ejecutar npm install --save-dev gulpen la carpeta raíz de su proyecto y luego agregar un gulpfile.jsarchivo allí.

Por el momento, agreguemos una sola línea de código dentro de ese archivo que indica que usaremos Gulp.

1
var gulp = require('gulp');

Si está interesado en todas las cosas interesantes que puede hacer Gulp, como concatenar scripts, compilar Sass y LESS, optimizar imágenes, etc., lea nuestra Guía de Gulp . En este artículo nos centraremos en la creación de un servidor.

Usando Browsersync

Browsersync tiene una extensión Gulp que podemos instalar en dos pasos. Primero, usemos npm para descargarlo, luego lo agregamos a nuestro Gulpfile.

Emita el npm install browser-sync gulp --save-devcomando en la raíz del proyecto en la terminal; esto descargará la extensión. Luego, abra el Gulpfile y agregue la siguiente línea:

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

Esto le permite a Gulp saber que usaremos Browsersync. A continuación, definiremos una tarea que controla cómo funcionará Browsersync.

1
2
3
4
5
gulp.task('browser-sync', function() {
  browserSync.init({
    proxy: "192.168.33.21"
  });
});

Una vez agregado, puede escribir gulp browser-syncen la terminal para iniciar un servidor. Debería ver algo como la imagen de abajo.

Hay cuatro URL separadas allí, esto es lo que significan:

  • Local : la URL local es donde puede acceder al servidor en la máquina en la que lo está ejecutando. En nuestros casos puede utilizar 192.168.33.21o puede utilizar el proporcionado por Borwsersync.
  • Externa : esta es la URL que puede usar en cualquier dispositivo conectado a la red para acceder al sitio web. Funcionará en su máquina local, su teléfono, tableta, etc.
  • Interfaz de usuario : esta URL apunta a las opciones del servidor en ejecución. Puede ver las conexiones, configurar la limitación de la red, ver el historial o las opciones de sincronización.
  • Interfaz de usuario externa : es la misma que la interfaz de usuario, pero se puede acceder a ella desde cualquier dispositivo de la red.

¿Por qué utilizar Browsersync?

Ahora que hemos terminado con esta fase, quizás esté pensando: ¿por qué usar Browsersync? También se puede acceder a la URL 192.168.33.21 desde cualquier dispositivo. Si bien esto es así, necesitaría instalar WordPress en esta URL.

Usualmente uso virtualhosts y tengo dominios como wordpress.local o myproject.dev. Estos se resuelven localmente, por lo que no puede visitar wordpress.local en su teléfono móvil y ver el mismo resultado que en su computadora local.

Hasta ahora todo va bien, ahora tenemos un sitio de prueba al que se puede acceder desde cualquier dispositivo en la red. Ahora es el momento de globalizarnos y difundir nuestro trabajo a través de Internet.

Usando ngrok para compartir nuestro localhost

ngrok es una herramienta que puede utilizar para crear túneles seguros a su localhost. Si te registras (aún gratis) obtienes túneles protegidos con contraseña, TCP y múltiples túneles simultáneos.

Instalación de ngrok

Vaya a la página de descarga de ngrok y obtenga la versión que necesita. Puede ejecutarlo desde la carpeta en la que se encuentra o moverlo a una ubicación que le permita ejecutarlo desde cualquier lugar. En Mac / Linux puede ejecutar el siguiente comando:

1
sudo mv ngrok /usr/local/bin/ngrok

Si recibe un error de que esta ubicación no existe, simplemente cree las carpetas que faltan.

Usando ngrok

Afortunadamente, esta parte es extremadamente simple. Una vez que esté ejecutando su servidor a través de Gulp, eche un vistazo al puerto que está usando. En el ejemplo anterior, el servidor local se está ejecutando, lo http://localhost:3000que significa que está usando el puerto 3000. En una nueva pestaña de terminal, ejecute el siguiente comando:

1
ngrok http 3000

Esto creará un túnel accesible a su localhost, el resultado debería ser algo como esto:

La URL que ve junto a “Reenvío” es la que puede utilizar para acceder a su sitio web desde cualquier lugar.

Conclusión

Al final del día, ahora podemos hacer tres cosas:

  • Ver y trabajar en nuestro proyecto localmente
  • Ver nuestro sitio web a través de cualquier dispositivo de la red
  • Deje que otros vean nuestro trabajo en cualquier lugar con un simple enlace

Esto le permitirá concentrarse en el desarrollo en lugar de competir para mantener sincronizados los servidores locales y de prueba, migrar bases de datos y otras tareas preocupantes.

Si tiene un método diferente para trabajar localmente y compartir el resultado, ¡háganoslo saber!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *