😱참고해주세요!😱

이 글은 깨끗하고 순수한 개발자인 고등학생이 쓴 첫 개발기 입니다. 이 점을 유의 하여 읽어주시고 잘못된 부분이 있거나 피드백을 할 부분이 있다면 알려주세요!

이 글의 원본은 https://velog.io/@leewonchan/Uptime-Kuma-상태페이지-커스텀하기에서 보실 수 있습니다!

Uptime Kuma 기본상태페이지 디자인 수정이 너무 한정적이라 새롭게 다시 만들어 보았습니다.

1. 상태 페이지 분석

1)Json 분석

개발자 도구 온

Uptime Kuma 기본 상태페이지를 보면 서버상태페이지 이름으로 Json 데이터를 불러오는 것을 알 수 있습니다.

이런식으로 서버 응답시간, 서버 상태, 메시지 데이터가 있습니다.

위 사진을보면 heartbeatList의 하위인 데이터인 40이라는 숫자가 있습니다.

위 사진을 보면 Uptime Kuma 관리자 페이지의 URL에 있는 모니터링서버 번호(?) 인 것 같습니다?

2)서버 상태페이지 분석

위 사진은 상태페이지 코드인데 24번째 줄을 보면 상태페이지의 로고 사진, 상태페이지 정보, 모니터링 서버 번호 등 서버상태페이지 정보가 있는 것을 알 수 있습니다.

그래서 분석한 결과 값으로 만든 것이 Uptime Kuma를 이용한 서버 상태페이지를 만들었습니다.

Github Repository

Status Page

(이 페이지는 약간의 수정 작업이 들어갔어요. 참고부탁드려요..)

(수정 작업이 안된 페이지를 보고 싶으시다면 위 깃허브 Repository에서 사진을 봐주시거나 직접 설치하셔서 봐주세요. 😁 )