6. PostgreSQL 데이터를 Grafana에 띄우기 (마지막)

version: '3'

services:
  db:
    image: postgres:15.3
    environment:
      POSTGRES_PASSWORD: admin
      POSTGRES_USER: admin
      POSTGRES_DB: newsdb
    volumes:
      - ./sql/init.sql:/docker-entrypoint-initdb.d/init.sql
    ports:
      - "5432:5432"
  # 여기 아래부분이 Grafana deploy를 위해 추가된 부분이다.
  dashboard:
    image: grafana/grafana
    ports:
      - "3000:3000"
    depends_on:
      - db

그 다음 podman-compose up 을 통해서 grafana를 실행해보자

3. Grafana 접속

localhost:3000 으로 Grafana가 deploy 되어있는 페이지를 접속 할 수 있다.

초기 아이디/비밀번호는 admin/admin 이다.

4. Grafana와 PostgreSQL datasource 연결

Grafana에서 PostgreSQL의 데이터를 읽을 수 있도록

Grafana의 datasource에 PostgreSQL 정보를 입력해야한다.

Home - Connections - Add new connection으로 들어가서 DB연결을 추가해보도록 하자

Home - Connections - Add new connection 후 Postgres 입력

여기서 PostgreSQL을 찾고 Add new data source를 하면 아래와 같은 화면이 뜬다.

그러면 우리가 위에 podman-compose 파일에 정의한 데이터를 입력해주자.

아래를 채워주고 Save & test를 누르면 Database Connection이 잘 되는것을 확인할 수 있다.

Host	PostgreSQL의 실행 주소:5432
Database	newsdb
User	admin
Password	admin
TLS/SSL Mode	disable

5. Dashboard 구성하기

이전에 정의한 DB Table 모양에 따라서 보여주고 싶은 대로 Grafana 대시보드를 구성해보자.

아주 쉽게는 Dashboard를 생성해서 data source를 우리가 설정한 PostgreSQL-1으로 해주고 테이블을 그대로 출력하는것을 할 수 있다.

아래와 같은 순서로 모든 것들을 출력하게 하면 캡처 사진과 같이 우리가 저장한 데이터를 출력하는것을 확인할 수 있다.

Dashboards 메뉴로 들어가서

1. Create Dashboard - Add visualiazation

2. Datasource 선택

까지 하면 아래와 같은 화면이 나온다.

여기 화면에서 왼쪽 아래의

3. Table 선택

4. Column 선택 및 Column 추가\

5. 오른쪽 위의 Table view를 켜주고, 오른쪽 아래의 run query

를 모두 진행하면 아래와 같이 테이블 데이터를 출력함을 확인할 수 있다.

프로젝트 요약

여기서 contents 부분의 array 출력을 추가로 손보고 대시보드를 조금 꾸미면 크롤러 및 대시보드 구성 자체의 기능은 할 수 있다고 볼 수 있다.

여기서 crontab 같은것들을 활용해서 주기적으로 긁어 올 수 있는 프로그램을 만들면 완성이긴한데 이 뒷부분에 대해서는 굳이 포스팅을 하지 않아도 될것 같다.

아무튼 여기까지 GeekNews 대시보드 구성을 위한 준비였으며 어렵지 않게 대시보드 구성을 할 수 있음을 알아보았다.

이것들을 진행하면서 Typescript에 대해서 조금 더 공부해볼 수 있었던것 같고 또 다른 프로젝트를 만들면서 Typescript를 더 배워볼 수 있을것 같다.

저작자표시

'프로젝트 > GeekNews 대시보드 구성하기' 카테고리의 다른 글

5. Typescript + PostgreSQL - DB에 데이터 쓰기 (1)	2023.11.30
4. Typescript + PostgreSQL - DB 연결 및 데이터 읽어오기 (1)	2023.11.28
3. Typescript 로 html 데이터 파싱하기 (2)	2023.11.22
2. Typescript로 GeekNews의 RSS 읽어오기 (0)	2023.11.19
1. Typescript 개발 환경 설정하기 (0)	2023.11.18