搭建uptime-kuma及Ward服务监控面板

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)

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版本（客户端要与服务端一致）

2.2 使用OneinStack搭建Nginx并进行配置

2.2.1 OneinStack简介

项目简介：OneinStack是一套部署开发环境的脚本工具，它的部署方式是纯原生部署，我主要使用里面的Nginx，用来辅助生成配置。

项目地址：https://github.com/oneinstack/oneinstack (opens new window)

2.2.2 使用OneinStack搭建Nginx服务

$ wget -c http://mirrors.linuxeye.com/oneinstack-full.tar.gz && tar xzf oneinstack-full.tar.gz && ./oneinstack/install.sh --nginx_optio

注：OneinStack采用编译安装的方式搭建Nginx服务，速度比较慢，请耐心等待，常用的默认目录有：

Nginx安装目录: /usr/local/nginx
Nginx配置目录：/usr/local/nginx/conf
网站数据目录：/data/wwwroot/域名

2.2.3 创建网站开启HTTPS

OneinStack 内置了 acme.sh，它会自动帮你申请 SSL 证书。

$ cd ./oneinstack
$ ./vhost.sh

配置过程的参考示例如下（示例域名为www.demo.com）：

#######################################################################
#       OneinStack for CentOS/RedHat 7+ Debian 8+ and Ubuntu 16+      #
#       For more information please visit https://oneinstack.com      #
#######################################################################

What Are You Doing?
        1. Use HTTP Only
        2. Use your own SSL Certificate and Key
        3. Use Let's Encrypt to Create SSL Certificate and Key
        q. Exit
Please input the correct option: 2 【选择2】（使用了Cloudfare CDN的话，可以选择自签名证书）

Please input domain(example: www.example.com): www.demo.com 【输入域名】
domain=www.demo.com

Please input the directory for the domain:www.demo.com :
(Default directory: /data/wwwroot/www.demo.com): 【回车，使用默认配置】
Virtual Host Directory=/data/wwwroot/www.demo.com

Create Virtul Host directory......
set permissions of Virtual Host directory......

Do you want to add more domain name? [y/n]: n  【输入n，不添加其他域名了】

Do you want to redirect all HTTP requests to HTTPS? [y/n]: y  【输入y，强制HTTPS】

You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.

Country Name (2 letter code) [CN]: 【回车】

State or Province Name (full name) [Shanghai]: 【回车】

Locality Name (eg, city) [Shanghai]: 【回车】

Organization Name (eg, company) [Example Inc.]: 【回车】

Organizational Unit Name (eg, section) [IT Dept.]: 【回车】

Do you want to add hotlink protection? [y/n]: n 【输入n，不需要防盗链保护】

Allow Rewrite rule? [y/n]: y 【输入y，允许重写规则】

Please input the rewrite of programme :
wordpress,opencart,magento2,drupal,joomla,codeigniter,laravel
thinkphp,pathinfo,discuz,typecho,ecshop,nextcloud,zblog,whmcs rewrite was exist.
(Default rewrite: other): 【回车】
You choose rewrite=other

Allow Nginx/Tengine/OpenResty access_log? [y/n]: y  【输入y，允许日志记录】
You access log file=/data/wwwlogs/www.demo.com_nginx.log

#######################################################################
#       OneinStack for CentOS/RedHat 7+ Debian 8+ and Ubuntu 16+      #
#       For more information please visit https://oneinstack.com      #
#######################################################################
Your domain:                  www.demo.com
Virtualhost conf:             /usr/local/nginx/conf/vhost/www.demo.com.conf
Directory of:                 /data/wwwroot/www.demo.com
Rewrite rule:                 /usr/local/nginx/conf/rewrite/other.conf
Self-signed SSL Certificate:  /usr/local/nginx/conf/ssl/www.demo.com.crt
SSL Private Key:              /usr/local/nginx/conf/ssl/www.demo.com.key
SSL CSR File:                 /usr/local/nginx/conf/ssl/www.demo.com.csr

配置完成后，修改一下配置文件

$ vim /usr/local/nginx/conf/vhost/www.demo.com.conf

