# snStatus - Synology NAS System Monitor

> 🖥️ **실시간 시스템 모니터링 & Docker 컨테이너 관리 웹 애플리케이션**

Synology NAS를 위한 현대적이고 직관적인 시스템 모니터링 대시보드입니다.<br>
PWA(Progressive Web App)를 지원하여 앱처럼 설치할 수 있으며, 시스템 리소스와 Docker 컨테이너를 언제 어디서나 손쉽게 관리할 수 있습니다.

**해당 프로젝트는 바이브 코딩을 활용하여 제작 되었습니다.**

![License](https://img.shields.io/badge/license-ISC-blue.svg)
![Node](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen)
![React](https://img.shields.io/badge/react-18.2.0-61dafb)

---

## ✨ 주요 기능

### 📊 실시간 시스템 모니터링
- **리소스 대시보드** : CPU, 메모리, 디스크 사용량 및 네트워크 트래픽 실시간 시각화
- **인터랙티브 차트** : 다양한 기간(1h, 6h, 12h, 24h) 선택 및 상세 툴팁 제공
- **직관적인 UI** : 글래스모피즘(Glassmorphism) 디자인으로 세련된 정보 표시

### 🐳 Docker 컨테이너 관리
- **실시간 리소스 모니터링**
- **컨테이너 제어** : 시작, 중지, 재시작, 강제 종료 등 원격 제어 지원
- **웹 터미널** : 브라우저에서 컨테이너 내부 쉘(bash/sh) 직접 접속
- **실시간 로그** : 컨테이너 로그 스트리밍 확인

### 🔔 스마트 알림 시스템
- **임계치 알림** : CPU, 메모리, 디스크 사용률이 설정된 한계 초과 시 알림
- **Docker 이벤트** : 컨테이너 비정상 종료 시 즉시 알림
- **PWA 푸시 알림** : 앱을 닫아도 백그라운드에서 시스템 경고 수신

---

## 📦 설치 및 실행

### 사전 요구사항
- **Docker** & **Docker Compose**
- **HTTPS 환경 (PWA 설치를 위한 필수 조건)**

### 설치 방법
git clone을 수행하지 않고 직접 docker-compose.yaml을 작성하여 실행하여도 됩니다.<br>
만약 직접 작성하여 실행을 하실 경우 3 부터 시작하세요.

1. **프로젝트 클론**
   ```bash
   git clone https://github.com/ElppaDev/snStatus.git
   cd snStatus
   ```

2. **Docker Compose 직접 작성**
   ```yaml
   services:
     backend:
       image: sa8001/snstatus-backend:v0.1.5
       container_name: snstatus-backend
       restart: always
       environment:
         - NODE_ENV=production
       privileged: true
       volumes:
         - /:/host:ro
         - /proc:/host/proc:ro
         - /sys:/host/sys:ro
         - /var/run/docker.sock:/var/run/docker.sock
         - ./data:/app/data
       ports:
         - "8001:8001"
   
     frontend:
       image: sa8001/snstatus-frontend:v0.1.5
       container_name: snstatus-frontend
       restart: always
       ports:
         - "3005:80"
       depends_on:
         - backend
   ```

3. **Docker Compose 실행**
   ```bash
   mkdir data
   docker-compose up -d
   ```

4. **접속**
   - 브라우저에서 `http://<NAS-IP>:3005` 접속
   - PWA 앱 설치 및 푸시 알림을 사용하기 위해서는 HTTPS를 통하여 접속하여야 합니다.


---

###  미리보기
<details>
<summary>💻 PC 화면 미리보기</summary>
<p align="center">
  <img src="https://github.com/user-attachments/assets/bae6ff03-59a8-4784-895b-fa8eb3349c9a" width="48%" />
  <img src="https://github.com/user-attachments/assets/9ccc51c0-9286-4b21-864d-b57460fbadda" width="48%" />
</p>
<p align="center">
  <img src="https://github.com/user-attachments/assets/a002e67b-513c-4286-9ef8-f75c16de3137" width="48%" />
  <img src="https://github.com/user-attachments/assets/c2b09187-2002-4493-951f-92688bbb0f05" width="48%" />
</p>
<p align="center">
  <img src="https://github.com/user-attachments/assets/1399ae07-9999-4241-a2b5-00dc39059d3b" width="48%" />
</p>
</details>

<details>
<summary>📱 모바일 화면 미리보기</summary>
<p align="center">
  <img src="https://github.com/user-attachments/assets/62ee7d61-03c6-469e-9ee4-84c575e3fd2b" width="22%" />
  <img src="https://github.com/user-attachments/assets/24149ce6-5387-4611-a275-c7fb87de07f3" width="22%" />
  <img src="https://github.com/user-attachments/assets/acbb2584-5b48-4880-8182-860e09c8ed4b" width="22%" />
  <img src="https://github.com/user-attachments/assets/5dfd98dd-02b4-4286-a656-a002cdfd4d36" width="22%" />
</p>
<p align="center">
  <img src="https://github.com/user-attachments/assets/52a11ba5-d54b-40ed-9be6-fabdc6fa5557" width="22%" />
  <img src="https://github.com/user-attachments/assets/ed5a7db1-36f9-42e6-b062-085e52dd3f90" width="22%" />
  <img src="https://github.com/user-attachments/assets/85f48ac0-94fc-44d6-8582-fc91ac7e9a47" width="22%" />
</p>
</details>