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

He estado desarrollando sitios web durante la mayor parte de los últimos 10 años y uno de mis problemas más importantes siempre fue el desarrollo local y la sincronización de los sitios locales con las pruebas en vivo. El uso de un entorno local es excelente 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, el cambio de nombre de tablas, valores, etc..

En este artículo, te mostraré una manera fácil de ejecutar un servidor local lo que puedas Accede desde tu teléfono y otros dispositivos móviles. de forma nativa, y también difundir a través de Internet, lo que significa compartir su trabajo con los clientes, sin dejar un buen servicio local..

Uso de Vagrant para crear un entorno local

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

Para comenzar, deberás agarrar 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. Vamos a usar un directorio llamado “Sitios web” Dentro de nuestro directorio principal de usuarios. Eso sería / Usuarios / [nombre de usuario] / Sitios web en OS X y C: / Usuarios / [nombre de usuario] / Sitios web en Windows.

Crear una nueva carpeta llamada wordpress. Aquí es donde crearé la máquina virtual. La idea es que cada carpeta dentro de Sitios web alberga una máquina virtual separada. Mientras tu puede coloque tantos sitios web en una máquina virtual como desee, me gustaría agruparlos por plataformas, por ejemplo: WordPress, Laravel, Custom

A los efectos de este tutorial, crearé un sitio web de WordPress..

Dentro de WordPress carpeta necesitaremos crear dos archivos, Vagrantfile y instalar.sh. Estos serán utilizados para configurar nuestras máquinas virtuales. Jeffrey Way ha creado dos grandes archivos de inicio; puedes agarrar sus archivos Vagrantfile e install.sh.

A continuación, utilizando el terminal, navegue a la WordPress directorio y tipo vagabundo. Esto llevará un tiempo, ya que la caja debe descargarse y luego instalarse. Toma una taza de café y echa un vistazo a esta publicación en 50 consejos de WordPress mientras esperas.

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

No olvide leer la guía completa de Vagrant para obtener más información sobre la creación de hosts virtuales, mapear dominios como mytest.dev y así.

Abrir sitios locales en la misma red usando Gulp

Mientras construyes un sitio deberías estar pensando en la capacidad de respuesta. Las pantallas pequeñas se pueden emular hasta cierto punto al restringir la ventana del navegador, pero no es la misma experiencia, especialmente si arrojas pantallas de retina en la mezcla.

Lo ideal es que desees abrir tu sitio web local en tus 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 fácil. Dirígete a la página de inicio para obtener las instrucciones. Un requisito previo es NPM (Administrador de paquetes de nodos). La forma más fácil de conseguir esto es instalar Node. Dirígete al sitio web de Node para obtener instrucciones..

Una vez que hayas usado el npm instalar - trago global Para instalar Gulp globalmente, debe agregarlo a su proyecto. La forma de hacerlo es correr. npm instalar --save-dev gulp en la carpeta raíz de su proyecto, a continuación, agregue un gulpfile.js archivar allí.

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

var gulp = require ('gulp');

Si está interesado en todas las cosas geniales que Gulp puede hacer, como concatenar scripts, compilar Sass y LESS, optimizar imágenes, etc., lea nuestra Guía para Gulp. En este artículo nos centraremos en crear 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.

Emitir el npm instalar navegador-sync trago --save-dev comando en la raíz del proyecto en el terminal; Esto descargará la extensión. Luego, abra el archivo Gulpfile y agregue la siguiente línea:

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..

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

Una vez añadido, puede escribir Sencilla sincronización de navegador en la terminal para iniciar un servidor. Deberías ver algo como la imagen de abajo..

Hay cuatro URL separadas, 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 puedes utilizar 192.168.33.21 o puede utilizar el proporcionado por Borwsersync.
• Externo: Esta es la URL que puede usar en cualquier dispositivo conectado a la red para llegar al sitio web. Funcionará en su máquina local, su teléfono, tableta, etc..
• UI: Esta URL apunta a las opciones para el servidor actualmente en ejecución. Puede ver las conexiones, configurar la regulación de la red, ver el historial o las opciones de sincronización.
• IU externa: Es lo mismo que la interfaz de usuario, pero accesible desde cualquier dispositivo en la red.

¿Por qué utilizar Browsersync??

Ahora que hemos terminado con esta fase, podría estar pensando: ¿por qué usar Browsersync? La URL 192.168.33.21 también se puede acceder desde cualquier dispositivo. Si bien esto es así, deberías instalar WordPress en esta URL.

Por lo general uso servidores virtuales y tengo dominios como wordpress.local o myproject.dev. Estos se resuelven localmente para que no pueda visitar wordpress.local en su teléfono móvil y ver el mismo resultado que en su computadora local.

Hasta ahora, bien, ahora tenemos un sitio de prueba al que se puede acceder desde cualquier dispositivo en la red. Ahora es el momento de globalizar y transmitir 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 para su host local. Si te registras (aún es gratis) obtienes túneles protegidos por contraseña, TCP y múltiples túneles simultáneos.

Instalando 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 puedes ejecutar el siguiente comando:

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á utilizando. En el ejemplo anterior, el servidor local se está ejecutando en http: // localhost: 3000 lo que significa que está utilizando el puerto 3000. En una nueva pestaña de terminal, ejecute el siguiente comando:

ngrok http 3000

Esto creará un túnel accesible a tu host local, el resultado debería ser algo como esto:

La URL que ves al lado de “Reenvío” es lo que puede usar para acceder a su sitio web desde cualquier lugar.

Conclusión

Al final del día podemos hacer tres cosas:

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

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

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