Más allá del HTML: Empaqueta tu web como un Ingeniero Cloud

Cualquiera puede crear una página web con HTML y CSS. Pero, ¿qué diferencia a un desarrollador web aficionado de un Ingeniero Cloud?

La diferencia está en la entrega (Delivery).

El aficionado confía en que el servidor donde alojará su web esté bien configurado. El Ingeniero Cloud no confía en nadie: empaqueta su propio servidor web junto con su código.

Hoy vamos a ver cómo profesionalizar un proyecto web simple utilizando el ejemplo website del repositorio de mi libro “Érase una vez Docker”. Vamos a crear lo que llamamos un “Artefacto Inmutable”.

El problema del “Open File”

Cuando haces doble clic en un archivo index.html en tu ordenador, no estás simulando un entorno real.

• No hay servidor web procesando cabeceras HTTP.
• No hay reglas de compresión Gzip/Brotli.
• No hay gestión de errores 404 real.

Para solucionar esto, no necesitas instalar Apache o Nginx en tu portátil (ensuciando tu sistema operativo). Solo necesitas Docker.

Tutorial: Tu propio servidor Nginx en 2 minutos

Vamos a construir una imagen de Docker que contenga tu sitio web y un servidor Nginx ultraligero (Alpine) optimizado.

1. Clona el laboratorio

Si aún no tienes el código del libro, descárgalo. Es el mismo que usan miles de estudiantes para aprender:

git clone https://github.com/mmorejon/erase-una-vez-docker.git
cd erase-una-vez-docker/website

2. Analiza el Dockerfile

Dentro de la carpeta website verás la “receta” maestra. Es sorprendentemente simple:

FROM nginx:1.21.6
COPY html /usr/share/nginx/html

¿Qué hace esto?

1. FROM nginx:1.21.6: Descarga una versión minúscula de Linux con Nginx preinstalado y configurado por expertos.
2. COPY: Toma tus archivos HTML/CSS locales e “inyéctalos” dentro del servidor, en la carpeta pública.

3. Build & Run (Construir y Correr)

Vamos a crear nuestro artefacto. En tu terminal ejecuta:

# Construimos la imagen y la etiquetamos como "mi-web-pro"
docker image build --tag mi-web-pro .

# Ejecutamos el contenedor en segundo plano (--detach) en el puerto 8080
docker container run --detach --publish 8080:80 mi-web-pro

4. El resultado profesional

Abre http://localhost:8080.

Lo que ves no es un archivo local. Es un servidor web real respondiendo peticiones. Si inspeccionas la red, verás los headers de Nginx. Este contenedor es idéntico bit a bit a lo que desplegarías en un cluster de Kubernetes en Google o AWS.

¿Por qué esto es el estándar hoy en día?

Al encapsular tu web así, ganas superpoderes:

1. Portabilidad Total: Esta imagen corre igual en tu Mac, en un servidor Linux de 5€ o en una arquitectura Serverless como AWS Fargate.
2. Seguridad: Puedes escanear la imagen en busca de vulnerabilidades antes de desplegar.
3. Rollbacks Instantáneos: ¿La nueva versión de la web rompió algo? Simplemente vuelve a desplegar la imagen anterior (mi-web-pro:v1). No hay que “deshacer cambios” en archivos sueltos.

Da el siguiente paso

Dockerizar una web estática es el “Hola Mundo” de la ingeniería de contenedores. Pero, ¿qué pasa cuando necesitas:

• ¿Configurar Nginx para una Single Page Application (React/Vue)?
• ¿Optimizar el tamaño de la imagen para que cargue en milisegundos?
• ¿Orquestar esto junto con una API y una base de datos?

En “Érase una vez Docker”, te llevo desde estos conceptos básicos hasta arquitecturas complejas, enseñándote las buenas prácticas que usan las grandes empresas tecnológicas.

• 📘 Libro en Amazon: Ver Oferta
• 💻 Código en GitHub: Ver Repositorio

Deja de “subir webs”. Empieza a desplegar productos.