Kube Resource Visualizer 구현
쿠버네티스 리소스 시각화 구현해보기
홈 서버를 운영하다보니 내 서버에 배포 된 리소스를 한눈에 보고싶은 요구사항이 생겼다.
마침 쿠버네티스로 배포 된 환경이기에 @kubernetes/client-node 패키지를 사용하여 실시간 Visualizer 를 구현해보았다.
1) Informer를 사용한 resource 이벤트 수신
Informer 는 쿠버네티스 클라이언트에서 지원하는 캐시 서비스이다.
자체적으로 watcher 를 실행하여 캐시를 업데이트하고, 사용자 요청 시 캐시 된 리소스를 반환하는 기능이 구현되어있다.
해당 프로젝트에서는 Informer 로 수집한 리소스를 응답하도록 작업했다.
클라이언트에서 실시간으로 서비스가 반영되는 모습을 그리기 위해 SSE로 리소스의 변경 상태와 Edge 상태를 응답하였고, 클라이언트에서는 이를 실시간으로 렌더링하게 구현하였다.
sequenceDiagram
participant K8s as K8s API
participant I as Informer
participant B as Backend (SSE)
participant C as Client (React flow)
K8s->>I: List + Watch
I->>B: Resource event (ADD/UPDATE/DELETE)
B-->>C: SSE event (graph delta)
C->>C: apply delta to graph state
C->>C: re-render react flow
2) React Flow 로 시각화
ReactFlow 의 Edge 와 tailwindcss custom node 를 사용하여 NS 기준으로 리소스를 시각화 하고 검색/디테일 뷰어도 추가하였다.
단순하게 시각화 하고 싶다는 요구사항 하나로 간단한 서비스를 개발해보았다.
물론 Istio 도입을 진행하며 Kiali로 비슷한 UI 를 확인할 수 있다는건 웃프긴 했다.
고쳐야할 점도 있다.
- 어느 기점이 지나면 CPU 를 과도하게 잡아먹는다.
Delta 가 삭제되지 않거나 Informer 가 개별 세션마다 실행되는 이슈로 추정하고 있다. - 클라이언트에 리소스가 많아 렉이 걸린다
- 일부 리소스가 끊켜서 보인다.
실제 구현된 코드/기능은 아래 주소에서 확인할 수 있다.