METRIC 시각화하기

React 로 표현하기

(1) Grafana Panel 가져오기
Grafana 에서 Panel 만들어보기 + PromQL 다뤄보기
(2) ChartJS로 직접 표현하기

실습 환경

1개 개발 컨테이너
React 개발
1개 테스트 VM
Prometheus + Grafana + NodeExporter or cadvisor

프로메테우스 + 그라파나 + cadvisor

공식 홈페이지에서 다운받기

dev-vm $ sudo mv prometheus-…… /opt/
dev-vm $ cd /opt/
dev-vm $ sudo ln -sf prometheus-…… prometheus

• 심볼릭 링크로 만드는 것
• ln => soft(링크 생성) or hard(동일 파일)

SYSTEMD 로 관리하기

/opt/prometheus/
prometheus 바이너리 파일 있음
prometheus 서비스 계정 만들기
dev-vm $ sudo useradd prometheus

prometheus.service

[Unit]
Description=Prometheus Server
Wants=network-online.target
After=network-online.target
[Service]
User=prometheus
Group=prometheus
Type=simple

ExecStart=/opt/prometheus/prometheus \
--config.file /etc/prometheus/prometheus.yml \
--storage.tsdb.path /var/lib/prometheus \
--web.console.templates=/opt/prometheus/consoles \
--web.console.libraries=/opt/prometheus/console_libraries
[Install]
WantedBy=multi-user.target

PROMETHEUS.SERVICE 이동

dev-vm $ sudo mv prometheus.service /etc/system/sysmtem/

필요한 경로 준비

chown -R prometheus:prometheus /opt/prometheus

• 권한 부여

dev-vm $ chown -R prometheus:prometheus /opt/prometheus
dev-vm $ mkdir -p /var/lib/prometheus
dev-vm $ chown prometheus:prometheus /var/lib/prometheus

SYSTEMD 설정 다시 읽기

dev-vm $ sudo systemctl daemon-reload

프로메테우스 설정

프로메테우스 설정
dev-vm $ sudo cp /opt/prometheus/prometheus.yml /etc/prometheus/
dev-vm $ sudo mkdir -p /etc/prometheus

재부팅 이후에도 자동으로 실행되게 하는 법

[Unit]
Description=Prometheus Service Container
Requires=docker.service
After=docker.service
[Service]
ExecStart=/usr/bin/docker run -p 9090:9090 --rm --name prometheus \ 
-v /etc/prometheus/:/etc/prometheus/ \
prom/prometheus --config.file /etc/prometheus/prometheus.yml
ExecStop=/usr/bin/docker stop prometheus // stop을 하면 자동삭제를 한다.
[Install]
WantedBy=multi-user.target

DOCKER 컨테이너 METRIC 추적하기

/etc/docker/daemon.json 수정

DAEMON.JSON

{
… 기존 설정,
"metrics-addr" : "127.0.0.1:9323"
}

Docker 재시작

dev-vm $ sudo systemctl restart docker

dev-vm $ sudo netstat -natp ==> docker 확인

PROMETHEUS 가 읽도록 수정

- job_name: 'docker'
# metrics_path defaults to '/metrics'
# scheme defaults to 'http'.
static_configs:
- targets: ['localhost:9323']

IP 주소 접근 불가 문제

해결 방법 (1)
prometheus 컨테이너의 네트워크를 host와 일치시키기 // 호스트는 9090포트 사용 불가

생략
[Service]
ExecStart=/usr/bin/docker run -p 9090:9090 --rm --name prometheus \
--net=host \ // systemd 위임
-v /etc/prometheus/:/etc/prometheus/ \
prom/prometheus --config.file /etc/prometheus/prometheus.yml
ExecStop=/usr/bin/docker stop prometheus
...... 생략

해결 방법 (2)
docker metric 을 127.0.0.1 이 아닌
컨테이너에서 접근가능한 NIC IP로 내보내기
해당 IP 로 스크랩하도록 prometheus.yml 수정

