나는 UptimeRobot이 무료로 한 사이트만 모니터링하게 해 주기 때문에 1주일 만에 셀프 호스팅 Uptime Monitor를 만들었다

Source: Dev.to

The Problem

프로젝트를 만들면서 가동 시간을 모니터링해야 했습니다. UptimeRobot에 접속했지만 벽에 부딪혔습니다. 무료 플랜은 하나의 웹사이트만 모니터링할 수 있습니다. 여러 서비스를 운영하고 있었고, 내 서버가 다운됐는지 알기 위해 비용을 지불하고 싶지 않았습니다.

그래서 개발자라면 하는 대로 직접 만들었습니다.

What I Built

Site‑Monitoring (Nexus) – 완전 자체 호스팅, 오픈소스 가동 시간 모니터링 도구로:

• 📡 무제한 웹사이트 모니터링 — 원하는 만큼 URL을 추가 가능
• 📊 실시간 분석 제공 — 응답 시간, 상태 코드, 가동 시간 히스토리
• 🎨 인터랙티브 대시보드 — React + Framer Motion으로 구축
• 😴 안티‑슬립 엔진 — Render/Vercel 같은 무료 플랫폼에서도 스스로 살아남음
• 🏠 100 % 자체 호스팅 — 데이터도 서버도 내 것, 구독료 전혀 없음

Live Demo

pingbot.yogender1.me

GitHub

Tech Stack

• Frontend: React 18, Vite, TailwindCSS, Framer Motion
• Backend: Node.js, Express.js
• Database: PostgreSQL
• Jobs: Cron jobs (pinger.js)
• Hosting: Render (backend), Vercel (frontend)

The Hardest Part

안티‑슬립 엔진을 제대로 구현하는 것이 가장 어려웠습니다. Render와 같은 무료 티어 플랫폼은 15 분 동안 비활성 상태가 되면 서버를 종료시키기 때문에, 모니터 자체가 다운될 위험이 있었습니다.

이를 해결하기 위해 cron job을 이용해 백엔드 자체 엔드포인트를 주기적으로 호출하는 자체 ping 시스템을 만들었습니다. 개념은 간단했지만, 서버에 과부하가 걸리지 않도록 디버깅에 신경을 많이 써야 했습니다.

Architecture

Nexus-Core/
├── backend/
│   ├── db.js           # Database connection
│   ├── pinger.js       # Background site poller + self‑ping
│   └── server.js       # Express API
└── frontend/
    └── src/
        ├── api.js      # Axios API calls
        ├── App.jsx     # Main React app
        └── index.css   # TailwindCSS

What’s Next

흔히 제기되는 비판 중 하나는 단일 서버 모니터링은 오탐을 일으킬 수 있다는 점입니다(예: 모니터링 서버가 다운되면 외부 사이트도 다운된 것으로 보고).

로드맵: 여러 지역에 있는 서버에서 동시에 체크하는 멀티‑리전 모니터링을 추가할 예정입니다.

그 사이에 Nexus는 다음 용도에 적합합니다:

• 자신의 프로젝트와 API 모니터링
• 자체 호스팅 인프라
• 월 구독료 없이 완전한 제어권을 원하는 모든 사람

Contributing

일주일 만에 만들었으며 추가할 것이 많이 남아 있습니다. 초보자도 쉽게 참여할 수 있는 이슈 네 개를 열어두었습니다:

• 🌙 다크/라이트 모드 토글
• 📧 사이트가 다운될 때 이메일 알림
• 📄 가동 시간 로그 CSV 내보내기
• 📝 CONTRIBUTING.md 개선

첫 기여자를 환영합니다 – 코드베이스가 작고, 깔끔하며, 문서화도 잘 되어 있습니다.

Show Some Love

유용하다고 생각되시면 GitHub에 ⭐ 하나만 눌러주셔도 큰 도움이 됩니다!