🔍 Spring Boot + React로 만드는 API 모니터링 & 알림 시스템 (MVP)

Nolrimbo·2025년 9월 4일

MariaDB React SIDEPROJECT Springboot monitoring slack typescript vite webclient

포트폴리오

목록 보기

11/21

HTTP/HTTPS 엔드포인트를 주기적으로 체크해서 가용성/속도를 기록하고, 연속 실패 시 Slack으로 알림을 보내는 경량 모니터링 도구를 만들었습니다.
Spring Boot + MariaDB + React 기반이며, 대시보드로 현재 상태를 한눈에 볼 수 있어요.

TL;DR

모니터 등록 → 주기적 체크 → 결과 기록 → 연속 실패 시 Incident 오픈 & Slack 알림 → 성공 1회 시 자동 종료
백엔드: Spring Boot(WebFlux WebClient), JPA, Swagger
프론트: React + Vite + TS, Recharts
DB: MariaDB

🧭 왜 만들었나

사이드 프로젝트/개인 서버/소규모 서비스에서 간단하게 API 헬스 체크가 필요할 때가 많습니다.
상용 솔루션은 강력하지만, 가볍게 시작할 MVP가 필요했어요.
그래서 등록→체크→알림 핵심 사이클만 쏙 뽑아 구현했습니다.

✨ 기능 요약 (MVP)

모니터: URL, Method, 주기, 타임아웃, 기대 상태코드 범위, 연속 실패 임계치
체크: 응답 코드, 지연(ms), 에러 메시지 기록
Incident: 연속 실패 시 Open, 성공 시 Close
알림: Slack Webhook
대시보드: 최근 상태, 스파크라인(latency), Open Incidents

🏛 아키텍처

[React Dashboard] --Axios--> [Spring Boot API]
│
[Scheduler 60s / WebClient]
│
[MariaDB 저장]
│
[Slack 알림]

⚙️ 로컬 실행 (요약)

Backend

# MariaDB 생성/권한 → application.properties 설정
./gradlew bootRun
# Swagger: http://localhost:8080/swagger-ui/index.html

Frontend

cd frontend
npm i
npm run dev
# http://localhost:5173

Slack Webhook 등록

POST /api/integrations
{
  "type": "SLACK_WEBHOOK",
  "name": "Main Slack",
  "webhookUrl": "https://hooks.slack.com/services/XXX/YYY/ZZZ"
}

모니터 만들기(빠른 테스트)

POST /api/monitors
{
  "name": "httpstat.us 503",
  "url": "https://httpstat.us/503",
  "method": "GET",
  "intervalSeconds": 30,
  "timeoutMs": 2000,
  "expectedStatusFrom": 200,
  "expectedStatusTo": 399,
  "latencyThresholdMs": 1500,
  "alertConsecutiveFailures": 1
}