😱참고해주세요!😱
이 글은 첫 글 입니다. 이 점을 유의 하여 읽어주시고 잘못된 부분이 있거나 피드백을 할 부분이 있다면 알려주세요!

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을 불러와 데이터 배열로 변환한 해주면 성공적으로 불러와지게 된다!

맺음말

원래 처음에는 Uptime Kuma의 소소코드를 수정해 서버 상태페이지 디자인을 수정하려고 했는데 Vue.js를 1도 모르고 자바스크립트도 할 수 있긴한데 능숙하지가 않아서 어려웠었다.

그냥 밖에서 가져오는 방법을 선택하였다. 중간에 상태페이지 정보를 가져오는 부분에서 수 많은 어려움과 시간이 걸렸었지만 포기하지않고 성공해서 더 한층 더 성장해지는 느낌이 들었다.😊

이제 응답시간을 한꺼번에 가져와 페이지 밑 부분에다가 그래프를 출력해봐야곘다.

첫글이다 보니 글 퀄리티가 거의 못 볼 꼴이네요... 읽어주셔서 감사합니다👍

Github Repository

https://github.com/SearchAI-Dev/SearchAI-Server-Status-Page

Status Page

https://status.searchai.me/
(이 페이지는 약간의 수정 작업이 들어갔어요. 참고부탁드려요..)
(수정 작업이 안된 페이지를 보고 싶으시다면 위 깃허브 Repository에서 사진을 봐주시거나 직접 설치하셔서 봐주세요. 😁 )