搭建uptime-kuma及Ward监控面板

yoyo 10/16/2021 uptime-kuma监控面板消息通知CloudFlare-WorkersWard

# 1. 基本介绍

# 1.1 uptime-kuma 简介

uptime-kuma是一款开源监控工具，类似于“Uptime Robot”，UI简洁美观，支持TCP/PING/HTTP监控等，支持多语言其中包括中文。当服务出现故障时，可自动通过 Telegram、Discord、Gotify、Slack、Pushover、Email (SMTP) 等多种服务发送通知消息。

项目地址：https://github.com/louislam/uptime-kuma (opens new window)

官方演示：https://demo.uptime.kuma.pet (opens new window)

uptime-kuma

# 1.2 Ward 简介

Ward 是一个使用 Java 开发的简单而简约的服务器监控工具。Ward 支持自适应设计系统，它还支持深色主题，它只显示服务器的主要信息。Ward 在所有流行的操作系统上运行良好，因为它使用 OSHI (opens new window)。

项目地址：https://github.com/B-Software/Ward (opens new window)

# 2. 搭建前的环境准备

以下我将采用Nginx+Docker部署的方式进行搭建，VPS系统用的是Debian 11 x86_64。VPS的购买及配置、域名解析、Docker的概念及使用...这些基本的就不再赘述了，如果不会的话见我的其他博客：VPS基本部署环境的搭建与配置 (opens new window)、Docker容器化及项目环境管理 (opens new window)。

# 2.1 Docker环境搭建

$ apt-get update -y && apt-get install curl -y  # 安装curl
$ curl https://get.docker.com | sh -   # 安装docker
$ sudo systemctl start docker  # 启动docker服务
$ docker version # 查看docker版本（客户端要与服务端一致）

1
2
3
4

# 2.2 申请Telegram Bot

这个是用于消息通知的，如果你不打算用TG进行消息通知，略过本节即可。如果你对Telegram和Telegram Bot还不够熟悉，可以先去看看我的另一篇博客：Telegram及TelegramBot使用指南 (opens new window)。

# 2.2.1 申请 Telegram Bot

找 BotFather 官方机器人申请自己的 Telegram Bot，需要记录下：BotName、TOKEN、CHATID等信息。

Step1：在Telegram中添加BotFather这个账号，然后依次发送/start，/newbot，按照提示即可创建一个新的机器人。记下来给你生成的token。
Step2：搜索刚刚创建的机器人的名字，并给它发送一条消息。（注意：需要先与机器人之间创建会话，机器人才能下发消息，否则机器人无法主动发送消息）
Step3：在Telegram中搜索userinfobot，并给它发送一条消息，它会返回给你chatid，将它也记下来。

# 2.2.2 修改 Telegram Bot 头像

还是找 BotFather 官方机器人，先发送/setuserpic，它会让你选择为哪个Bot修改，选择完之后发送头像图片给它即可。

注：头像以图片的形式发送，不要以文件的形式发送（发送时点上那个压缩图片即为图片的形式发送）

# 3. 搭建 uptime-kuma 面板

# 3.1 搭建 uptime-kuma 服务

# 3.1.1 使用 Docker 部署服务

$ docker volume create uptime-kuma
$ docker run -d --restart=always -p 3001:3001 -v uptime-kuma:/app/data --name uptime-kuma louislam/uptime-kuma:1

1
2

# 3.1.2 添加反向代理并开启 HTTPS

使用OneinStack搭建Nginx并配置反向代理及HTTPS，具体操作步骤此处不再赘述。

注意：与其他 Web 应用程序不同，Uptime Kuma 基于 WebSocket。还需要在 Nginx 里配置 "Upgrade" and "Connection" 才能反向代理 WebSocket。具体操作步骤如下：

在location /内添加上"Upgrade" and "Connection"的那两行配置。

