OSOLIT Monitor
시스템 헬스체크 & 모니터링 대시보드 (Nuxt 3 + PostgreSQL + WebSocket)
주요 기능
📊 실시간 대시보드
- 서버 상태 모니터링: 다중 서버 헬스체크 및 상태 표시
- 네트워크 점검: Public(외부망) / Private(내부망) 분리 모니터링
- 위치별 통계: 서버 위치(Location)별 현황 요약
- WebSocket 기반 실시간 업데이트
- 다크/라이트 테마 지원
🌐 네트워크 모니터링
- Public Network (pubnet): 외부망 연결 상태 점검
- Private Network (privnet): 내부망 연결 상태 점검
- 응답 시간 측정 및 에러 메시지 상세 표시
🖥️ 서버 모니터링
- 다중 서버 대상 관리
- 서버별 헬스체크 이력 조회
- 위치별 서버 현황 통계
- 스케줄러 제어 (시작/중지)
📈 이상탐지 (Anomaly Detection)
- Baseline 분석: 정상 기준선 대비 이상 탐지
- Z-Score 분석: 통계적 이상치 탐지
- Trend 분석: 장기 추세 분석
- Short-term 분석: 단기 변동 탐지
- Chart.js 기반 시각화
⚙️ 설정 관리
- 임계값(Threshold) 설정
- 스케줄러 간격 조정
기술 스택
| 구분 | 기술 |
|---|---|
| Frontend | Nuxt 3, Vue 3, Chart.js |
| Backend | Nitro (Node.js) |
| Database | PostgreSQL |
| Real-time | WebSocket |
| Container | Docker |
| Timezone | Asia/Seoul |
프로젝트 구조
osolit-monitor/
├── frontend/ # 프론트엔드 (Pages & Components)
│ ├── index.vue # 📊 메인 대시보드
│ ├── components/
│ │ ├── DashboardControl.vue
│ │ ├── ServerPortlet.vue
│ │ ├── NetworkPortlet.vue
│ │ ├── LocationStatsPortlet.vue
│ │ ├── SidebarNav.vue
│ │ └── ThemeToggle.vue
│ ├── network/ # 네트워크 모니터링
│ ├── server/ # 서버 모니터링
│ │ ├── list.vue
│ │ └── history.vue
│ ├── anomaly/ # 이상탐지
│ │ ├── baseline.vue
│ │ ├── zscore.vue
│ │ ├── trend.vue
│ │ └── short-term.vue
│ ├── settings/ # 설정
│ ├── assets/css/
│ └── composables/
│
├── backend/ # 백엔드 (API & Plugins)
│ ├── api/
│ │ ├── network/
│ │ │ ├── pubnet/ # 외부망 API
│ │ │ └── privnet/ # 내부망 API
│ │ ├── server/ # 서버 모니터링 API
│ │ │ ├── status.get.ts
│ │ │ ├── location-stats.get.ts
│ │ │ ├── targets/
│ │ │ ├── history/
│ │ │ └── scheduler/
│ │ ├── anomaly/ # 이상탐지 API
│ │ │ ├── baseline.get.ts
│ │ │ ├── zscore.get.ts
│ │ │ ├── trend.get.ts
│ │ │ ├── short-term.get.ts
│ │ │ ├── chart.get.ts
│ │ │ └── logs.get.ts
│ │ └── settings/ # 설정 API
│ │ ├── thresholds.get.ts
│ │ └── thresholds.put.ts
│ ├── plugins/
│ │ ├── pubnet-init.ts # 외부망 스케줄러 초기화
│ │ ├── privnet-init.ts # 내부망 스케줄러 초기화
│ │ └── server-init.ts # 서버 스케줄러 초기화
│ ├── routes/ # WebSocket 라우트
│ └── utils/
│ ├── db.ts # PostgreSQL 연결
│ ├── pubnet-scheduler.ts
│ ├── privnet-scheduler.ts
│ └── server-scheduler.ts
│
├── database/ # DB 관련 (마이그레이션 등)
├── .env # 개발 환경변수
├── .env.prod # 운영 환경변수
├── Dockerfile # 프로덕션 Docker 이미지
├── nuxt.config.ts
└── package.json
설치 및 실행
환경 요구사항
- Node.js 20+
- PostgreSQL 14+
1. 의존성 설치
npm install
2. 환경변수 설정
# .env 파일 생성
cp .env.example .env
# 환경 설정
NODE_ENV=development
# PostgreSQL 연결 정보
DB_HOST=localhost
DB_PORT=5432
DB_NAME=osolit_monitor
DB_USER=postgres
DB_PASSWORD=your_password
# 스케줄러 자동시작 (development: false 권장)
AUTO_START_SCHEDULER=false
3. 개발 서버 실행
npm run dev
- 개발 서버: http://localhost:4055
- WebSocket: ws://localhost:4055/_ws
4. 프로덕션 빌드
npm run build
npm run preview
Docker 배포
빌드 및 실행
# 이미지 빌드
docker build -t osolit-monitor .
# 컨테이너 실행
docker run -d \
--name osolit-monitor \
-p 4055:4055 \
-e DB_HOST=your-db-host \
-e DB_PORT=5432 \
-e DB_NAME=osolit_monitor \
-e DB_USER=osolit \
-e DB_PASSWORD=your_password \
osolit-monitor
Docker 특징
- Multi-stage 빌드 (최적화된 이미지 크기)
- Asia/Seoul 타임존 설정
- 비root 사용자 실행 (보안)
- 환경변수 기반 설정
화면 구성
메인 대시보드 (/)
┌─────────────────────────────────────────────────────────┐
│ 📊 대시보드 2024-12-25 14:30:00 │
├─────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────┐ ┌─────────────────┐ │
│ │ │ │ 🌐 Public ✓ │ │
│ │ 서버 현황 (90%) │ │ [UP] │ │
│ │ │ ├─────────────────┤ │
│ │ 서버 목록 & 상태 │ │ 🔒 Private ✓ │ │
│ │ │ │ [UP] │ │
│ │ │ ├─────────────────┤ │
│ │ │ │ 📍 위치별 통계 │ │
│ └─────────────────────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────┘
🟢 연결됨
서버 관리 (/server/list, /server/history)
- 모니터링 대상 서버 목록 관리
- 서버별 헬스체크 이력 조회
이상탐지 (/anomaly/*)
- Baseline / Z-Score / Trend / Short-term 분석
- 차트 기반 시각화
설정 (/settings/*)
- 임계값 설정 관리
API 엔드포인트
네트워크
| Method | Endpoint | 설명 |
|---|---|---|
| GET | /api/network/pubnet/status |
외부망 상태 |
| GET | /api/network/privnet/status |
내부망 상태 |
서버
| Method | Endpoint | 설명 |
|---|---|---|
| GET | /api/server/status |
서버 현황 |
| GET | /api/server/location-stats |
위치별 통계 |
| GET | /api/server/targets |
모니터링 대상 목록 |
| GET | /api/server/history |
헬스체크 이력 |
이상탐지
| Method | Endpoint | 설명 |
|---|---|---|
| GET | /api/anomaly/baseline |
Baseline 분석 |
| GET | /api/anomaly/zscore |
Z-Score 분석 |
| GET | /api/anomaly/trend |
Trend 분석 |
| GET | /api/anomaly/short-term |
단기 분석 |
| GET | /api/anomaly/chart |
차트 데이터 |
설정
| Method | Endpoint | 설명 |
|---|---|---|
| GET | /api/settings/thresholds |
임계값 조회 |
| PUT | /api/settings/thresholds |
임계값 수정 |
WebSocket 통신
연결
const ws = new WebSocket('ws://localhost:4055/_ws')
메시지 타입
클라이언트 → 서버:
// 새로고침 간격 설정
{ type: 'set_interval', interval: 1 }
// 자동 새로고침 토글
{ type: 'set_auto_refresh', enabled: true }
// 즉시 새로고침
{ type: 'refresh' }
// 특정 시점 데이터 조회
{ type: 'fetch_at', datetime: '2024-12-25T14:30:00' }
서버 → 클라이언트:
// 실시간 상태
{ type: 'status', data: { pubnet: {...}, privnet: {...} } }
// 서버 현황
{ type: 'server', data: { servers: [...], summary: {...} } }
// 과거 데이터
{ type: 'historical', data: {...} }
데이터베이스
PostgreSQL 연결
// backend/utils/db.ts
const config = {
host: process.env.DB_HOST,
port: parseInt(process.env.DB_PORT || '5432'),
database: process.env.DB_NAME,
user: process.env.DB_USER,
password: process.env.DB_PASSWORD,
}
주요 테이블
health_check_log: 헬스체크 로그server_targets: 모니터링 대상 서버thresholds: 임계값 설정
스케줄러
동작 방식
- 개발 환경: 수동 시작 (
AUTO_START_SCHEDULER=false) - 운영 환경: 자동 시작 (
AUTO_START_SCHEDULER=true)
스케줄러 종류
| 스케줄러 | 설명 | 간격 |
|---|---|---|
pubnet-scheduler |
외부망 점검 | 적응형 (정상 5분, 장애 1분) |
privnet-scheduler |
내부망 점검 | 적응형 (정상 5분, 장애 1분) |
server-scheduler |
서버 점검 | 설정 가능 |
브라우저 호환성
- ✅ Chrome
- ✅ Firefox
- ✅ Safari
- ✅ Edge
- ❌ IE (미지원)
개발 로드맵
- 서버 모니터링 포틀릿
- 네트워크 모니터링 (Public/Private)
- 이상탐지 기능
- Chart.js 차트
- 다크/라이트 테마
- Docker 지원
- 장애 알림 (이메일/Slack)
- 오래된 로그 자동 삭제
- Jenkins Job 통합
라이선스
Private - TurboSoft