Si estás leyendo este artículo es muy probable que te encuentres en la siguiente situación: has hecho tu primera aplicación web, pero no tienes ni idea de cómo compartirla con el mundo.
Si este es tu caso, en tu ordenador tendrás algún proyecto de código, ya bien sea una página web vanilla, un cliente web hecho con algún framework de NodeJS como Angular o ReactJS, o un servicio backend hecho con herramientas como Spring o Express.js.
¿Por qué querrías desplegar desde tu propio ordenador?
Con este artículo aprenderás a compartir con el mundo tu maravilloso proyecto de forma gratuita. Sin embargo, aquí te enseño cómo puedes desplegar tu proyecto desde tu propio ordenador. Si estás pensando en desplegar una aplicación web de forma robusta, te desaconsejo enormemente esta opción en favor de escoger una de las múltiples plataformas especializadas en hosting (algunas son gratuitas, como Vercel o Netlify). Pronto escribiré un post enseñando cómo.
¿Por qué no es buena idea desplegar a producción utilizando mi propio ordenador como servidor? Bien, piensa en algunos de los riesgos que esto acarrearía:
Cortes de luz que hacen caer el servidor. Puedes estar horas o días sin darte cuenta.
Si te hackean, estarían hackeando tu propio ordenador.
Integración: hay muchos servicios de monitorización, CI, CD o alertas que se integran con esas plataformas especializadas. Si quisieras tener todas estas cosas en tu ordenador tendrías muchas más dificultades para conseguirlo.
Ancho de banda.
Ahora podrías estarte preguntando: ¿entonces, para qué me sirve saber desplegar desde mi propio ordenador si parece ser tan mala idea? Desplegar desde tu propia máquina es una opción genial, debido a su rapidez y simplicidad, para poder compartir lo que estás haciendo con el mundo de forma temporal: ya bien sea un amigo, un familiar, un profesor... Es decir, desplegar desde tu propio ordenador debería ser parte de la fase de desarrollo de una aplicación y no de la fase de posproducción.
Cómo desplegar desde tu propio ordenador
En este artículo tocaremos tres tipos de proyecto:
Página web estática vanilla: HTML, CSS y JavaScript.
Página web estática con framework: Angular, ReactJS, Vue, etc.
Servidor web: Spring, Spring MVC, Express.js, Django, etc.
Antes de comenzar con la parte técnica, debemos tener algo claro: necesitamos inicializar un servicio que sirva los ficheros de nuestro proyecto.
Si nuestro proyecto web ya es en sí mismo un servicio, no necesitamos hacer nada extra.
Si nuestro proyecto es un cliente web hecho con algún framework como ReactJS o Angular, lo más probable es que el empaquetador que estemos utilizando (los más comunes son Webpack o Vite) ya transforme nuestro proyecto en un servicio de forma automática por nosotros al ejecutar algún comando como npm start o npm run dev . Si no fuera el caso, habría que tratarlo como un proyecto vanilla.
Si nuestro proyecto es una página web vanilla, es decir, sólo tenemos ficheros estáticos (HTML, CSS y JavaScript), necesitamos crear un servicio por nuestra cuenta. Piensa que el usuario lo que necesita es acceder a ese fichero HTML, pero no hay nada que se lo esté proporcionando o sirviendo. Por eso necesitamos un servidor que tenga un servicio que sirva estos ficheros.
Cómo levantar nuestro propio servidor
Como ya adelantamos antes, nuestro ordenador va a funcionar como servidor. Aquí distinguimos dos situaciones distintas: si tenemos alguna librería que levanta el servicio por nosotros o si tenemos que levantarlo nosotros mismos.
Si nuestro framework levanta el servicio por nosotros
Si nuestro proyecto está hecho con un framework o librería que nos permite levantar un servicio automáticamente tan sólo tendríamos que arrancar el proyecto como de costumbre. Aquí te dejo algunos comandos de ejemplo, pero te recomiendo siempre acudir a la documentación oficial:
vite dev --host si usas el empaquetador Vite (puedes utilizar también npm run dev -- --host).
HOST=0.0.0.0 npm run start en una aplicación ReactJS creada a partir del script creact-react-app.
ng serve --host 0.0.0.0 usando el framework Angular2.
gradlew run usando Gradle.
Habrás notado que en muchos de los ejemplos estoy utilizando el flag host. Esto es debido a que muchas veces estos servidores automáticos se despliegan únicamente en el localhost o 127.0.0.1.
Un servicio desplegado en el localhost sólo es accesible desde el propio host local (el nombre no engaña). Por tanto, si alguien quisiera conectarse a nuestro servidor desde otro host (u ordenador) no podría. Pasándole el host 0.0.0.0 le estamos indicando a nuestro framework o librería que despliegue la aplicación también en la dirección 0.0.0.0 de nuestro ordenador. Esta dirección es equivalente a escribir la dirección IP de nuestro ordenador.
Puedes hacer la prueba. Arranca el servidor cómo te he enseñado, utilizando el flag del host, y con tu móvil (el cual debe estar conectado a la misma red que tu ordenador) conéctate a la dirección IP de tu ordenador. Recuerda añadir el puerto, que variará en función del tipo de librería que utilices para arrancar el servicio (al ejecutar el comando se te debería mostrar la dirección completa).
Deberías poder acceder a tu aplicación sin problemas.
En la imagen de ejemplo la ruta sería http://192.xxx.x.xxx:5173, siendo 5173 el puerto. Nótese que he ocultado mi dirección IP.
Ahora, tu servidor está disponible en tu red. Esto quiere decir que todos los dispositivos que estén conectados en tu misma red (a tu rúter) podrán acceder a tu servidor a través de la ruta que acabamos de obtener. Para saber cómo permitir que los dispositivos que no estén conectados a tu red puedan acceder al servidor sigue leyendo.
Si no utilizamos ningún framework o si este no levanta el servicio por nosotros
Si el framework que estamos utilizando, en caso de utilizar uno, no nos crea un servicio de forma automática, lo tenemos que crear nosotros.
Hay muchos tipos de herramientas para crear servidores. Algunas de las más populares en entornos profesionales son Nginx o Apache. Como ya hemos comentado previamente, a nosotros no nos interesa utilizar nuestro propio ordenador como servidor para producción, así que, si bien funcionan perfectamente, no nos merece mucho la pena complicarnos demasiado con este tipo de utilidades que suelen requerir de bastante configuración.
Una forma muy sencilla de levantar un servidor desde nuestro ordenador es utilizar Python. Si tienes Python3 instalado, ejecutando el sencillo comando python -m http.server desde la raíz de tu proyecto ya estarías levantando un servidor en el puerto 8000.
Nótese que en la captura de ejemplo he ocultado mi dirección IP privada por motivos de privacidad.
Cómo compartir tu servidor con el mundo
Como hemos visto, ya tenemos nuestro servidor accesible desde nuestra red local, es decir, está disponible para todos aquellos dispositivos que estén conectados a nuestro rúter.
Sin embargo, lo más probable es que tu amigo o tu profesor no vivan contigo y no puedan conectarse a tu red. Por eso, te voy a enseñar distintos métodos para que puedas compartir tu aplicación con ellos.
Ngrok
Ngrok es un software que hace de túnel entre tu servidor y los clientes que se conecten a él.
Es una forma muy sencilla de compartir nuestros servicios, pero tiene una gran contra: su plan gratuito limita mucho el ancho de banda. Esto causa que si tu aplicación es muy pesada, el usuario que se conecte a ella a través de Ngrok le resultará extremadamente lenta (una página web con imágenes que no estén muy optimizadas podría tomar varios minutos en cargar completamente). Si has optimizado bien tu página web, esta debería ser lo suficiente ligera para poder compartirse a través de Ngrok.
Recuerda, esto es un despliegue 'de prueba', por lo que el rendimiento de tu sitio web no se espera que sea óptimo. No despliegues en producción con Ngrok.
Para utilizar Ngrok debemos:
Acceder a su sitio web https://ngrok.com y registrarnos.
Descargar el instalador que nos corresponda.
Instalar Ngrok en nuestra máquina.
Configurar el cliente de Ngrok ejecutando el siguiente comando con la clave que se genera al crear nuestra cuenta: ngrok config add-authtoken <token>
Redirigir nuestro servicio con ngrok http <puerto> , sustituyendo <puerto> con el puerto interno que utilice nuestro servidor (si no encuentras el puerto, probablemente sea el puerto 80).
Utiliza tu propio rúter
Otra alternativa es no utilizar ningún software de terceros y hacernos todo el trabajo nosotros mismos. Aquí tengo que lanzar una advertencia: tocar la configuración del rúter puede ser peligroso, ya que gente con intenciones maliciosas podría aprovechar nuestros despistes para colarse en nuestro ordenador. Como este artículo es para despliegues temporales, recuerda dejar todo como estaba cuando termines.
En este punto, ya tenemos nuestro servicio corriendo en nuestra máquina y disponible en nuestra red local. Ahora queremos que también esté disponible en la red global: Internet. Podemos crear una configuración en nuestro rúter que redirija el tráfico de la red global a nuestra red local. Te enseño cómo.
Abre tu navegador y navega a la configuración de tu rúter http://192.168.1.1.
Inicia sesión en tu rúter con las credenciales que encontrarás en la base de tu rúter. Si no las encontrases, contacta con tu teleoperadora.
A partir de aquí, cada marca de rúters es un mundo. Cada modelo tiene interfaces y opciones diferentes. Como lo que vamos a hacer es bastante básico, no deberías tener muchos problemas.
Busca por la interfaz de tu rúter algo que se asemeje a Port Forwarding o redirección de puerto.
En la captura anterior puedes ver que yo ya tengo tres entradas creadas, debes crear una tú mismo. Para ello necesitas tres cosas:
El nombre para identificar la redirección.
La redirección de puerto. Hay rúters que te permiten añadirle un nombre a la redirección. En mi caso, a la redirección la he llamado 'vite' porque Vite sirve las apps por defecto en el puerto interno 5173. Mi redirección 'vite' redirige el tráfico entre el puerto externo 80 (el puerto por defecto para comunicaciones HTTP) y el puerto interno 5173 de mi host.
El host. En tu red local tendrás muchos dispositivos conectados. Debes elegir el que está sirviendo la aplicación (tu ordenador).
Siguiendo este diagrama, ahora los clientes fuera de tu red local que quieran conectarse a tu servicio deberán escribir la dirección IP pública de tu rúter junto al puerto que hayas redirigido. Siguiendo el ejemplo, estaríamos recibiendo una petición con puerto 5173. Tu rúter, al recibir esa petición, leerá el puerto y buscará en sus entradas de redirecciones cuál es la que tiene asociada dicho puerto, y devolverá el servicio interno que corresponda a esa redirección.
Para hacer la prueba necesitamos conocer nuestra IP pública. La IP pública es la dirección IP que tiene nuestro rúter. Todos los dispositivos de Internet pueden conectarse a nuestro rúter (por eso tenemos que iniciar sesión en él). Para obtenerla podemos buscarla dentro de la configuración del rúter o utilizar un servicio como https://www.whatismyip.com.
Para comprobar que todo está bien configurado vamos a volver a coger nuestro teléfono móvil, pero esta vez vamos a desactivar el WiFi y vamos a utilizar el 4G, para así sacar a nuestro teléfono de nuestra red local. Abrimos nuestro navegador y escribimos la siguiente ruta:
http://<IP pública de mi rúter>:<puerto externo en la redirección de mi aplicación>.
Por ejemplo: http://188.127.119.167:80.
Si todo ha salido bien, deberías estar viendo tu aplicación. Tras terminar de compartirla recuerda desactivar la redirección en tu rúter.
Si tras el paso 6 no hubieras conseguido ver tu aplicación aun habiéndolo hecho todo bien, seguramente se deba a la configuración de tu firewall. Si el puerto interno que deseas compartir es el 5173 (por poner un ejemplo), debes añadir una excepción a tu firewall para poder permitir el tráfico en ese puerto. Aquí te adjunto un artículo de RedesZone donde te enseñan cómo hacerlo en Windows.
Conclusiones
En este artículo hemos aprendido como utilizar nuestro propio ordenador como servidor para desplegar nuestras aplicaciones y páginas web. Sé que he sido muy pesado a lo largo del artículo, pero deber recordar que este tipo de despliegues no se aconsejan para producción, sino que son ideales para compartir tu trabajo con un compañero, amigo o familiar.
Este es el primer artículo que escribo, si te ha gustado te animo a que reacciones a él y si tienes algún tipo de duda o comentario no dudes en escribirlo. ¡Hasta la próxima!