server {
	...
	location / {
	  proxy_set_header HOST $host;
	  proxy_set_header X-Forwarded-Proto $scheme;
	  proxy_set_header X-Real-IP $remote_addr;
	  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	  proxy_pass http://uptime;
	  proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection "upgrade";
	}
}
upstream uptime {
  server 127.0.0.1:3001;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 3.2 使用 uptime-kuma 面板

# 3.2.1 面板基本配置

Chrome浏览器访问：https://域名，即可查看 uptime-kuma 服务监控面板，初始界面如下：

uptime-kuma初始仪表盘

点击设置按钮，可以对语言、主题、时区、是否允许搜索引擎索引、是否需要身份验证等多个方面进行个性化配置。

# 3.2.2 设置Telegram 消息通知

[1] 国外服务器设置TG消息通知

我们可以点击新增，创建监控项，填写 Bot Token 和 Chat ID 即可配置好 Telegram 消息通知。

uptime-kuma消息通知

[2] 解决国内部署无法发送TG通知的问题

由于国内GFW的原因，如果把 uptime-kuma 部署在国内服务器，则无法成功发送TG通知。我们可以用CloudFlare的workers部署Telegram Bot消息通知的反向代理来解决这个问题。

有关CloudFlare的基本使用就不再赘述了，如果不会的话见我的另一篇博客：VPS基本部署环境的搭建与配置 (opens new window)。

Step1：解析一个子域名备用（即反代域名）

在CloudFlare的网站DNS处解析一个域名，注意这里的 IPv4 地址填写成2.2.2.2，而不是你的服务器IP。

CloudFlare-workers域名解析

Step2：创建CloudFlare workers并配置路由

打开账号下的Workers侧边栏，点击创建服务，起一个服务名称，选择HTTP处理程序。

CloudFlare-workers创建workers

进去之后，点击“快速编辑”，在此配置js脚本，将Telegram官方地址转发到你的反代地址上。

脚本内容如下，注意将第一行bot之后的数字换成你TG token的数字部分。

const whitelist = ["/bot1111111111:"];
const tg_host = "api.telegram.org";

addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

function validate(path) {
    for (var i = 0; i < whitelist.length; i++) {
        if (path.startsWith(whitelist[i]))
            return true;
    }
    return false;
}

async function handleRequest(request) {
    var u = new URL(request.url);
    u.host = tg_host;
    if (!validate(u.pathname))
        return new Response('Unauthorized', {
            status: 403
        });
    var req = new Request(u, {
        method: request.method,
        headers: request.headers,
        body: request.body
    });
    const result = await fetch(req);
    return result;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

CloudFlare-workers配置js脚本

配置好这里之后，点击“保存并部署”。

打开根域名下的Workers侧边栏，点击添加路由，路由填写成反代域名/*，服务选择我们刚才配置的那个，环境选择production，保存即可。

CloudFlare-workers设置路由转发

Step3：修改uptime-kuma的代码

$ docker exec -it uptime-kuma /bin/bash
$ apt-get update && apt-get install vim -y             // 安装vim
$ vim /app/src/components/notifications/Telegram.vue   // 找到：api.telegram.org，将其替换成你的反代域名（就一处）
$ vim /app/server/notification-providers/telegram.js   // 找到：api.telegram.org，将其替换成你的反代域名（就一处）
$ exit 
$ docker restart uptime-kuma

1
2
3
4
5
6

之后再次使用 uptime-kuma 的消息通知，即可正常发送到你的 Telegram Bot上了。

# 3.2.3 面板版本更新

只需要如下命令即可更新，其他配置无需更改，数据也不会丢失（因为对其进行挂载了）

$ docker pull louislam/uptime-kuma:1
$ docker stop uptime-kuma
$ docker rm uptime-kuma
$ docker run -d --restart=always -p 3001:3001 -v uptime-kuma:/app/data --name uptime-kuma louislam/uptime-kuma:1

1
2
3
4

# 4. 搭建 Ward 面板

# 4.1 搭建 Ward 服务

# 4.1.1 克隆项目并构建镜像

官方提供了构建Docker镜像的Dockerfile文件，我们直接用它来构建即可。

$ git clone https://github.com/B-Software/Ward.git
$ cd /root/Ward
$ docker build . --tag ward

1
2
3

# 4.1.2 创建容器并完成基本设置

构建完镜像之后，我们便可以创建容器了，注意第二个-p 自定义端口号:自定义端口号处一定要填，下面会用到。

docker run -d --name ward -p 4000:4000 \
-p 自定义端口号:自定义端口号 \
--privileged=true \
--restart always \
ward:latest

1
2
3
4
5

然后我们用Chrome打开http://IP:4000/地址，我们会看到如下图的界面，在此完成基本设置。

搭建Ward服务

Server Name随便填，这个就是搭建完后的浏览器地址栏信息；然后可以选择命令主题或者黑暗主题；Application Port要填写成刚刚创建Docker容器时的自定义端口号。然后点击LAUNCH按钮即可完成基本设置。

注：如果这里填错了的话，可以进入容器内部，修改setup.ini文件即可。

$ docker exec -it ward /bin/sh
$ nano setup.ini

1
2

这时候我们用Chrome打开http://IP:自定义端口号/即可访问我们的监控面板了。

# 4.1.3 添加反向代理并开启HTTPS

使用OneinStack搭建Nginx并配置反向代理及HTTPS，具体操作步骤此处不再赘述。

# 4.2 Ward 监控面板说明

# 4.2.1 处理器监控

处理器名称
处理器利用率百分比
处理器内核数 (逻辑和物理内核)
当前处理器频率
处理器是否支持64位指令

# 4.2.2 内存监控

操作系统类型及其版本
RAM利用率百分比
已安装的 RAM 总量
生成已安装的 RAM（如果您有 dmidecode）
当前进程数

# 4.2.3 存储监控

Host0 存储名称
存储利用率百分比
当前安装的总存储空间（包括外部驱动器）
安装的磁盘数
虚拟内存总量（Linux中的交换空间）