使用 Prometheus 监控 Angular 前端

Question

我目前正在使用 Prometheus 通过运行状况检查和不同的计数器来监控我的 Java 后端，效果非常好！

但是，我正在努力寻找有关如何对用 Angular (TypeScript) 编写的前端执行相同操作的信息。以前有人做过类似的事情吗？

Answer 1

这是如何监控此类用例的示例：

使用此文件，我设置我的前端应用程序和 nginx prometheus 导出器，以适当的格式公开 Prometheus 指标：docker-compose.yml

version: "3.9"
services:
  web:
    build: .
    ports:
      - "3000:3000"
  nginx-exporter:
    image: "nginx/nginx-prometheus-exporter:latest"
    command: ["-nginx.scrape-uri=http://web:3000/metrics"]
    ports:
      - "9113:9113"

将此部分添加到您的 nginx.conf 文件中

location /metrics {
    stub_status on;
}

作为整个文件的一部分：

pid /tmp/nginx.pid;

#Provides the configuration file context in which the directives that affect connection processing are specified.
events {
    # Sets the maximum number of simultaneous connections that can be opened by a worker process.
    worker_connections 8000;
    # Tells the worker to accept multiple connections at a time
    multi_accept on;
}

http {
    # what times to include
    include       /etc/nginx/mime.types;
    # what is the default one
    default_type  application/octet-stream;

    # Sets the path, format, and configuration for a buffered log write
    log_format compression '$remote_addr - $remote_user [$time_local] '
        '"$request" $status $upstream_addr '
        '"$http_referer" "$http_user_agent"';

    server {
        # listen on port 3000
        listen 3000;
        # save logs here
        access_log /var/log/nginx/access.log compression;

        # where the root here
        root /usr/share/nginx/html;
        # what file to server as index
        index index.html index.htm;

        location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to redirecting to index.html
            try_files $uri $uri/ /index.html;
        }
        
        location /metrics {
            stub_status on;
        }

        # Media: images, icons, video, audio, HTC
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
          expires 1M;
          access_log off;
          add_header Cache-Control "public";
        }

        # Javascript and CSS files
        location ~* \.(?:css|js)$ {
            try_files $uri =404;
            expires 1y;
            access_log off;
            add_header Cache-Control "public";
        }

        # Any route containing a file extension (e.g. /devicesfile.js)
        location ~ ^.+\..+$ {
            try_files $uri =404;
        }
    }
}

然后在你的普罗米修斯配置文件中添加这个新作业：

  - job_name: 'nginx'
    static_configs:
    - targets: ['<machine_ip>:9113']

在这里您可以找到一个示例仪表板