Differences

This shows you the differences between two versions of the page.

--- apuntes:monitorizacion [2025/03/23 17:42] – [Monitorización de aplicaciones] Santiago Faci
+++ apuntes:monitorizacion [2025/03/25 00:30] (current) – [Crear un dashboard y visualizaciones] Santiago Faci
@@ Line 2: / Line 2: @@
 <figure>
-{{ grafana_logo.jpg }}
+{{grafana_logo.jpg?125 }}
 </figure>
 <figure>
-{{ prometheus_logo.png }}
+{{ prometheus_logo.png?220}}
 </figure>
@@ Line 15: / Line 15: @@
 ===== Instalar Grafana y Prometheus =====
+Lanzaremos [[https://es.wikipedia.org/wiki/Grafana|Grafana]] y [[https://en.wikipedia.org/wiki/Prometheus_(software)|Prometheus]] como contenedores docker, configurados en una red para que puedan verse el uno al otro. Al mismo tiempo publicaremos los puertos sobre la máquina local para poder acceder a sus interfaces web:
 <code yaml>
@@ Line 50: / Line 52: @@
     driver: bridge
 </code>
+Hay que tener en cuenta que:
+  * ''Grafana'' quedará accesible en http://localhost:3000
+  * ''Prometheus'' quedará accesible en http://localhost:9090
+A su vez dejaremos este fichero, ''prometheus.yml'' en la carpeta raíz de nuestro proyecto. Ahi configuramos donde escuchan prometheus y el servicio que estamos monitorizando:
 <file yaml prometheus.yml>
@@ Line 67: / Line 76: @@
 ===== Integrar Grafana con Node.js =====
+Ahora tendremos que facilitar un endpoint ''/metrics'' en nuestro servicio para que Prometheus pueda extraer las métricas de nuestro servicio haciendo peticiones al mismo.
+Primero, añadimos la librería de Prometheus para nuestra aplicación:
 <code javascript>
@@ Line 74: / Line 87: @@
   },
 </code>
+Y definimos una serie de métricas en el fichero ''config/metrics.js''. Más adelante las haremos accesible como respuesta en el endpoint ''/metrics'' que vamos a publicar:
 <file javascript config/metrics.js>
@@ Line 105: / Line 120: @@
 };
 </file>
+En nuestro fichero principal, ''app.js'', configuraremos lo necesario para recoger las métricas que hemos configurado antes y publicaremos el nuevo endpoint ''/metrics'' que las dejará accesibles para Prometheus, que es quién las recoge y almacena.
+También llamaremos a ''promClient.collectDefaultMetrics()'' que recoge algunas métricas ya establecidas por defecto que quizás nos pueda interesar también mostrar en los Dashboards que haremos con Grafana.
 <file javascript apps.js>
@@ Line 158: / Line 177: @@
 </file>
-En http://localhost:8080/metrics ya podremos visualizar las métricas (como texto plano). Es el endpoint que usaremos para visualizar gráficas en Grafana:
+En http://localhost:8080/metrics ya podremos visualizar las métricas (como texto plano)
 <figure>
@@ Line 165: / Line 184: @@
 </figure>
 ===== Comprobar la configuración de Prometheus =====
+Antes de seguir, para comprobar que todo está funcionando bien, podemos echar un vistazo en Prometheus y verificar que tiene acceso a las métricas que nuestro servicio publica a través del endpoint ''/metrics'' que acabamos de configurar:
 Status -> Targets
@@ Line 179: / Line 200: @@
 ==== Añadir Prometheus como connection ====
-Connection -> Add new connection -> Prometheus
+Ahora, accediendo al interfaz web de Grafana (http://localhost:3000), configuraremos a Prometheus como un nuevo conector ya que proporcionará datos para los Dashboards que queremos diseñar en Grafana.
+Accedemos a ''Connection -> Add new connection -> Prometheus''
 <figure>
@@ Line 186: / Line 209: @@
 </figure>
-Save & test
+Y pulsamos ''Save & test'' para darlo por configurado
 ==== Crear un dashboard y visualizaciones ====
+El último paso será crear un nuevo Dashboard y añadir todas las visualizaciones (gráficos) que precisemos. Por ejemplo:
+  * Peticiones por segundo
+  * Tasa de fallos
+  * Códigos de estado como respuestas
+  * Tiempo de respuesta
+<figure>
+{{ my_dashboard.png }}
+<caption>Grafana dashboard</caption>
+</figure>
 ----
 (c) 2025 Santiago Faci