Saltar a contenido

IRIS Frontend

Descripción

IRIS Frontend es la aplicación web interna de la plataforma IRIS. Es una SPA construida con Angular que da acceso a los módulos operativos de HTG Express: tráfico, agenda de transportes, facturación, riesgos, proveedores, clientes, paneles, mapas, multimail, configuración y seguimiento de expediciones.

La aplicación está desplegada en Kubernetes (EKS) en AWS, región eu-south-2. El artefacto final es una imagen Nginx que sirve los ficheros estáticos generados por Angular y recibe su configuración de entorno mediante un ConfigMap montado como assets/config/config.json.

Arquitectura

graph TB
    User([Usuario interno]) -->|HTTPS| ALB[Application Load Balancer]
    ALB --> Nginx

    subgraph Pod["Pod Frontend (EKS)"]
        Nginx[Nginx + Angular SPA]
    end

    style Pod fill:#f5f5f5,stroke:#333

Componentes

Componente Servicio AWS/K8s Función
Load Balancer ALB Entrada HTTPS y terminación TLS
Aplicación EKS Deployment Sirve la SPA Angular con Nginx
Configuración ConfigMap Genera assets/config/config.json con URLs y flags por entorno
Imagen ECR iris/frontend Imagen multi-stage Node + Nginx
Secretos ECR ExternalSecret + ECR Pull privado desde el registry compartido
Autoescalado HPA Activo en producción por CPU
Logs CloudWatch Logs Logs de contenedor vía Fluent Bit

Entornos

Entorno URL Namespace Cuenta AWS GitOps
Producción iris.htg-express.com infra-iris-frontend-pro 200702211100 pro/values.yaml
Test iris-test.htg-express.com infra-iris-frontend-test 913305982008 test/values.yaml
Dev iris-dev-li.htg-express.com infra-iris-frontend-dev 913305982008 dev/values.yaml
Dev Features iris-dev-features.htg-express.com infra-iris-frontend-dev-features 913305982008 dev-features/values.yaml

En EKS, producción tiene dos réplicas y HPA activo. Los entornos de no-producción usan una réplica fija.

Repositorios

Tipo Proyecto Bitbucket Repositorio Responsabilidad
Código IRIS htgexpress/front-end Código Angular, Dockerfile y pipeline
Helm chart IRIS | Helm charts htgexpress/helm-iris-frontend Chart común para frontends estáticos
GitOps IRIS | GitOps htgexpress/infra-iris-frontend Valores Helm por entorno

Estructura del repositorio GitOps

infra-iris-frontend/
├── dev/
│   └── values.yaml
├── dev-features/
│   └── values.yaml
├── test/
│   └── values.yaml
└── pro/
    └── values.yaml

Helm chart

IRIS Frontend usa el chart infra-iris-frontends (0.1.4), compartido con otros frontends estáticos. El chart crea un Deployment, Service, Ingress, ConfigMap, ServiceAccount, recursos de pull contra ECR y, si se habilita, un HorizontalPodAutoscaler.

El chart monta dos ConfigMaps en el contenedor:

ConfigMap Ruta Contenido
app /usr/share/nginx/html/assets/config/config.json Configuración Angular por entorno
nginx /etc/nginx/nginx.conf Configuración Nginx y cabeceras

CI/CD

El pipeline de Bitbucket sigue el mismo modelo GitOps que IRIS API: construye la imagen, la publica en ECR y actualiza el image.tag del entorno en el repositorio GitOps.

Automático (rama develop)

  1. Construye la imagen Docker con Dockerfile.
  2. Usa como tag los 7 primeros caracteres de BITBUCKET_COMMIT.
  3. Publica la imagen en ECR.
  4. Actualiza dev/values.yaml en infra-iris-frontend.
  5. ArgoCD sincroniza el namespace infra-iris-frontend-dev.

Manual