DAEMON.JSON 수정
{
… 기존 설정,
"metrics-addr" : "192.168.36.11:9323"
}

PROMETHEUS.YML 수정
- job_name: 'docker'
# metrics_path defaults to '/metrics'
# scheme defaults to 'http'.
static_configs:
- targets: ['192.168.36.11:9323']

Promql 테스트

• 컨테이너 상태 : 러닝중

CADVISOR를 추가하기

prometheus 와 cadvisor를 docker compose 로 실행하기

COMPOSE 파일 위치 결정

/etc/prometheus/docker-compose.yml

version: '3.2'
services:
prometheus:
image: prom/prometheus
container_name: prometheus
ports:
- 9090:9090
command:
- --config.file=/etc/prometheus/prometheus.yml
volumes:
- .:/etc/prometheus:ro
depends_on:
- cadvisor

cadvisor:
image: gcr.io/cadvisor/cadvisor:latest
container_name: cadvisor
ports:
- 8080:8080
volumes:
- /:/rootfs:ro
- /var/run:/var/run:rw
- /sys:/sys:ro
- /var/lib/docker/:/var/lib/docker:ro

PROMETHEUS.YML 에 CADVISOR 추가

- job_name: 'cadvisor'
  static_configs:
    - targets: ['cadvisor:8080'] ==> 컴포즈 수준에서 DNS 서비스 제공

COMPOSE 를 SYSTEMD 서비스 등록

dev-vm $ sudo systemctl disable --now prometheus.docker.service
기존 prometheus.docker 서비스 중단

COMPOSE 서비스 추가

/etc/systemd/system/prometheus.compose.service

[Unit]
Description=Prometheus Container Compose
Requires=docker.service
After=docker.service
[Service]
Type=oneshot
RemainAfterExit=yes
WorkingDirectory=/etc/prometheus
ExecStart=/usr/bin/docker compose up -d
ExecStop=/usr/bin/docker compose down
TimeoutStartSec=0
[Install]
WantedBy=multi-user.target

/etc/systemd/system/prometheus.compose.service

서비스 적용

sudo systemctl enable --now prometheus.compose.service

Grafana 추가하기

[Unit]
Description=Grafana Service Container
Requires=docker.service // 필요한 것
After=docker.service  // 실행순서
[Service]
ExecStart=/usr/bin/docker run -p 3000:3000 --rm --name grafana \
-v grafana:/var/lib/grafana \
-e GF_SECURITY_ADMIN_USER=admin -e GF_SECURITY_ADMIN_PASSWORD=secret \
grafana/grafana
ExecStop=/usr/bin/docker stop grafana
[Install]
WantedBy=multi-user.target

systemctl start grafana.service

React로 Metric Card 만들기

CPUPanel.js

function CPUPanel() {
    return (
        <div className="CPUPanel">
            <iframe src="http://localhost:3100/d-solo/htoVWdxGt/docker-cadvisor?orgId=1&refresh=5s&from=1690569521196&to=1690570421196&panelId=2" width="450" height="200" frameborder="0">
            </iframe>
        </div>
    );
}

export default CPUPanel;

• 페이지가 안나오는 원인 : iframe 은 보안상 취약점에 해당함

GRAFANA에서 설정

allow_embedding = true 필요

    function CPUPanel() {
        return (
            <div className="CPUPanel">
                <iframe src="http://localhost:3100/d-solo/htoVWdxGt/docker-cadvisor?orgId=1&refresh=5s&from=1690570670789&to=1690571570789&panelId=16" width="450" height="200" frameborder="0">   
                </iframe>
            </div>
        );
    }

    export default CPUPanel;

> npm start

Chart.js

dev-react $ npm install --save chart.js react-chartjs-2

https://github.com/chartjs/awesome

npm --save install chartjs-plugin-datasource-prometheus \
chartjs-adapter-date-fns