Differences

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

--- apuntes:monitorizacion [2025/03/23 17:31] – [Configurar un dashboard en Grafana] Santiago Faci
+++ apuntes:monitorizacion [2025/03/25 00:30] (current) – [Crear un dashboard y visualizaciones] Santiago Faci
@@ Line 1: / Line 1: @@
 ====== Monitorización de aplicaciones ======
+<figure>
+{{grafana_logo.jpg?125 }}
+</figure>
+<figure>
+{{ prometheus_logo.png?220}}
+</figure>
 <figure>
@@ Line 7: / 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 43: / Line 53: @@
 </code>
-<code yaml>
+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>
 global:
   scrape_interval: 5s
@@ Line 56: / Line 73: @@
       - targets: ["host.docker.internal:8080"]
-</code>
+</file>
 ===== 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 66: / 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 97: / 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 150: / 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 157: / 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 171: / 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 178: / 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