How do I monitor react app via prometheus while using multi-stage

  docker, dockerfile, prometheus, reactjs

I would like to integrate prometheus-client with my react app to monitor metrics but ı could not able to access metrics through http:localhost:9183/metrics whereas I can able to access my react-app via http://localhost:8080.. I am using multi-stage where expose react-app over nginx.

Here is multi-stage dockerfile

FROM node:12-alpine AS builder
WORKDIR /src/app
COPY . .
RUN npm install --prefer-offline --no-audit --progress=false
RUN npm run-script build
CMD [ "npm", "run", "start:docker" ]
EXPOSE 8080 9183

FROM nginx:1.17
COPY --from=builder /src/app/build/ /usr/share/nginx/html
RUN rm -v /etc/nginx/nginx.conf
ADD ./nginx.conf /etc/nginx/
RUN chgrp -R root /var/cache/nginx /var/run /var/log/nginx && 
    chmod -R 770 /var/cache/nginx /var/run /var/log/nginx

Here is nginx conf

worker_processes 1;

events { worker_connections 1024; }

http {
    include mime.types;
    sendfile on;
    server {
        listen 8080;
        server_name localhost;

        location / {
            root /usr/share/nginx/html/;
            index index.html;

            try_files $uri /index.html;
        }
    }
}

Here is the prom.js

const express = require('express');
const Prometheus = require('prom-client');

const app2 = express();

const collectDefaultMetrics = Prometheus.collectDefaultMetrics;
collectDefaultMetrics({ timeout: 5000 });

//Metrics endpoint
app2.get('/metrics', (req, res) => {
  res.set('Content-Type', Prometheus.register.contentType)
  res.end(Prometheus.register.metrics())
});

if (global.config.prometheus_enabled) {
  app2.listen(global.config.metrics_port, '0.0.0.0', () => {
    console.log("Api-ms is exposing metrics to Prometheus using port " + global.config.metrics_port);
  });
}

module.exports = app2;

Source: Docker Questions

LEAVE A COMMENT