Uptime Kuma 상태페이지 커스텀하기!

이원찬·2023년 10월 16일

2023 Uptime Kuma php 개인프로젝트

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

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

1. 상태 페이지 분석

1) Json 분석

~~개발자 도구 온!~~

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

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

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

이런식으로 Uptime Kuma 관리자 페이지의 URL에 있는 모니터링서버 번호(?) 인 것 같다.

2) 서버 상태페이지 분석

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

2. 정보 가져오기!

상태페이지 디자인은 "https://codepen.io/aybukeceylan/pen/OJRNbZp" 이것을 이용하였습니다. ~~(디자인은 너무 어려워 ㅠㅠ)~~

1) 먼저 가장 쉬워보이는 서버 업타임 가져오기!

//서버 업타임 표시 함수
function uptime($data, $svrid)  {
  if (isset($data['uptimeList'])) {
    $uptimeList = json_encode($data['uptimeList']);
    $data = json_decode($uptimeList, true);
    $value = round($data[$svrid] * 100, 2);
    echo $value . "%";
  } else {
    echo "No Data";
  }
}

PHP를 사용했고, 함수로 만들었다. 변수 data는 서버상태페이지 URL이고, 변수 $svrid는 모니터링 서버 번호로 지정 했다.

2) 서버 응답시간 가져오기!

//최근 서버 응답시간 표시 함수
function latestping($data, $svrid)  {
  if (isset($data['heartbeatList'][$svrid])) {
    $ping = $data['heartbeatList'][$svrid];
    $latestPing = end($ping)['ping'];
    if ($latestPing == "null") {
      echo "Down";
    } else {
      echo $latestPing;
    }
  } else {
    echo "No Data";
  }
}

이 코드는 서버 응답시간인데 만약 서버가 오프라인이거나 문제가 있다면 응답시간이 null로 반환된다. 그래서 null일때 응답시간을 출력하지 않고 Down이라고 출력한다.

3) 서버 상태 요약 정보 표시하기!

//서버상태 요약표시
$online_count = 0;
$offline_count = 0;
$warning_count = 0;
$maintenance_count = 0;
$unknown_count = 0;

foreach ($data['heartbeatList'] as $server) {
  switch ($server[0]['status']) {
    case 0:
      $offline_count++;
      break;
    case 1:
      $online_count++;
      break;
    case 2:
      $warning_count++;
      break;
    case 3:
      $maintenance_count++;
      break;
    default:
      $unknown_count++;
      break;
  }
}

서버 상태 페이지의 json데이터의 status 값이 0일때는 오프라인이고 1일때는 온라인이고 2일때는 위험이고 3일때는 유지보수 중 인 것을 보아 위와 같이 코드를 작성하였다.

4) 서버 상태페이지 정보 가져오기!

//서버 제목 가져오기 (HTML)
$URL = "https://status.kuma.pet"; //Uptime Kuma 상태페이지 주소를 입력해주세요!

$content = file_get_contents($URL);

//상태페이지 설정 가져오기
function padgeconfig($content, $config) {

  preg_match('/window\.preloadData\s=\s(.*?);/s', $content, $matches);

  if (isset($matches[1])) {
      $result = str_replace("'", '"', $matches[1]); 
      $data = json_decode($result, true);  // true 옵션으로 설정하면 연관 배열로 반환.
      return $data['config'][$config];
    
  } else {
      return "Data not found.";
  }

}

서버상태페이지 원본 HTML 코드를 가져와 위에서 말했던 서버 상태페이지 정보를 가져오는 코드(함수)이다!

5) 자동으로 서버 상태 Json 불러오기!

Json을 불러오는 URL을 분석하면

"상태페이지 도메인" + "/api/status-page/heartbeat/" + "Uptime Kuma에서 설정한 상태페이지 이름"

으로 구성 되어있는 것을 발견했다!

//서버 상태 정보 가져오기 (JSON)
$json = file_get_contents($URL. "/api/status-page/heartbeat/" . padgeconfig($content, 'slug'));

//json 데이터 배열로 변환
$data = json_decode($json, true);

그래서 위와 같이 Json을 불러와 데이터 배열로 변환한 해주면 성공적으로 불러와지게 된다!