El pipeline manual-deploy permite desplegar una referencia Git a dev, dev-features, test o pro.

Variable Descripción Valores
GIT_REF Commit SHA, tag o rama current, SHA, tag, rama
ENVIRONMENT Entorno destino dev, dev-features, test, pro

Si la imagen ya existe en ECR, el pipeline evita reconstruirla y solo actualiza GitOps.

Imágenes Docker

La imagen se construye en dos etapas:

graph LR
    Node[node:22] --> Build[pnpm install + build-prod]
    Build --> Nginx[nginx:1.28.3-alpine3.23]
    Nginx --> Pod[Pod EKS]
Campo Valor
Repositorio ECR 203965864736.dkr.ecr.eu-west-1.amazonaws.com/iris/frontend
Dockerfile Dockerfile
Build runtime Node 22 + pnpm 10
Runtime Nginx 1.28.3 Alpine
Build Angular pnpm run build-prod
Directorio Nginx /usr/share/nginx/html
Config runtime assets/config/config.json montado desde ConfigMap

Configuración

La configuración no se compila dentro del bundle Angular. El chart escribe el bloque configuration.app del values.yaml en config.json, lo que permite cambiar endpoints y flags por entorno sin reconstruir la imagen.

Clave Uso
uri Endpoint principal de IRIS API
myUri / myhtgUrl Integración con MyHTG
chatUri Endpoint de IRIS Chat
mapsUri / googleMapsUri APIs de mapas
ediUri Integración EDI
wsHost, wsPusherKey, wsCluster, wsTLS Configuración WebSocket/Pusher
suiteCrmUrl Enlace a SuiteCRM
agenda*UpdateEvery, panelUpdateEvery, positionControlUpdateEvery Frecuencias de refresco de pantallas operativas

Recursos Kubernetes

Aplicación

Recurso Activación Detalle
Deployment Siempre Un contenedor Nginx sirviendo la SPA
Service Siempre ClusterIP puerto 80
Ingress Siempre ALB internet-facing con TLS y redirección HTTP a HTTPS
HPA autoscaling.enabled Activo en producción, target CPU 50%
ConfigMaps Siempre app y nginx
ServiceAccount ECR Siempre IRSA para leer imágenes del ECR compartido

Exposición externa

Parámetro Valor
IngressClass alb
Esquema internet-facing
Target type IP
Política TLS ELBSecurityPolicy-TLS13-1-2-2021-06
Redirección HTTP→HTTPS Habilitada
Health check /

Dimensionado

Entorno Réplicas HPA Requests Limits
Dev 1 No 100m CPU / 128Mi 100m CPU / 128Mi
Dev Features 1 No 100m CPU / 128Mi 100m CPU / 128Mi
Test 1 No 100m CPU / 128Mi 100m CPU / 128Mi
Pro 2-10 Sí 100m CPU / 128Mi 100m CPU / 128Mi

Operaciones

Health checks

El contenedor expone /healthz y el ALB usa / como health check.

curl -I https://iris.htg-express.com/
kubectl logs -n infra-iris-frontend-pro deployment/infra-iris-frontend-pro --tail=100 -f

Logs

Los logs de Nginx salen por stdout/stderr y Fluent Bit los envía al log group catch-all del cluster:

aws logs tail /aws/eks/htg-pro/aws-fluentbit-logs \
  --profile htg-pro --region eu-south-2 --follow \
  --filter-pattern 'infra-iris-frontend-pro'

Referencia técnica

Capa Tecnología Versión
Framework Angular 19.2
Build Node.js / pnpm 22 / 10
Runtime web Nginx 1.28.3 Alpine
Contenedor Docker Multi-stage
Orquestación Kubernetes (EKS) 1.32
CI/CD Bitbucket Pipelines -
GitOps ArgoCD -
Helm chart infra-iris-frontends 0.1.4
Registry Amazon ECR iris/frontend
Autoescalado HPA CPU Producción