홈페이지에 Grafana 대시보드 달기 (1) — Prometheus·Docker 로 세우고 사이트 안에 끼워 넣기

인터넷 ──443──> Caddy ─┬─> 127.0.0.1:40000  앱 (Next.js)
                       ├─> 127.0.0.1:53000  Grafana   (/grafana/*)
                       └─> 127.0.0.1:40003  방문자 통계

        Prometheus ─┬─> host.docker.internal:59200  Caddy 지표
        (컨테이너)   ├─> node-exporter:9100           서버 자원
                    ├─> cadvisor:8080                컨테이너
                    ├─> postgres-exporter:9187       DB
                    └─> blackbox-exporter:9115       바깥에서 찔러 보기

mkdir -p ~/monitoring/{prometheus,blackbox,grafana/provisioning/{datasources,dashboards},grafana/dashboards}
cd ~/monitoring

cat > .env <<'EOF'
GF_SECURITY_ADMIN_PASSWORD=여기에-긴-무작위-문자열
POSTGRES_EXPORTER_DSN=postgresql://monitor:암호@host.docker.internal:55432/postgres?sslmode=disable
EOF
chmod 600 .env

openssl rand -base64 24

create user monitor with password '암호';
grant pg_monitor to monitor;

services:
  grafana:
    image: grafana/grafana-oss:latest
    container_name: grafana
    ports:
      # 127.0.0.1 을 꼭 붙인다. 안 붙이면 도커가 0.0.0.0 에 열어
      # 인터넷 전체에 공개된다.
      - '127.0.0.1:53000:3000'
    volumes:
      - grafana_data:/var/lib/grafana
      - ./grafana/provisioning:/etc/grafana/provisioning:ro
      - ./grafana/dashboards:/var/lib/grafana/dashboards:ro
    environment:
      - GF_SECURITY_ADMIN_PASSWORD=${GF_SECURITY_ADMIN_PASSWORD:?.env 에 없습니다}
      - GF_SECURITY_ADMIN_USER=관리자-이름
      # 4절에서 설명한다. 사이트 도메인 밑 /grafana 로 들어오게 하는 값들
      - GF_SERVER_DOMAIN=example.duckdns.org
      - GF_SERVER_ROOT_URL=https://example.duckdns.org/grafana/
      - GF_SERVER_SERVE_FROM_SUB_PATH=true
      - GF_SECURITY_ALLOW_EMBEDDING=true
      # 문지기는 Caddy 다. Grafana 자체 로그인은 끈다 (4절)
      - GF_AUTH_ANONYMOUS_ENABLED=true
      - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin
      - GF_AUTH_DISABLE_LOGIN_FORM=true
      - GF_AUTH_DISABLE_SIGNOUT_MENU=true
      - GF_DASHBOARDS_DEFAULT_HOME_DASHBOARD_PATH=/var/lib/grafana/dashboards/myhome.json
    restart: unless-stopped

  prometheus:
    image: prom/prometheus:v3.1.0
    container_name: prometheus
    volumes:
      - ./prometheus/prometheus.yml:/etc/prometheus/prometheus.yml
      - prometheus_data:/prometheus
    command:
      - '--config.file=/etc/prometheus/prometheus.yml'
      - '--storage.tsdb.path=/prometheus'
    ports:
      - '127.0.0.1:59090:9090'
    # 호스트에서 도는 Caddy 를 긁으려면 컨테이너에서 호스트를 부를 이름이
    # 필요하다. host-gateway 는 도커가 브리지 게이트웨이 주소로 바꿔 준다.
    # 172.18.0.1 처럼 직접 적으면 네트워크를 다시 만들 때 어긋난다.
    extra_hosts:
      - 'host.docker.internal:host-gateway'
    restart: unless-stopped

  node-exporter:
    image: prom/node-exporter:v1.12.1
    container_name: node-exporter
    # 지표에 붙는 이름이 된다. 서버가 여러 대면 구분에 쓴다
    hostname: ubuntu-arm
    volumes:
      - /proc:/host/proc:ro
      - /sys:/host/sys:ro
      - /:/rootfs:ro
    command:
      - '--path.procfs=/host/proc'
      - '--path.sysfs=/host/sys'
      - '--path.rootfs=/rootfs'
    ports:
      - '127.0.0.1:59100:9100'
    restart: unless-stopped

  cadvisor:
    image: ghcr.io/google/cadvisor:v0.60.1
    container_name: cadvisor
    privileged: true
    devices:
      - /dev/kmsg
    volumes:
      - /:/rootfs:ro
      - /var/run:/var/run:ro
      - /sys:/sys:ro
      - /var/lib/docker/:/var/lib/docker:ro
      - /dev/disk/:/dev/disk:ro
    ports:
      - '127.0.0.1:58080:8080'
    restart: unless-stopped

  postgres-exporter:
    image: quay.io/prometheuscommunity/postgres-exporter:v0.17.1
    container_name: postgres-exporter
    environment:
      DATA_SOURCE_NAME: ${POSTGRES_EXPORTER_DSN:?.env 에 없습니다}
    ports:
      - '127.0.0.1:59187:9187'
    extra_hosts:
      - 'host.docker.internal:host-gateway'
    restart: unless-stopped

  blackbox-exporter:
    image: prom/blackbox-exporter:v0.27.0
    container_name: blackbox-exporter
    volumes:
      - ./blackbox/blackbox.yml:/etc/blackbox_exporter/config.yml:ro
    command:
      - '--config.file=/etc/blackbox_exporter/config.yml'
    ports:
      - '127.0.0.1:59115:9115'
    restart: unless-stopped

volumes:
  grafana_data:
  prometheus_data:

modules:
  http_2xx:
    prober: http
    timeout: 10s
    http:
      # 리다이렉트를 따라가지 않는다. 302 도 "살아 있음" 으로 본다.
      # 따라가면 로그인 화면까지 가서 응답 시간이 부풀려진다.
      follow_redirects: false
      valid_status_codes: [200, 301, 302, 303, 307, 308]
      valid_http_versions: ["HTTP/1.1", "HTTP/2.0"]
      preferred_ip_protocol: ip4
      ip_protocol_fallback: false

  # 비밀번호로 막힌 주소용. 401 이 나오면 "살아 있고 제대로 막고 있음" 이다.
  http_401:
    prober: http
    timeout: 10s
    http:
      follow_redirects: false
      valid_status_codes: [401]
      valid_http_versions: ["HTTP/1.1", "HTTP/2.0"]
      preferred_ip_protocol: ip4
      ip_protocol_fallback: false

global:
  scrape_interval: 15s

scrape_configs:
  - job_name: 'prometheus'
    static_configs:
      - targets: ['localhost:9090']

  - job_name: 'node-exporter'
    static_configs:
      # 같은 compose 네트워크 안이라 컨테이너 이름으로 닿는다
      - targets: ['node-exporter:9100']
        labels:
          instance: 'ubuntu-arm'

  - job_name: 'cadvisor'
    static_configs:
      - targets: ['cadvisor:8080']

  - job_name: 'postgres'
    static_configs:
      - targets: ['postgres-exporter:9187']
        labels:
          instance: 'myhome-postgres'

  # 호스트에서 도는 Caddy. 3절에서 이 포트를 연다.
  - job_name: 'caddy'
    static_configs:
      - targets: ['host.docker.internal:59200']
        labels:
          instance: 'ubuntu-arm'

  # 앱 안쪽 지표. 6절에서 만든다.
  - job_name: 'myhome-app'
    static_configs:
      - targets: ['host.docker.internal:59201']
        labels:
          instance: 'myhome-app'

  # 바깥에서 주소를 찔러 본다
  - job_name: 'blackbox-http'
    metrics_path: /probe
    params:
      module: [http_2xx]
    static_configs:
      - targets:
          - https://example.duckdns.org
          - https://example.duckdns.org/about
          - https://example.duckdns.org/blog
          - https://umami.example.duckdns.org/login
    relabel_configs:
      - source_labels: [__address__]
        target_label: __param_target
      - source_labels: [__param_target]
        target_label: instance
      - target_label: __address__
        replacement: blackbox-exporter:9115

  # 비밀번호로 막은 주소. 401 이 나와야 정상이다.
  - job_name: 'blackbox-auth'
    metrics_path: /probe
    params:
      module: [http_401]
    static_configs:
      - targets:
          - https://example.duckdns.org/grafana/
          - https://prometheus.example.duckdns.org
    relabel_configs:
      - source_labels: [__address__]
        target_label: __param_target
      - source_labels: [__param_target]
        target_label: instance
      - target_label: __address__
        replacement: blackbox-exporter:9115

docker compose up -d
docker compose ps

curl -s localhost:59090/api/v1/targets?state=active \
  | python3 -c "import sys,json;[print(t['labels']['job'], t['health'], t.get('lastError','')) for t in json.load(sys.stdin)['data']['activeTargets']]"

{
	metrics {
		per_host
	}
}

:59200 {
	@docker remote_ip 172.16.0.0/12 192.168.0.0/16 10.0.0.0/8 127.0.0.1/32
	handle @docker {
		metrics /metrics
	}
	respond 403
}

ss -ltn | grep -E ':(4|5)[0-9]{4}'   # 다 127.0.0.1 인지 본다

sudo caddy validate --config /etc/caddy/Caddyfile   # 문법부터 본다
sudo systemctl reload caddy                          # 연결이 끊기지 않는다
curl -s localhost:59200/metrics | head -5
docker compose restart prometheus

grafana.example.duckdns.org {
	redir https://example.duckdns.org/grafana{uri} permanent
}

example.duckdns.org {
	encode zstd gzip

	@grafana path /grafana /grafana/*
	@site not path /grafana /grafana/*

	# 사이트 쪽 보안 헤더
	header @site {
		Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"
		X-Frame-Options "DENY"
		X-Content-Type-Options "nosniff"
		Referrer-Policy "strict-origin-when-cross-origin"
		Permissions-Policy "camera=(), microphone=(), geolocation=()"
		Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; object-src 'none'"
		-Server
	}

	# Grafana 쪽은 프레임 관련만 다르다
	header @grafana {
		Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"
		X-Frame-Options "SAMEORIGIN"
		X-Content-Type-Options "nosniff"
		Referrer-Policy "strict-origin-when-cross-origin"
		-Server
	}

	# 문지기: 요청마다 앱에 먼저 묻는다
	handle @grafana {
		forward_auth 127.0.0.1:40000 {
			uri /admin/monitoring/authorize
		}
		reverse_proxy 127.0.0.1:53000
	}

	reverse_proxy 127.0.0.1:40000
}

// app/admin/monitoring/authorize/route.ts
import { isAdmin } from "@/lib/auth";

export const dynamic = "force-dynamic";

export async function GET() {
  if (!(await isAdmin())) {
    return new Response("관리자만 볼 수 있습니다.\n", {
      status: 401,
      headers: { "content-type": "text/plain; charset=utf-8" },
    });
  }
  return new Response(null, { status: 200 });
}

# 로그아웃 상태 = 401
curl -s -o /dev/null -w '%{http_code}\n' https://example.duckdns.org/grafana/

// app/admin/monitoring/page.tsx
import type { Metadata } from "next";
import { redirect } from "next/navigation";
import MonitoringDashboard from "@/components/admin/MonitoringDashboard";
import { isAdmin } from "@/lib/auth";

export const metadata: Metadata = {
  title: "감시",
  robots: { index: false, follow: false },
};

export const dynamic = "force-dynamic";

const DASHBOARD = "/grafana/d/myhome/myhome";

export default async function AdminMonitoringPage() {
  if (!(await isAdmin())) redirect("/admin");

  // 대시보드는 넓고 높아야 읽힌다. 본문 폭을 벗어나게 둔다.
  return (
    <div className="mx-auto -mt-8 w-full max-w-[110rem] px-5">
      <MonitoringDashboard title="감시" dashboard={DASHBOARD} />
    </div>
  );
}

// components/admin/MonitoringDashboard.tsx
"use client";

import { useTheme } from "@/components/useTheme";

export default function MonitoringDashboard({
  title,
  dashboard,
}: {
  title: string;
  dashboard: string;
}) {
  const theme = useTheme();
  // kiosk 는 Grafana 자체 메뉴와 위쪽 막대를 숨긴다
  const src = theme ? `${dashboard}?kiosk&theme=${theme}` : null;
  const frame =
    "h-[calc(100vh-11rem)] min-h-[30rem] w-full rounded-lg border border-border";

  return (
    <>
      <div className="mb-3 flex items-baseline justify-between gap-4">
        <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
          {title}
        </h1>
        <a href={src ?? dashboard} target="_blank" rel="noreferrer">
          새 창에서 ↗
        </a>
      </div>
      {src ? (
        <iframe src={src} title="대시보드" className={frame} />
      ) : (
        // 테마를 알기 전에 그리면 다크로 한 번 뜬 뒤 다시 불러온다.
        // 자리만 잡아 두고 기다린다.
        <div className={frame} aria-hidden="true" />
      )}
    </>
  );
}

// components/useTheme.ts
"use client";

import { useSyncExternalStore } from "react";

export type Theme = "light" | "dark";

/** 직접 전환할 때 알리는 신호. OS 설정 변경과 함께 구독한다. */
export const THEME_EVENT = "themechange";

export function readTheme(): Theme {
  const attr = document.documentElement.getAttribute("data-theme");
  if (attr === "light" || attr === "dark") return attr;
  return window.matchMedia("(prefers-color-scheme: dark)").matches
    ? "dark"
    : "light";
}

export function subscribe(onChange: () => void) {
  const media = window.matchMedia("(prefers-color-scheme: dark)");
  media.addEventListener("change", onChange);
  window.addEventListener(THEME_EVENT, onChange);
  return () => {
    media.removeEventListener("change", onChange);
    window.removeEventListener(THEME_EVENT, onChange);
  };
}

/**
 * 서버에서는 테마를 알 수 없다. 첫 렌더에서는 null 이고 하이드레이션 뒤에
 * 실제 값이 온다 — 그렇게 해야 서버와 클라이언트가 어긋나지 않는다.
 */
export function useTheme() {
  return useSyncExternalStore<Theme | null>(subscribe, readTheme, () => null);
}

# 컨테이너 여섯 개가 다 떠 있나
docker compose ps

# 타깃이 다 UP 인가
curl -s localhost:59090/api/v1/targets?state=active \
  | python3 -c "import sys,json;d=json.load(sys.stdin)['data']['activeTargets'];print(sum(1 for t in d if t['health']=='up'),'/',len(d))"

# 지표가 실제로 들어오나
curl -sG localhost:59090/api/v1/query --data-urlencode 'query=up' | head -c 200

$ caddy hash-password
Enter password:
$2a$14$....(해시)....

prometheus.example.duckdns.org {
	basic_auth {
		관리자-이름 $2a$14$....(해시)....
	}
	reverse_proxy 127.0.0.1:59090
}

chmod 600 ~/monitoring/.env
git check-ignore -v .env    # 무시 목록에 있는지 확인

docker compose pull grafana && docker compose up -d grafana

cp -r ~/repo/infra/monitoring/{docker-compose.yml,prometheus,blackbox,grafana} ~/monitoring/
cd ~/monitoring
docker compose up -d                    # compose 를 고쳤을 때
docker compose restart prometheus       # prometheus.yml 만 고쳤을 때