[Monitoring]1.1 도커를 활용하여 React 애플리케이션 모니터링 환경 구축(server side)

Publish Date

2024/12/10

배경 및 목표

React 애플리케이션은 클라이언트 측에서 실행되어 자체적으로 서버 메트릭 데이터를 제공하지 않으므로, 애플리케이션의 성능과 상태를 실시간으로 모니터링하기 어렵다. 이를 해결하기 위해 Nginx를 프록시 서버로 활용하여 React 애플리케이션의 요청 트래픽과 상태 데이터를 수집하고, Nginx Exporter를 통해 Prometheus와 Grafana로 데이터를 시각화한다.

Prometheus는 Nginx Exporter로부터 메트릭을 수집하여 저장하고, Grafana는 이를 기반으로 HTTP 요청 트래픽, 상태 코드 분포, 활성 연결 수 등의 데이터를 시각화하여 서버 성능과 상태를 실시간으로 분석한다. 이 과정을 통해 React 애플리케이션과 Nginx의 상태와 성능을 효과적으로 모니터링하고, 문제 발생 시 신속히 파악하여 최적화와 안정성을 강화하는 것이 목표이다.

구성요소	설명
React 애플리케이션	클라이언트 요청을 처리하며, 자체적인 메트릭 제공 기능은 없음
Nginx	React 애플리케이션의 앞단에서 프록시 역할을 수행
Nginx Exporter	/nginx_status를 통해 제공된 Nginx 상태 데이터를 수집하고 Prometheus 포맷으로 변환
Prometheus	Nginx Exporter로부터 메트릭을 수집, 저장
Grafana	Nginx 상태 및 React 애플리케이션 관련 메트릭을 시각화

React 애플리케이션 모니터링 설정

개발환경

항목	설정
React	18.2.0 - image: node:18
Create React App (CRA)	5.0.1
Monitoring	Prometheus, Grafana
Exporter	Nginx Exporter (Prometheus) - image: nginx/nginx-prometheus-exporter
Dash Board	Nginx 대시보드

구조

coupon-project/
├── docker-compose.yml                        # 메인 Docker Compose 설정 파일
├── kakaoshop-FE/
│   └── default.conf                          # Nginx 상태 페이지 설정 파일
│
├── _monitoring/
│   ├── docker-compose.yml                    # 모니터링 환경 Docker Compose 파일
│   └── prometheus/
│       └── config/
│           └── prometheus.yml                # Prometheus 설정 파일
Java
복사

파일명	내용
docker-compose.yml	React 앱(Nginx)과 Nginx Exporter를 포함하여 전체 서비스 정의
default.conf	Nginx 상태 페이지 활성화 설정을 포함. /nginx_status 경로에서 메트릭을 노출
docker-compose.yml	Prometheus 및 Grafana 컨테이너를 정의하는 모니터링 환경 설정 파일
prometheus.yml	Prometheus가 Nginx Exporter 및 React 애플리케이션 메트릭을 수집하도록 설정

구현

0. 환경 사전 준비

•

React 애플리케이션 서버와 Prometheus 및 Grafana 설치 되어 있어야 한다. 

[Monitoring]00 도커를 활용하여 프로메테우스, 그라파나 환경 구축

1. (공통)Nginx 설정 - 상태 페이지 활성화

React 앱과 Nginx Exporter의 메트릭을 수집하기 위해 Nginx의 상태 페이지를 활성화 한다.

•

default.conf

server {
    # Nginx 상태 페이지 활성화
    location /nginx_status {
        stub_status;        # Nginx 상태를 노출
        allow all;          # 보안 설정 필요(적합한 IP만 허용 권장)
    }
}
Bash
복사

설정 항목	설명
stub_status	Nginx 상태 정보를 노출하는 디렉티브
allow all	모든 IP에서 접근 가능 (보안 설정 필요)

보안 강화 : allow all을 대신하여 내부 네트워크 IP 대역을 명시한다. 

# 내부 네트워크 IP 대역만 허용하도록 설정 
allow 192.168.1.0/24;
deny all;
YAML
복사

nginx 상태 페이지 확인:

http://localhost/nginx_status
Bash
복사

2.1 - 컨테이너 이미지로 설정하는 방법

Nginx Exporter를 추가하여 Nginx 상태 정보를 Prometheus에 전달한다.

•

docker-compose.yml

