En los últimos años, el mundo del desarrollo web ha crecido hasta ser mucho más que lenguajes de programación y softwares de edición de código. Además de estos elementos, ahora existen muchas herramientas que nos permiten estilizar, testar, completar y finalizar nuestros proyectos con gran facilidad. En este post, te enseñaremos qué es NGINX, un servidor fundamental para pasar nuestras aplicaciones de la etapa de código a la etapa de producción.
¿Qué es NGINX?
En nuestro post sobre el comando build en create-react-app te hemos explicado el proceso de finalizar una aplicación creada en esta herramienta para pasarla a la etapa de producción. En aquel post, también te comentamos que el paso final es tomar la carpeta generada por el build y pasarla a un servidor para que cualquier persona de nuestro equipo pueda visualizar la aplicación en funcionamiento.
Entonces, ¿qué es NGINX? Pues NGINX es uno de los servidores estáticos a los que podemos pasar nuestra carpeta build. Es decir, es uno de los métodos con los que podemos servir nuestra aplicación.
Un servidor estático, a diferencia de uno dinámico, es aquel que nos sirve los datos tal cual están almacenados, sin ninguna modificación.
Ahora que sabes qué es NGINX, seguro que te preguntas cómo funciona. Es muy sencillo. Una vez has creado tu build con el comando de create-react-app, tendrás una carpeta con los archivos HTML, CSS y JavaScript en los que se encuentra tu aplicación.
Entonces, lo único que hay por hacer es meter toda la carpeta build que hemos creado dentro de un directorio del servidor NGINX. Luego, el servidor se encarga del proceso de servir y nosotros le pedimos la ruta. Con esto, podemos descargar el HTML y arrastrar todo el código para que la visualización de nuestra app funcione.
A continuación, para profundizar en qué es NGINX, te enseñaremos cómo usar el build creado en nuestra aplicación de create-react-app para visualizarla con este servidor.
¿Cómo usar NGINX?
Para entender qué es NGINX hay que saber cómo usarlo. Basta con ejecutar el build de tu aplicación, empaquetar el resultado en un contenedor de NGINX y servirla. Esto luego lo podremos llevar a una nube o a un lugar que admita meter contenedores. Allí, en nuestro contenedor, tendremos nuestra aplicación corriendo sin ningún problema.
Para llevar a cabo el proceso anterior hay dos opciones:
- Una de las opciones es instalar el servidor en nuestra máquina siguiendo las instrucciones de la página oficial nginx.com. Sin embargo, este es un proceso manual que podemos simplificar con un solo comando.
- La otra opción para usar NGINX es programar un comando dentro de un archivo de tipo DockerFile. Es decir, podemos darle las instrucciones a Docker para ejecutar esta acción por nosotros. Para saber más sobre este proceso, te invitamos a leer nuestro post sobre ejecutar un DockerFile en Visual Studio Code.
¿Qué sigue?
Tras leer este post, ya sabes exactamente qué es NGINX, las ventajas que ofrece y cómo funciona en el contexto de proyectos web, pero ¡todavía queda mucho por aprender de este mundo! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás todo lo necesario para convertirte en un experto del desarrollo web en pocos meses. ¡Matricúlate ahora!
