# 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. 의존성 설치 ```bash npm install ``` ### 2. 환경변수 설정 ```bash # .env 파일 생성 cp .env.example .env ``` ```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. 개발 서버 실행 ```bash npm run dev ``` - 개발 서버: http://localhost:4055 - WebSocket: ws://localhost:4055/_ws ### 4. 프로덕션 빌드 ```bash npm run build npm run preview ``` ## Docker 배포 ### 빌드 및 실행 ```bash # 이미지 빌드 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 통신 ### 연결 ```javascript const ws = new WebSocket('ws://localhost:4055/_ws') ``` ### 메시지 타입 **클라이언트 → 서버:** ```javascript // 새로고침 간격 설정 { type: 'set_interval', interval: 1 } // 자동 새로고침 토글 { type: 'set_auto_refresh', enabled: true } // 즉시 새로고침 { type: 'refresh' } // 특정 시점 데이터 조회 { type: 'fetch_at', datetime: '2024-12-25T14:30:00' } ``` **서버 → 클라이언트:** ```javascript // 실시간 상태 { type: 'status', data: { pubnet: {...}, privnet: {...} } } // 서버 현황 { type: 'server', data: { servers: [...], summary: {...} } } // 과거 데이터 { type: 'historical', data: {...} } ``` ## 데이터베이스 ### PostgreSQL 연결 ```typescript // 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 (미지원) ## 개발 로드맵 - [x] 서버 모니터링 포틀릿 - [x] 네트워크 모니터링 (Public/Private) - [x] 이상탐지 기능 - [x] Chart.js 차트 - [x] 다크/라이트 테마 - [x] Docker 지원 - [ ] 장애 알림 (이메일/Slack) - [ ] 오래된 로그 자동 삭제 - [ ] Jenkins Job 통합 ## 라이선스 Private - TurboSoft