services:
  nginx-exporter:
    image: nginx/nginx-prometheus-exporter:latest
    container_name: nginx-exporter
    networks:
      - coupon-network
    ports:
      - "9113:9113"
    command:
      - -nginx.scrape-uri=http://kakao-fe/nginx_status
    depends_on:
      - kakao-fe
YAML
복사

설정 항목	설명
-nginx.scrape-uri	Nginx 상태 페이지 경로 지정 (/nginx_status)
depends_on	kakao-fe가 실행된 후 시작

Exporter 상태 확인:

http://localhost:9113/metrics
Bash
복사

nginx_up 메트릭은 Nginx 상태를 나타냄. 값이 1이면 성공적으로 상태 정보를 가져옴.

2.2. 도커 파일로 이미지 마는 방법

# STEP1. Build React App
FROM --platform=$BUILDPLATFORM node:18 AS builder
WORKDIR /app
COPY package.json package-lock.json ./

# 환경변수 설정
ENV REACT_APP_SHOP_API_URL=http://localhost:8080
ENV REACT_APP_COUPON_API_URL=http://localhost:8081

RUN npm ci
COPY . .
RUN npm run build

# STEP2: Serve with Nginx
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
COPY ./default.conf /etc/nginx/conf.d/default.conf

# Nginx Exporter 설치
RUN apk add --no-cache curl \
    && curl -L https://github.com/nginxinc/nginx-prometheus-exporter/releases/download/v1.4.0/nginx-prometheus-exporter_1.4.0_linux_arm64.tar.gz \
    | tar -xz -C /usr/local/bin \
    && mv /usr/local/bin/nginx-prometheus-exporter /usr/local/bin/nginx-exporter

EXPOSE 80 9113
CMD ["sh", "-c", "nginx -g 'daemon off;' & nginx-exporter -nginx.scrape-uri=http://127.0.0.1/nginx_status"]
Bash
복사

3. Prometheus 설정

Prometheus가 Nginx Exporter를 통해 메트릭을 수집하도록 설정한다.

•

prometheus.yml 

scrape_configs:
  - job_name: 'nginx'
    static_configs:
      - targets: ['nginx-exporter:9113']  # Nginx Exporter 연결
YAML
복사

설정 항목	설명
job_name	수집 작업 이름
targets	Nginx Exporter 주소 (:9113)

Prometheus 컨테이너를 재시작한다.

docker-compose restart prometheus
Shell
복사

prometheus UI 쿼리 확인:

Prometheus UI (http://<Prometheus-Server-IP>:9090)접근한다.

nginx_up 쿼리를 실행하여 메트릭 스크랩의 상태를 표시한다. 성공(1), 실패(0)

Plain Text
복사

4. Grafana 설정

데이터 소스 추가

Grafana 접속:  http://<Grafana-Server-IP>:3000

Data sources › Add data source > Prometheus 선택

URL 지정 

•

URL: http://<Prometheus-Server-IP>:9090 (Docker 네트워크 기준) 

host.docker.internal:9090

prometheus:9090

host.docker.internal은 Docker 컨테이너에서 호스트 머신에 접근할 수 있도록 제공되는 특별한 DNS 이름이다. host.docker.internal을 사용하면, 컨테이너에서 호스트 머신의 IP 주소를 명시하지 않고도 접근할 수 있다.

•

로컬 환경에서 Docker 컨테이너와 호스트 간 통신을 위해 host.docker.internal이 필요할 수 있다.

•

그러나 Prometheus와 Grafana가 동일한 Docker 네트워크에서 실행 중이라면, http://prometheus:9090을 사용하는 것이 권장된다.

Save & Test 클릭

대시보드 설정하기

Dashboards > New > Import 선택

Grafana에서 대시보드 가져오기 

Nginx 에서 제공하는 대시보드 템플릿을 사용할 것이다. Json 파일을 다운로드 받거나 코드를 복사한다.

nginx-prometheus-exporter/grafana at main · nginxinc/nginx-prometheus-exporter

NGINX Prometheus Exporter for NGINX and NGINX Plus - nginxinc/nginx-prometheus-exporter

https://github.com/nginxinc/nginx-prometheus-exporter/tree/main/grafana

•

Json 파일을 추가하거나 Json 코드를 입력한다. 

대시보드 Json 파일 추가

대시보드 Json 코드 추가

데이터 소스 설정하기

위에서 설정한 데이터 소스를 지정한다.

대시보드 확인 

결론

주요 메트릭

•

Active Connections: 현재 연결된 클라이언트 수

•

Handled Requests: 처리된 요청 수

•

Request Rate: 초당 요청 수

확인 과정