Case Study- Zabbix에서 수집한 데이터를 커스텀 대시보드로 만드는 법

안녕하세요, 디무브 입니다.

Zabbix는 기업을 위한 오픈 소스 모니터링 솔루션으로 서버, 네트워크, 데이터베이스, VM, 쿠버네티스 등 다양한 상황의 데이터를 실시간으로 수집할 수 있습니다. 또, 수집된 데이터를 분석하여 정확한 통계를 내고 향후 수집될 데이터의 추산치를 예측하여 발생할 수 있는 장애를 대비할 수 있습니다.

Zabbix에서는 기본적으로 대시보드를 제공하고 있기 때문에 수집된 데이터를 기반으로 시각화된 네트워크 구성도와 그래프, 상위 데이터 표시 등을 통해 전반적인 인프라 상황을 한눈에 볼 수 있습니다.

 

 

하지만 기본 대시보드의 경우, 그래프의 시각화나 UI 부분에서 아쉬운 면이 있는데요. 이 때문에 Grafana와 같은 시각화 도구나 자체적인 웹 UI를 설계하여 Zabbix 데이터를 좀 더 가시성 있고 보기 좋게 시각화 하는 경우가 많습니다.

 

오늘은 Zabbix를 통해 데이터를 수집하고 프론트엔드 또는 별도 솔루션에 대시보드를 꾸밀 수 있는 방법에 대해 알아보겠습니다.

 

---

 

Zabbix 에서 수집한 데이터를 어떻게 가져올 수 있을까요?

🚩 Case 1 ::

데이터베이스와 직접적으로 연결하여 데이터 가져오기

 

첫 번째는 Zabbix에 저장된 데이터를 데이터베이스와 직접적으로 연결하여 가져오는 방법입니다.

기본적으로 Zabbix를 통해 수집된 데이터들은 데이터베이스의 history 테이블에 저장이 되는데요. 이 데이터들을 Zabbix 프론트엔드에서 보여주는 대시보드를 통해 확인하기 위해서는 아래 과정을 거쳐 사용자에게 표시하게 됩니다.

 

 

1	클라이언트에서 프론트엔드(웹 서버) 단으로 데이터를 요청
2	백엔드를 통해 데이터베이스와 연결하고, 지정된 쿼리의 결과 값을 가져와 Response 응답을 통해 사용자에게 화면으로 표시

 

 

아래 예시는 Zabbix Server에서 수집된 데이터를 쿼리를 통해 수집한 쿼리를 보여주고 있습니다.

 

mysql> select i.name, h.clock, h.value from history h join items i on i.itemid=h.itemid where i.name like '%poller%' limit 10;
+-----------------------------------------------------------------------------+------------+-----------------------+
| name                                                                        | clock      | value                 |
+-----------------------------------------------------------------------------+------------+-----------------------+
| Zabbix server: Utilization of history poller data collector processes, in % | 1693894389 |  0.003386616093199675 |
| Zabbix server: Utilization of history poller data collector processes, in % | 1693894449 |                     0 |
| Zabbix server: Utilization of history poller data collector processes, in % | 1693894509 |                     0 |
| Zabbix server: Utilization of history poller data collector processes, in % | 1693894569 | 0.0033867307887696005 |
| Zabbix server: Utilization of history poller data collector processes, in % | 1693894629 |  0.013546923155078402 |
| Zabbix server: Utilization of history poller data collector processes, in % | 1693894689 |                     0 |
| Zabbix server: Utilization of history poller data collector processes, in % | 1693894749 | 0.0033867307887696005 |
| Zabbix server: Utilization of history poller data collector processes, in % | 1693894809 | 0.0033850111705368627 |
| Zabbix server: Utilization of history poller data collector processes, in % | 1693894869 | 0.0033853549544669756 |
| Zabbix server: Utilization of history poller data collector processes, in % | 1693894929 |                     0 |
+-----------------------------------------------------------------------------+------------+-----------------------+
10 rows in set (0.01 sec)

 

 

---

 

🚩 Case 2 ::

Zabbix API를 활용하여 데이터를 가져오기

 

두 번째 방법은 Zabbix 의 API를 활용하여 데이터를 가져오는 방법입니다.

Zabbix API의 경우 JSON-RPC 2.0 버전을 기반으로 두고 있습니다. Zabbix 서버에 내장된 api_jsonrpc.php 파일을 통해 호출하며 URL을 포함한 POST 메서드를 통해 데이터를 요청합니다.

 

Zabbix API를 사용하는 방법은 아래와 같습니다.

 

 

1	Zabbix의 사용자 로그인 인증 API를 통해 세션 ID 값을 받거나 UI에서 API 토큰을 발급
2	가져오고자 하는 데이터의 메소드와 파라미터를 추가한 후 데이터를 요청

 

curl --request POST \
  --url 'https://example.com/zabbix/api_jsonrpc.php' \
  --header 'Content-Type: application/json-rpc' \
  --data '{"jsonrpc":"2.0","method":"user.login","params":{"username":"Admin","password":"zabbix"},"id":1}'

 

 

API 호출을 도식화 하면 아래와 같은 이미지로 도출할 수 있습니다.