server模块删除内容：

  location ~ [^/]\.php(/|$) {
    #fastcgi_pass remote_php_ip:9000;
    fastcgi_pass unix:/dev/shm/php-cgi.sock;
    fastcgi_index index.php;
    include fastcgi.conf;
  }

  location /.well-known {
    allow all;
  }

server模块新增内容：

location ^~ /.well-known/acme-challenge/ {
  default_type "text/plain";
  allow all;
  root /data/wwwroot/www.demo.com/;  # 把路径换一下
}

检查并重载Nginx配置

$ nginx -t
$ nginx -s reload

注：使用nginx -t命令可以检查Nginx配置，若出现如下内容则说明配置正确。

nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

之后把资源文件放置到 /data/wwwroot/www.demo.com 目录即可，打开Chrome浏览器即可访问（如果出现403则需要给这个目录添加一下权限）。

2.2.4 配置反向代理

如果需要配置反向代理的话（比如Docker部署的服务），流程同上，只是修改Nginx配置文件处有所不同。

server模块删除内容：

  location ~ [^/]\.php(/|$) {
    #fastcgi_pass remote_php_ip:9000;
    fastcgi_pass unix:/dev/shm/php-cgi.sock;
    fastcgi_index index.php;
    include fastcgi.conf;
  }
  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
    expires 30d;
    access_log off;
  }
  location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
  }
    location /.well-known {
    allow all;
  }

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://demo;  # 与下面 upstream 的名称一致即可
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
  proxy_pass http://demo;  # 与下面 upstream 的名称一致即可
  expires 30d;
  access_log off;
}
location ~ .*\.(js|css)?$ {
  proxy_pass http://demo;   # 与下面 upstream 的名称一致即可
  expires 7d;
  access_log off;
}
location ^~ /.well-known/acme-challenge/ {
  default_type "text/plain";
  allow all;
  root /data/wwwroot/www.demo.com/;  # 把路径换一下
}

与server模块同级新增内容：

upstream demo {
  server 127.0.0.1:8888;  # 8888换成自己的反向代理端口号
}

2.3 申请Telegram Bot

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

2.3.1 申请 Telegram Bot

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

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

2.3.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

3.1.2 添加反向代理并开启 HTTPS

通用的创建网站开启HTTPS并配置反向代理见本文2.2节。

注意：与其他 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;
}

3.2 使用 uptime-kuma 面板

3.2.1 面板基本配置

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

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

3.2.2 设置Telegram 消息通知

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

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

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

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

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

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

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

Step2：创建CloudFlare workers并配置路由

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

进去之后，点击“快速编辑”，在此配置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;
}

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

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

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

之后再次使用 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

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

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

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

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

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

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

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

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

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

4.1.3 添加反向代理并开启HTTPS

通用的创建网站开启HTTPS并配置反向代理见本文2.2节。

4.2 Ward 监控面板说明

4.2.1 处理器监控

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

4.2.2 内存监控

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

4.2.3 存储监控

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

4.2.4 运行情况监控

此块包含正常运行时间和图表部分。正常运行时间表示自上次在 Linux 上启动以来的时间，以及在 Windows 上硬重置之间的时间。它还有分页器，可用于获取作者联系人。图表部分显示最近十五秒的服务器利用率。（处理器、内存、存储）您可以通过单击图表部分右上角的矩形来隐藏分离的数据集。

5. 参考资料

[1] 一个花哨的自托管监控工具 from Github (opens new window)

[2] uptime-kuma的高级安装 from Github (opens new window)

[3] uptime-kuma反向代理配置 from Github (opens new window)

[4] uptime-kuma 如何更新 from Github (opens new window)

[5] 一个UPTIME监控系统：UPTIME KUMA from 周先生 (opens new window)

[6] 用CloudFlare的workers部署Telegram Bot通知反代 from 周先生 (opens new window)

[7] 自建CloudFlare Serverless Worker反代Telegram通知+支持Post from 1024ee (opens new window)

[8] 使用CloudFlare的Workers反向代理网站的三种源码 from 行而思雨 (opens new window)

[9] Cloudflare Workers 反代使用 GitHub 仓库搭建的图床 from Rabbir (opens new window)

[10] Ward：一个简约的服务器监控工具 from 荒岛 (opens new window)

[11] Ward：一个简约美观多系统支持的云监控 from wittoy's blog (opens new window)