# 1. 简介
在网页上同时查看多个服务器的信息（CPU、网络、内存、硬盘、显卡）

（这里确认一下表述，这里的`服务端`指的是运行server.py的服务器，`客户端`指的是被查询信息的服务器，即运行client.py或直接被查询）

分为服务端和客户端，客户端向服务端发送本机数据，服务端整理所有客户端的数据，**服务端不再需要保存客户端的密钥**。

**除此之外**，仍然保留了由服务端通过SSH主动查询客户端的方式（因为有的客户端，如租的AutoDL，无法主动给这个内网服务端发送数据，所以只能采用服务端主动访问客户端的方式）。**但能够采用客户端发送方式的尽量采用客户端，避免密钥或密码直接存在服务器上。**

![](pics/demo.png)

**Tips:** 将鼠标悬浮在`网络`、`CPU占用率`、`存储空间`、`GPU使用情况的用户`上时可以查看更详细的信息。
# 2. 开发环境

可在conda中安装虚拟环境，linux和windows都可以。
```bash
pip install flask flask-cors psutil -i https://pypi.tuna.tsinghua.edu.cn/simple
```

# 3. 运行部署
客户端的机器上 **可能** 还需要通过APT安装一下`gpustat`，最好是`1.1.1`版的，`0.6.0`貌似会出问题。

可以使用`pyinstaller`将python程序打包得到客户端和服务端的可执行程序，则不再需要安装运行环境。如果不打包直接用python执行的话就要安装前面的开发环境。
```bash
pyinstaller --onefile client.py
pyinstaller --onefile server.py
```
执行命令之后，可以`dist`目录内找到两个可执行文件，将`client`文件放到客户端的合适的地方，`server`放到服务器的合适的地方。客户端指的就是需要获取数据的机器，服务端就是网页所在的机器。
以及放置对应的`client_config.json`和`server_config.json`。

## 3.1. 服务端

执行以下命令即可，注意server和json要改为实际的路径。可以用screen或者systemctl来保持后台执行，推荐使用systemctl实现开机自启。
```bash
/home/lxb/projects/Tool_CheckGPUsWeb/dist/server --cfg /home/lxb/projects/Tool_CheckGPUsWeb/server_config.json
```

其中`server_config.json`的内容如下：

