285 lines
7.0 KiB
Markdown
285 lines
7.0 KiB
Markdown
# 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. 의존성 설치
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 2. 개발 서버 실행
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
서버 시작 시:
|
|
- DB 자동 초기화
|
|
- 즉시 첫 네트워크 점검 실행
|
|
- SSE 서버 시작
|
|
- 개발 서버: http://localhost:3000
|
|
|
|
### 3. 프로덕션 빌드
|
|
```bash
|
|
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
|
|
```javascript
|
|
// 프론트엔드
|
|
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:**
|
|
```json
|
|
{
|
|
"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 테이블
|
|
```sql
|
|
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 백업
|
|
```bash
|
|
cp database/health_logs.db database/backup_$(date +%Y%m%d).db
|
|
```
|
|
|
|
### DB 조회
|
|
```bash
|
|
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** - 별도 서버 불필요
|