OSOLIT Monitor

시스템 헬스체크 & 모니터링 대시보드 (Nuxt 3 + SQLite + SSE)

주요 기능

📊 실시간 대시보드 (웹소켓/SSE 기반)

• 네트워크 점검 포틀릿 (단일, 핵심)
• Server-Sent Events (SSE)로 실시간 업데이트
• 점검 시간과 상태 즉시 반영
• 연결 상태 표시 (🟢 연결됨 / 🔴 연결 끊김)
• 향후 추가 포틀릿 확장 가능

🔄 적응형 스케줄러

• 정상 시: 5분 간격 점검
• 장애 시: 1분 간격 점검 (빠른 복구 감지)
• 자동으로 간격 조정
• DB 시간 기준으로 로그 저장

🌐 네트워크 점검

• World Time API를 통한 외부 네트워크 상태 확인
• 응답 시간 측정
• 에러 메시지 상세 표시

💾 데이터 저장

• SQLite 파일 DB (database/health_logs.db)
• 별도 DB 서버 설치 불필요
• 상태: UP(정상) / DOWN(장애)

설치 및 실행

1. 의존성 설치

npm install

2. 개발 서버 실행

npm run dev

서버 시작 시:

• DB 자동 초기화
• 즉시 첫 네트워크 점검 실행
• SSE 서버 시작
• 개발 서버: http://localhost:3000

3. 프로덕션 빌드

npm run build
npm run preview

화면 구성

홈 (실시간 대시보드)

http://localhost:3000

네트워크 점검 포틀릿

┌─────────────────────────────────┐
│ 🌐 네트워크 점검           ✓    │  ← 상태 아이콘
├─────────────────────────────────┤
│         [ UP ]                  │  ← 상태 뱃지
│                                 │
│  점검 시간: 12/25 14:35:20     │  ← 마지막 점검 시간
│  응답 시간: 123ms              │  ← 응답 속도
├─────────────────────────────────┤
│  5분 전        ⏱️ 5분 간격     │  ← 상대시간 & 점검주기
└─────────────────────────────────┘

실시간 업데이트:

• 점검 완료 시 즉시 화면 반영
• 별도 새로고침 불필요
• SSE 연결 상태 표시

향후 확장:

• 데이터베이스 점검 포틀릿
• 서버 상태 포틀릿
• 디스크 용량 포틀릿
• 기타 모니터링 항목

로그 & 통계

http://localhost:3000/logs

• 전체 점검 이력
• 통계 정보

시스템 헬스체크

http://localhost:3000/health

• 실시간 상태 조회

글로벌 표준시

http://localhost:3000/time

• Time API 직접 테스트

프로젝트 구조

osolit-monitor/
├── frontend/
│   ├── index.vue         # 🏠 실시간 대시보드
│   ├── logs.vue          # 📊 로그 & 통계
│   ├── health.vue        # 🏥 헬스체크
│   └── time.vue          # 🌍 시간 API
├── backend/
│   ├── api/
│   │   ├── dashboard.get.ts  # 대시보드 초기 데이터
│   │   ├── stream.get.ts     # SSE 스트림 (실시간)
│   │   ├── logs.get.ts
│   │   └── stats.get.ts
│   ├── plugins/
│   │   └── scheduler.ts      # 적응형 스케줄러
│   └── utils/
│       ├── database.ts       # SQLite
│       └── timecheck.ts      # 네트워크 체크
├── database/
│   └── health_logs.db        # SQLite (자동 생성)
└── nuxt.config.ts

실시간 업데이트 (SSE)

Server-Sent Events

// 프론트엔드
const eventSource = new EventSource('/api/stream')

eventSource.onmessage = (event) => {
  const message = JSON.parse(event.data)
  
  if (message.type === 'health_update') {
    // 화면 즉시 업데이트
    networkStatus.value = message.data
  }
}

메시지 타입

• health_update: 헬스체크 결과
• ping: 연결 유지 (30초마다)

자동 재연결

연결 끊김 시 5초 후 자동 재연결 시도

적응형 스케줄링

동작 방식

1. 서버 시작: 즉시 첫 점검
2. 정상(UP): 다음 점검 5분 후
3. 장애(DOWN): 다음 점검 1분 후 (빠른 복구 감지)
4. 상태 변경 시: 자동으로 간격 조정

콘솔 로그

🚀 Initializing Health Check Scheduler...
✅ Database initialized
⏰ Running network health check...
   Result: UP (123ms)
✅ Health Check Scheduler started

[5분 후]
⏰ Running network health check...
   Result: DOWN (5001ms)
🔄 Interval changed: 1 minutes

[1분 후]
⏰ Running network health check...
   Result: UP (125ms)
🔄 Interval changed: 5 minutes

API 엔드포인트

GET /api/dashboard

초기 대시보드 데이터

Response:

{
  "networkStatus": {
    "id": 123,
    "service_name": "Network",
    "status": "UP",
    "check_time": "2024-12-25T12:34:56.000Z",
    "response_time": 123,
    "error_message": null
  },
  "lastUpdate": "2024-12-25T12:34:56.789Z"
}

GET /api/stream (SSE)

실시간 업데이트 스트림

Event Stream:

data: {"type":"health_update","data":{...}}

data: {"type":"ping","timestamp":"2024-12-25T12:34:56.789Z"}

GET /api/logs

헬스체크 로그 조회

GET /api/stats

통계 조회

데이터베이스 스키마

health_check_log 테이블

CREATE TABLE health_check_log (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  check_time DATETIME DEFAULT CURRENT_TIMESTAMP,
  service_name TEXT NOT NULL,          -- 'Network'
  status TEXT NOT NULL,                -- 'UP' or 'DOWN'
  response_time INTEGER,               -- 밀리초
  error_message TEXT,
  details TEXT
)

데이터 관리

DB 백업

cp database/health_logs.db database/backup_$(date +%Y%m%d).db

DB 조회

sqlite3 database/health_logs.db

# 최근 로그
SELECT * FROM health_check_log 
WHERE service_name = 'Network' 
ORDER BY check_time DESC LIMIT 20;

# 통계
SELECT 
  status, 
  COUNT(*) as count,
  AVG(response_time) as avg_ms
FROM health_check_log 
WHERE service_name = 'Network'
GROUP BY status;

브라우저 호환성

SSE 지원 브라우저:

• ✅ Chrome
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ❌ IE (미지원)

다음 단계

• 데이터베이스 점검 포틀릿 추가
• 서버 상태 점검 포틀릿 추가
• 디스크 용량 점검 포틀릿 추가
• Jenkins Job 통합
• 장애 알림 (이메일/Slack)
• 차트/그래프
• 오래된 로그 자동 삭제

기술 스택

• Frontend: Nuxt 3, Vue 3
• Backend: Nitro (Node.js)
• Database: SQLite (better-sqlite3)
• Real-time: Server-Sent Events (SSE)
• Scheduler: 적응형 (정상 5분, 장애 1분)
• External API: World Time API

특징

✅ 실시간 업데이트 - SSE로 즉시 반영
✅ 적응형 스케줄링 - 장애 시 빠른 점검
✅ 단순한 구조 - 네트워크 점검 중심
✅ 확장 가능 - 포틀릿 추가 용이
✅ 파일 DB - 별도 서버 불필요