Day 11:架设 Grafana (0)

做好了指标的收集,接下来还有一个很重要的步骤 --- 数据的视觉化,关於这方面的功能虽然 Prometheus 已经有内建简单的图表了,然而在实际运行的服务上它还是不够用,所以通常会看到搭配 Grafana 这套数据视觉化的工具来帮助我们更方便的浏览与分析收集到的资料。

设定 docker compose

架设 grafana 的步骤也很简单,透过 docker image 就可以直接部署了,services 内的定义看起来会像这样:

grafana:
  image: grafana/grafana:8.1.5
  restart: unless-stopped
  volumes:
    - ./grafana/data:/var/lib/grafana
    - ./grafana/provisioning:/etc/grafana/provisioning
  environment:
    - GF_SECURITY_ADMIN_USER=admin
    - GF_SECURITY_ADMIN_PASSWORD__FILE=/run/secrets/admin_password
    - GF_USERS_ALLOW_SIGN_UP=false
  ports:
    - 3000:3000
  secrets:
    - source: gf_admin_password
      target: admin_password

另外,因为这边我使用了 docker secrets 来储存 admin 密码,所以还需要在 docker-compose.yml 的最上层设定 secrets:

secrets:
  gf_admin_password:
    file: ./grafana/secrets/admin_password

这样就可以避免把敏感资讯写入 docker-compose.yml 里面了。另外关於 要如何透过环境变数去设定 grafana,可以参考这篇说明,而有关 docker container 的设定在这边

另外还有一种作法是直接使用 host 上的环境变数来设定,若是这样的话,grafana 的设定可能会长得像是下面这样:

grafana:
  image: grafana/grafana:8.1.5
  restart: unless-stopped
  volumes:
    - ./grafana/data:/var/lib/grafana
    - ./grafana/provisioning:/etc/grafana/provisioning
  environment:
    - GF_SECURITY_ADMIN_USER=$GF_ADMIN
    - GF_SECURITY_ADMIN_PASSWORD=$GF_ADMIN_PASS
    - GF_USERS_ALLOW_SIGN_UP=false
  ports:
    - 3000:3000

按照上面的定义,只要在我的 host 上面去设定 GF_ADMINGF_ADMIN_PASS 两个环境变数(也可以透过同目录底下的 .env 档),就可以在创建服务时注入到 container 内,详细的说明可以参考 docker 的官方文件

最後,还需要去修改 grafana/data 这个资料夹的权限设定,让他的 uid 与 container 使用的一致,所以在补一个 sudo chown -R 472:root grafana/data,或是在 service 的定义里面指定 uid 也是可以的选项。

都设定好之後,执行 docker-compose up -d 就可以把他们跑起来了,然後进到 http://localhost:3000,输入刚刚设定的帐号密码,就能看到 grafana 的首页了。

建立 data source

要做资料视觉化,我们首先要有资料嘛,所以第一步就是要来定义我们的资料哪里来,在 grafana 里面这就叫做 data source,目前官方有支援许多常见的工具(列表),甚至有需要的话我们可以自己开发 data source。那麽现在,我们先来设定一个 Prometheus 的 data source 吧。

首先点下首页那个大大的写有 "Add your first data source" 的按钮。

然後选择 Prometheus。

在 URL 栏位填入 http://prometheus:9090

按下最下面的 "Save & test",若是有跳出绿色勾勾,那麽我们就成功了。

建立 dashboard

接下来,我们就要来画图表了,然而懒人如我,通常都是习惯直接上 grafana 的官网,找找社群提供的模板汇入,像是这个就是做 caddy 资料的视觉化的。所以第一步,我们就先来复制它的 ID。

然後再点左边的 Import。

把刚刚的 ID 贴上去,按下 Load。

然後选择一个 data source,按下 import。然後...就会发现它显示一堆 no data,这也是使用模板的时候可能会遇到的一些问题,那麽明天就来试试看如何修复它吧!


<<:  Day11 TailwindCSS 介绍,在 Next.js 专案安装 TailwindCSS

>>:  Day 11 - 丰收款非官方 PHP SDK 发布

Day 28 让我胆战心惊的微服务 Vol.2

各位参赛选手~我是今天的主播 小笠宏树!各位准备好了!!!3 2 1 ~ 比赛开始! 今天来推脑洞神...

Day12 - 祖父元件与孙子元件间的传音入密

今天跟大神 重新认识 Vue.js | Kuro Hsu 跨越层级的传递方式 学习祖先元件怎麽传递家...

Day9:串列(list)

串列(list)是一种资料型态(Data type),在串列中的每一个元素都会被分配一个值从&quo...

#3-打字特效炫起来!(CSS Animation)

昨天的第三个按钮动态提案:文章传送门 使用了CSS动态的动态的主菜——Animation。 其实有很...

Day14-This

this的指向取决於谁呼叫 物件一定指向本身 其余必须透过call、bind等等强制绑定 我们先把...