Monitor a containerized ReactJs Web Application (with Nginx) with Elastic APM

[toduythienluong]

Hi,

I have a frontend application with ReactJs, containerized with nginx, my dockerfile as below, this is supposed to be be deployed on k8s. I want to integrate the web application with Elastic APM, could you help a guide?

#Stage 1
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

#Stage 2
FROM nginx:1.19.0
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=builder /app/build /usr/share/nginx/html
# COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80/tcp
ENTRYPOINT ["nginx", "-g", "daemon off;"]

[rtwolfe94022 (Tim Wolfe)]

To integrate Elastic APM with your containerized ReactJS web application served via Nginx, follow these steps:

1. Install the Elastic APM RUM agent in your React application using npm.
2. Initialize the RUM agent in your main React component, configuring it with your service name and APM server URL.
3. Ensure your Kubernetes deployment includes the APM server URL for the agent to send data.
4. Modify your Nginx configuration to allow CORS for the APM server URL to enable data sending from the browser.
5. Deploy your application and verify that performance data is appearing in the Elastic APM dashboard.

This setup allows you to monitor your frontend application's performance directly from users' browsers.