서버를 다루면서 pm2와 같은 프로세스 모니터링 시스템을 보고 직접 만들어보고 싶다는 생각이 들어 프로젝트 주제를 선정하게 되었다.
팀을 생성하여, 팀 내부의 서버 모니터링을 하는 것
구분 | 이름 | 사진 | Github | role | |
---|---|---|---|---|---|
팀장 | 김진효 | [email protected] | https://github.com/jinhyo-dev | Front-end | |
팀원 | 김성현 | [email protected] | https://github.com/hyun8265 | Back-end | |
팀원 | 윤서준 | [email protected] | https://github.com/designed-re | Agent |
서버
- 3월: 프로젝트 주제 선정 및 프로젝트 제작 준비
- 4월: UI/UX 디자인 및 에이전트.백엔드 개발 시작
- 5월: 프론트엔드 개발 시작, 에이전트 <-> 백엔드 통신
- 6월: 백엔드 api 제작, 프론트엔드 페이지 구현 완료, 에이전트 개발 완료
- 7월: 프론트엔드 websocket 및 api 연동, 실시간 차트 및 전체 페이지 구현
NoSQL인 MongoDB와 시계열 데이터베이스인 InfluxDB를 사용하여 데이터베이스 구조가 없다.
프론트에서 websocket을 이용하여 실시간으로 aurora service와 통신하며 chart.js 라이브러리를 이용해 실시간 cpu 사용량, 메모리 사용량 등을 웹 페이지에 구현하여 쉽게 확인 할 수 있도록 하였습니다.
- Vite
- React 번들러로 Vite을 사용했습니다. HMR과 빠른 빌드 속도가 모니터링 서비스에 도움이 되었습니다. CRA보다 훨씬 빠른 속도와 다양한 장점이 있습니다.
- Styled-components
- CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없어 사용하게 되었습니다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화합니다. 또한 script 환경을 최대한 활용 할 수 있었습니다.
- Chart.js
- 모니터링 시스템의 생명은 바로 그래프입니다. Chart.js는 container 부터 tooltip, legend, axis, line, bar 모든 것들이 컴포넌트의 형태로 제공되었고 이를 자유롭게 조합해서 사용하는 것이 가장 큰 장점이었습니다.
Service는 Client와 Agent사이에 위치하여, 사용자가 원활하게 모니터링을 할 수 있도록 돕는 서비스입니다.
- NestJS
- API Gateway, Service(Backend)를 개발할 때 사용했습니다. NestJS는 TypeScript 기반의 Node.js 프레임워크로, 유연성과 확장성이 뛰어난 프로그래밍 언어 입니다. 프로젝트의 유연한 구조와 확장성을 위해 사용했습니다.
- MSA(Microservice Architecture)
- MSA(Microservice Architecture)를 활용하여 API Gateway와 Service(Microservice)의 구조를 구현했습니다. Client의 요청은 API Gateway를 통해 들어오며, API Gateway는 이 요청을 적절한 Service(Microservice)로 전달합니다.
- 서비스의 독립성과 확장성을 향상시키기 위해 사용했습니다.
- WebSocket
- Client와 Agent 사이에서 실시간으로 데이터를 주고 받기 위해 사용했습니다. Agent가 수집한 정보를 Client의 요청에 따라 실시간으로 전송하도록 구현하였습니다.
Agent는 사용자의 호스트에 설치되어 호스트의 상태를 실시간으로 수집할 수 있도록 하는 서비스입니다.
- Fluent-bit
- Fluent-bit은 가장 가벼운 로그/Metrics 값 수집기입니다. 이 수집기를 사용하여,
Syslog, Cpu, Disk, Memory
등등에 대한 상태를 수집하여 Agent에 AICL을 통해 전송합니다.
- Fluent-bit은 가장 가벼운 로그/Metrics 값 수집기입니다. 이 수집기를 사용하여,
- Prometheus
- Prometheus은 오픈소스 모니터링 시스템으로, 다양한 Exporter에서 수집한 정보를 Key-Value 방식으로 제공합니다.
- C#
- Agent, Bridge(ACL,AICL), Head(Backend)을 개발할 때 사용했습니다. Cross-platform지원 및 Java에 비해 빠른 성능과 낮은 메모리 사용율을 가지는 프로그래밍 언어입니다. Linux와 Windows를 모두 동시에 지원하기 위해 사용했습니다.
- WebSocket
- ACL, AICL에서 사용했습니다, ACL에서는 Star <-> Agent에서 데이터를 주고받는데 사용했습니다. AICL에서는 Fluent-bit <-> Agent에서 데이터를 보고받는데 사용했습니다.
오로라 모니터링 서비스는 성능 및 시스템 상태를 실시간으로 관측할 수 있습니다. 수집된 데이터를 분석하여 사용자에게 그래프를 통해 시각화된 정보를 제공하며, 이를 통해 성능 저하 원인 파악과 성능 최적화에 도움을 줍니다. 직접 이 서비스를 만들면서 어떤 방법으로 작동되는지 알게되었고, 이번 프로젝트를 진행하면서 힘든점도 많았지만 힘들었던 만큼 실력 향상에 매우 큰 도움이 되었다고 생각합니다.
앞으로 사용자의 요구와 편의성을 고려한 다양한 플랜을 설정해 더 많은 정보와 사용성이 뛰어난 시스템을 구축할 예정입니다. 팀원들도 이 시스템을 활용하여 효율적인 통계 분석과 성능 최적화에 큰 도움을 받고 있습니다. 추가 기능을 계속해서 도입하며, 차후에는 서비스를 외부에도 정식 배포할 계획입니다. 이를 통해 더 큰 시장에서 우리의 서비스가 높은 경쟁력을 갖추게 되며, 최종 목표로는 창업 및 기업 확장을 실현할 수 있을 것으로 기대하고 있습니다.