En este artículo explicamos paso a paso cómo construir, contenerizar, escanear y desplegar una Galería React con Firebase usando Docker, Jenkins CI CD y una instancia AWS EC2. El objetivo es que incluso si eres nuevo en DevOps o en despliegues en la nube puedas seguir cada paso y entender por qué es importante.
Sobre el proyecto Este es una Galería sencilla creada con React en el frontend, Firebase para autenticación y almacenamiento, y TailwindCSS para estilos. La aplicación permite subir y descargar imágenes, iniciar sesión y gestionar una galería personal. Aunque la app es básica, el valor real está en el flujo de despliegue automatizado que garantiza entregas rápidas y seguras.
Paso 1 Ejecutar localmente Clona el repositorio con git clone https://github.com/your-username/gallery-app.git y entra al directorio. Instala dependencias con npm install y arranca el servidor de desarrollo con npm run dev. Por defecto la app estará en https://localhost:5173. Para un build de producción usa npm run build y se generará la carpeta dist con los assets optimizados.
Paso 2 Contenerizar con Docker Usamos un Dockerfile multietapa para mantener la imagen final ligera. Primera etapa build con node:18-alpine para compilar la app y segunda etapa nginx:alpine para servir los archivos estáticos. Ejemplo resumido del Dockerfile en dos etapas FROM node:18-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:alpine RUN rm -rf /usr/share/nginx/html/* COPY --from=builder /app/dist /usr/share/nginx/html EXPOSE 80 CMD nginx -g daemon off; Para probar localmente docker build -t gallery-app:latest . y docker run -d -p 80:80 --name gallery-app-cont gallery-app:latest
Paso 3 Automatizar con Jenkins En proyectos reales conviene automatizar todo con CI CD. Un pipeline en Jenkins puede clonar el repo, construir la imagen, escanearla, subirla a DockerHub y desplegar en EC2. Incluye un Jenkinsfile en el repositorio que define las etapas build scan push deploy y permite ejecutar esos pasos de forma reproducible.
Paso 4 Escaneo de seguridad con Trivy La seguridad es crítica. Antes de publicar la imagen se ejecuta trivy image gallery-app:latest para detectar vulnerabilidades en las imágenes base y dependencias. Mantener las bases actualizadas y revisar los hallazgos es parte del flujo de trabajo para reducir riesgos.
Paso 5 Publicar en DockerHub Si el escaneo es satisfactorio el pipeline etiqueta y sube la imagen a DockerHub con docker tag gallery-app:latest your-dockerhub-username/gallery-app:latest y docker push your-dockerhub-username/gallery-app:latest. En caso de fallo siempre puedes repetir estos pasos manualmente.
Paso 6 Desplegar en EC2 En la instancia EC2 puedes tirar la imagen y ejecutar el contenedor con docker pull your-dockerhub-username/gallery-app:latest y docker run -d -p 80:80 --name gallery-app-cont your-dockerhub-username/gallery-app:latest. Accede desde el navegador a la IP pública del servidor para ver la aplicación en producción.
Flujo general Ejecutar localmente npm run dev Build y servir con Docker Jenkins automatiza build scan push deploy La app corre en EC2 y es accesible por el puerto 80
En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida con experiencia en proyectos a medida, inteligencia artificial y ciberseguridad. Ofrecemos servicios integrales que incluyen desarrollo de aplicaciones y software a medida, consultoría en aplicaciones a medida, despliegues en la nube y arquitecturas seguras. Si trabajas con AWS o Azure podemos ayudarte a diseñar pipelines CI CD y entornos productivos consultando nuestros servicios cloud en Servicios cloud AWS y Azure.
Además de la implementación y automatización podemos integrar soluciones de inteligencia de negocio y Power BI, crear agentes IA y aplicar IA para empresas que mejoren procesos y análisis de datos. Complementamos con servicios de ciberseguridad y pentesting para proteger tus despliegues y activos digitales. Palabras clave importantes aplicadas en este proyecto incluyen aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi.
Con esta guía no solo construyes una Galería App, sino que aprendes a aplicar prácticas DevOps como CI CD, contenerización, escaneo de seguridad y despliegue en la nube para dejar tu aplicación lista para producción. Si quieres que Q2BSTUDIO te acompañe en un proyecto a medida o en la implementación de pipelines y seguridad, contáctanos y convertimos tu idea en una solución escalable y segura.