𝗣𝗿𝗼𝘆𝗲𝗰𝘁𝗼 𝟭: 𝗘𝘅𝘁𝗮𝗴𝗿𝗮𝗺

📦 DOCKER COMPOSE

Docker Compose

• El archivo docker-compose.yml define una arquitectura de varios servicios interconectados mediante la red app_network.
• Se incluyen dos servidores PHP-FPM (s2 y s3) dedicados a procesar el archivo extagram.php.
• Un servidor PHP-FPM adicional (s4) se encarga específicamente de manejar las cargas de imágenes.
• Hay dos servidores NGINX (s5 y s6) que se encargan de servir imágenes y archivos estáticos.
• S1 actúa como proxy inverso y balanceador de carga, distribuyendo el tráfico entre los distintos servidores.
• S7 es el contenedor de MariaDB, encargado de manejar la base de datos de la aplicación.
• Se configura un volumen compartido llamado app-data para persistir las imágenes y archivos subidos, asegurando que estén disponibles entre los distintos servicios.

🔀 S1

El contenedor S1 és un servidor NGINX,el cual recibe todas las peticiones del navegador.

Dockerfile

• Este Dockerfile crea un contenedor con NGINX basado en Alpine Linux.
• Copia un archivo de configuración personalizado nginx.conf al contenedor.
• Luego, ejecuta NGINX en primer plano para que el contenedor permanezca activo.

nginx.conf

Este archivo de configuración de NGINX define un servidor con múltiples ubicaciones y balanceo de carga.

• Las solicitudes PHP se distribuyen aleatoriamente entre s2_php_fpm y s3_php_fpm.
• El tráfico hacia /upload se envía a s4_php_fpm para manejar cargas de archivos.
• Los archivos estáticos se sirven desde s6_nginx y las imágenes desde s5_nginx.
• También se gestionan errores 404 y se redirige la raíz a extagram.php.

⚖️ S2/S3

Servidores PHP-FPM que ejecutan el script extagram.php, gestionando la parte dinámica de la web, como la carga de publicaciones y gestión de datos.

Dockerfile

• Este Dockerfile crea una imagen basada en PHP 8.2 con FPM.
• Habilita la extensión mysqli para conexión con bases de datos.
• Copia el archivo extagram.php al contenedor y ajusta sus permisos.
• Establece /var/www/html como directorio de trabajo.
• Expone el puerto 9000 para ejecutar PHP-FPM.
• Las solicitudes PHP se distribuyen aleatoriamente entre s2_php_fpm y s3_php_fpm.

extagram.php

• Este código HTML crea un formulario para que los usuarios publiquen texto e imágenes en el sitio "Extagram".
• Utiliza un campo de texto y un selector de archivos para cargar una foto, mostrando una vista previa.
• Al enviarse, los datos se procesan en el servidor y se almacenan en una base de datos MySQL.
• Luego, se consulta la base de datos para mostrar los posts con sus respectivas imágenes en el sitio.

📤 S4

Servidor PHP-FPM que ejecuta el script upload.php, encargado de almacenar imágenes subidas en un directorio del servidor, gestionando la segunda parte dinámica de la web.

Dockerfile

• Este Dockerfile usa la imagen base php:8.2-fpm y habilita la extensión mysqli para conectar con bases de datos.
• Copia el archivo upload.php al contenedor.
• Crea un directorio upload con permisos adecuados para manejar cargas de archivos.
• Finalmente, expone el puerto 9000 y ejecuta PHP-FPM para procesar las solicitudes.

upload.php

• Este script PHP maneja el formulario de publicación.
• Si se sube una imagen, genera un nombre único y la mueve a la carpeta upload.
• Conecta a la base de datos extagram_db en s7_mariadb.
• Usa una consulta preparada para insertar el post y la URL de la imagen en la tabla posts.
• Tras ejecutar la consulta con éxito, cierra la conexión a la base de datos.
• Finalmente, redirige a la página principal.

💾 S5

Servidor NGINX que sirve las imágenes almacenadas en el directorio del servidor, accesibles a través del contenedor S4. Es responsable de la parte estática de la web.

Dockerfile

• Este Dockerfile utiliza la imagen nginx:alpine.
• Copia una configuración personalizada de Nginx.
• Ejecuta el servidor Nginx en primer plano para servir contenido.

nginx.conf

• Este archivo de configuración de Nginx establece un servidor que escucha en el puerto 80.
• Sirve archivos estáticos desde /usr/share/nginx/html.
• Se configura para manejar la ruta /upload, mostrando un índice de archivos si no hay archivo predeterminado.
• Se ajusta el valor de worker_connections para definir la cantidad de conexiones simultáneas.

🖼️ S6

Servidor NGINX que gestiona la entrega de archivos estáticos como style.css y preview.svg, esenciales para el diseño de la página.

Dockerfile

• Este Dockerfile usa la imagen base de nginx:alpine.
• Copia un archivo de configuración personalizado (nginx.conf) al contenedor.
• Copia todos los archivos dentro de ./assets/ a la carpeta correspondiente en el contenedor para ser accesibles.
• Finalmente, inicia Nginx en primer plano para que el contenedor siga ejecutándose.

nginx.conf

• Este archivo de configuración de Nginx establece un servidor que escucha en el puerto 80.
• Define el directorio raíz para los archivos estáticos.
• Configura una regla para la ubicación /assets, donde se sirve el contenido desde una ruta específica (/usr/share/nginx/html/assets) con control de caché y tipos MIME específicos.
• Habilita el listado de archivos.
• Se asegura de que se devuelvan errores 404

  style.css

• Este archivo CSS define el estilo para una página web.
• El cuerpo tiene un fondo gris claro y usa la fuente sans-serif.
• El formulario está centrado y tiene un diseño de columna con un borde inferior.
• Los inputs de texto y el botón de envío tienen bordes y estilos específicos.
• El archivo de imagen se oculta mientras que se muestra una vista previa de la imagen seleccionada.
• Los elementos .post tienen un estilo con márgenes, bordes y una presentación de imagen con un ancho máximo de 600px.

🗄️ S7

Contenedor con MariaDB que almacena la base de datos. Replica los archivos de la carpeta de imágenes, de modo que si los archivos no están disponibles, se recuperan como "blobs" desde la base de datos. Además, el servidor S5 está conectado a una red externa mediante VPN.

Dockerfile

• Este Dockerfile usa la imagen oficial de MariaDB 10.5 para crear un contenedor de base de datos.
• Se configuran las variables de entorno para establecer la contraseña de root, el nombre de la base de datos y las credenciales del usuario administrador.
• Además, se copia un script de inicialización (init_db.sql) para que se ejecute automáticamente al iniciar el contenedor.
• Se expone el puerto 3306 para que sea accesible desde otros servicios.

init_db.sql

• Este script SQL crea la base de datos extagram_db y una tabla posts si no existen.
• La tabla tiene cuatro columnas: id (clave primaria autoincremental), post (contenido del post), photourl (URL de la imagen), y created_at (marca temporal del momento de creación).
• Se asegura de que ambas, la base de datos y la tabla, existan antes de ser utilizadas.