```json
{
    "host": "0.0.0.0",
    "port": 15002,
    "server_list":["76", "174", "233", "222"],
    "note_dict":{
        "76" : "这是一个公告内容"
    },
    "api_name": "api",

    // 以下是主动查询方式相关的内容，不需要时可全部删除
    "reconnect_interval" : 10,
    "connect_check_interval" : 3,
    "connect_server" : [
        {
            "title": "SERVER_76",
            "ip": "lxblxb.top",
            "port": 66666,
            "username": "lxb",
            "key_filename": "/home/lxb/.ssh/id_rsa",
            "network_interface_name": "eno2",
            "storage_list": [
                "/media/D",
                "/media/F"
            ]
        }
    ]
}
```
- host：不用改。
- port：改成合适的端口，服务器记得要开放这个端口。
- server_list：所查询的服务器名称列表，客户端访问的时候只有下列对应的名称才会被处理。
- note_dict：公告字典，可以给对应服务器显示公告（客户端发送方式和主动查询方式均可设置）。
- api_name：api的名称，保持服务器、客户端和nginx的设置统一即可。
- reconnect_interval：主动查询时，断连之后的重连时间。
- connect_check_interval：主动查询时，查询的间隔。
- connect_server：主动查询时，所需要查询的客户端信息（具体参数含义与[master分支中的Readme](http://git.lxblxb.top/lxb/Tool_CheckGPUsWeb/src/branch/master#2-3-%E5%90%8E%E7%AB%AF%E9%83%A8%E7%BD%B2)中的一样，如果权限允许的话同样也可以使用密码登录），可配置多个。

修改配置文件之后需要**重启**程序才能生效。

## 3.2. 客户端

执行以下命令即可，注意client和json要改为实际的路径。可以用screen或者systemctl来保持后台执行，推荐使用systemctl实现开机自启。
```bash
/home/lxb/projects/ServerInfo-client/client --cfg /home/lxb/projects/ServerInfo-client/client_config.json
```

其中`client_config.json`中的内容如下，
```json
{
    "server_url": "http://10.1.16.174:15001",
    "title": "174",
    "interval": 3.0,
    "note": "",
    "enable": ["gpu", "cpu", "memory", "storage", "network"],
    "storage_list":[
        "/",
        "/media/D",
        "/media/E",
        "/media/F"
    ],
    "api_name": "api"
}
```
- server_url：访问服务器的路径，即IP+端口，根据情况修改。（按理来说是直接15002，但是用了nginx之后会根据设置将api的请求转发到15002上，nginx监听的15001所以这里就是15001）
- title：客户端本机的名称，只有这个名称在服务器的server_list中才会被处理。（那是不是任一个客户端程序设置到其他的title就会干扰其他服务器数据的显示？**是的**，除了这个title没有做其他验证，只能是人工确保一下每个客户端有单独的title）
- interval：获取信息的间隔
- note：公告，会与在服务器那边设置的公告合并显示。
- enable：开启检测的内容，如果不需要检测某个数据删除掉即可，目前只支持`gpu`、`cpu`、`memory`、`storage`、`network`。
- storage_list：检测的硬盘的路径，需要检测哪条路径就加到这个上面。
- api_name：与服务器、nginx的设置保持一致即可，不然无法正常访问。

修改配置文件之后需要**重启**程序才能生效。

另外需要注意，主动查询方式有一点内容和客户端发送方式不一样（其余内容应该都是一样的，虽然具体的查询实现方式不一样），就是客户端发送方式的信息卡片中，将鼠标移动到cpu占用率的位置悬停会显示每一个核的占用率。而主动查询方式因为考虑到实现方式有点浪费带宽以及查看每一个核占用率用处不是特别大，就不查询这个数据了，悬停的时候只显示-1作为提示。

## 3.3. 网页部署
> **注意**，网页部署这一块的文档可能还存在着不少问题，主要是当时是用GPT等工具辅助的搞的，现在再写这个文档已经过了好久细节记不清了。还有nginx这里写的也是用容器，但是好像不用容器的话会更好一些。
> 
> 这部分文档还需要优化。

可以使用docker运行一个nginx的容器来简单的部署这个网页。
首先安装docker，安装完之后可执行命令`docker run -d -p 80:80 -v /home/lxb/nginx_gpus:/usr/share/nginx/html --name nginx_gpus nginx:latest`，注意**按需修改命令**，具体可修改内容如下。
```bash
docker run -d \
  -p <宿主机上映射的端口>:80 \
  -v <宿主机上数据卷的位置>:/usr/share/nginx/html \
  --name <容器名称> \
  nginx:latest
```

将web目录下的内容放到数据卷的对应位置。

另外nginx的配置如下：
```
server {
        listen          15001;
        listen     [::]:15001;
        # server_name   *;

        location / {
                root    /usr/share/nginx/html/serverInfo_web;
                index   index.html index.htm;
                try_files $uri $uri/ =404;
        }

        location /api/ {
                proxy_pass http://localhost:15002;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }

        set $env "internal";
        add_header X-Environment $env;

}
```
也就是直接访问服务器的15001端口可以访问网页，然后通过访问对应的`api`接口会转发到15002端口上，也就是flask的端口。

最后，有域名的话也可以搞一个反向代理，可参考 [服务器上使用Nginx部署网页+反向代理](http://blog.lxblxb.top/archives/1723257245091)（现在看来这个博客可能写的是有些问题的）。

**特别的**，`web/js/script.js`中有如下的代码，是通过`internal`来修改访问的URL，以实现访问内网的时候就采用内网的地址访问服务器，避免在内网的时候访问公网。这部分也要按需的修改一下。如果只是在内网访问则直接让`apiURL`等于内网地址即可。
```js
// 根据环境变量设置API URL
if (environment === 'internal') {
    apiURL = 'http://10.1.16.174:15001';
} else {
    apiURL = 'http://gpus.lxblxb.top';
}
```
以及反向代理的nginx那边也需要一些配置，大概是设置下面的内容。对应内网nginx设置的`internal`。
```
set $env "public";
add_header X-Environment $env;
```

# 4. 其他
- `永辉`帮忙搞了一下顶部checkbox布局的问题（在这一版中没有加上checkbox）。
- 参考`治鹏`的方法加了每张显卡的用户使用的情况。