Zabbix 공식 블로그

 

요청한 데이터들은 JSON 방식으로 결과를 반환합니다.

아래 예시는 Zabbix에서 발생한 장애 정보를 요청한 예시입니다.

 

{
    "jsonrpc": "2.0",
    "result": [
        {
            "eventid": "500233",
            "name": "Zabbix agent is not available (for 3m)",
            "severity": "3",
            "clock": "1671522892"
        }
    ],
    "id": 1
}

 

 

---

 

Zabbix 데이터를 활용하여 커스텀 대시보드 만들어보기

 

 

지금까지 어떻게 Zabbix 데이터를 가져왔는지에 대해 설명드렸습니다. 그렇다면 이제부터는 어떻게 Zabbix의 데이터를 가져와 커스텀 대시보드를 만들 수 있는지 알아보겠습니다.

커스텀 대시보드를 만들기 위해 구성한 테스트 환경과 데이터 수집 구조는 아래와 같습니다.

 

▶ 테스트 환경

Zabbix Server	Zabbix DB	Frontend	Backend
6.4 Version	MySQL	React	NodeJS

 

▶ 데이터 처리 프로세스

 

▶ 로그인 인증

로그인 인증 방식의 경우에는 Zabbix 웹 UI 환경에서 API Token을 발급받는 방식이 아닌, 로그인 인증 API를 요청하여 세션 ID 값을 발급받는 방식으로 진행해 보았습니다.

 

API 호출 결과는 JSON 형식으로 반환되며, 성공 시 토큰 값을 콘솔 로그로 확인할 수 있습니다.

 try {
    const response = await zabbixRequest('user.login', {
      username: Username,
      password: Password
    });

    const authToken = response.result;
    console.log(`로그인 성공! 토큰: ${authToken}`);
    return authToken;
  } catch (error) {
    console.error(`로그인 실패: ${error.message}`);
  }

 

▶ 데이터 요청

앞서 로그인 인증 API를 통해 정상적으로 인증이 되면, 데이터를 요청할 API를 만들어 데이터를 요청하였는데요. 예시에서는 CPU 사용량을 확인할 데이터를 요청하기 위해 CPU 사용량에 대한 파라미터와 세션 ID를 통해 데이터를 요청한 후, 데이터를 가공하여 프론트엔드에 전달하였습니다.

 

위 내용을 정리하면 아래와 같이 요약할 수 있습니다.

1. 전체 호스트의 CPU 사용량을 요청할 파라미터를 작성한다.  2. 로그인 인증 API를 통해 전달받은 세션 ID 값을 통해 인증을 진행한다.  3. 파라미터와 세션 ID 값을 기반으로 API 요청을 진행한다.  4. 반환된 결과 데이터를 배열로 저장한다.  5. 배열로 저장된 데이터를 프론트엔드로 보낸 뒤, 프론트엔드에서는 데이터를 테이블로 표시한다.

 

▶ CPU 사용량에 대한 API 요청을 보내는 코드

const response = await axios.post(ZabbixURL, {
      jsonrpc: '2.0',
      method: 'item.get',
      params: {
        output: ['lastvalue'],
        selectHosts:'extend',
        search: {
          'name': 'CPU utilization'
        },
      
      },
      auth: authToken,
      id: 1
      
    })

 

▶ 배열로 저장된 데이터를 프론트엔드로 반환하는 과정

return (
    <Grid container spacing={1}>
      <Grid item xs={12} style={{ padding: 10 }}>
        <Card {...props} style={{ height: "auto" }}>
          <CardHeader title={title} />
          <CardContent style={{ paddingTop: "12px" }}>
            <TableContainer component={Paper}>
              <Table>
                <StyledTableHead>
                  <TableRow>
                    <StyledTableCell>No</StyledTableCell>
                    <StyledTableCell>장비명</StyledTableCell>
                    <StyledTableCell>사용률(%)</StyledTableCell>
                  </TableRow>
                </StyledTableHead>
                <TableBody>
                  {sampleData.map((row, index) => (
                    <TableRow key={index}>
                      <TableCell>{index+1}</TableCell>
                      <TableCell>{row.serviceName}</TableCell>
                      <TableCell>{row.usageRate}%</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          </CardContent>
        </Card>
      </Grid>
    </Grid>

 

 

자바스크립트에서 수집된 데이터를 가공한 후 프론트엔드로 출력하여 아래와 같은 홈페이지를 구성할 수 있습니다.

 

 

 

지금까지 Zabbix를 활용하여 커스텀 대시보드를 구축하는 방법에 대해 알아보았습니다.

Zabbix는 서버, 네트워크, 데이터베이스 등 다양한 데이터 요소를 모니터링 할 수 있는 강력한 오픈소스 도구로 다양한 API를 제공하기 때문에 손쉽게 연결하여 커스텀 대시보드를 구현할 수 있습니다. 이와 관련해서 도움이 필요하시다면 언제든 디무브를 찾아주세요.

감사합니다.

 

---

 

 

Zabbix에 대해 더 자세히 알고 싶으신가요? 도움이 필요하신가요? 디무브에게 물어보세요 👀