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

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

![](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"
}
```
- host：不用改。
- port：改成合适的端口，服务器记得要开放这个端口。
- server_list：所查询的服务器名称列表，客户端访问的时候只有下列对应的名称才会被处理。
- note_dict：公告字典，可以给对应服务器显示公告。
- api_name：api的名称，保持服务器和客户端统一即可。

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

## 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+端口，根据情况修改。
- title：客户端本机的名称，只有这个名称在服务器的server_list中才会被处理。（那是不是任一个客户端程序设置到其他的title就会干扰其他服务器数据的显示？**是的**，除了这个title没有做其他验证，只能是人工确保一下每个客户端有单独的title）
- interval：获取信息的间隔
- note：公告，会与在服务器那边设置的公告合并显示。
- enable：开启检测的内容，如果不需要检测某个数据删除掉即可，目前只支持`gpu`、`cpu`、`memory`、`storage`、`network`。
- storage_list：检测的硬盘的路径，需要检测哪条路径就加到这个上面。
- api_name：与服务器保持一致即可，不然无法正常访问。

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

## 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部署网页+反向代理](http://blog.lxblxb.top/archives/1723257245091)。

**特别的**，`web/js/script.js`中有如下的代码，是通过`internal`来修改访问的URL，以实现访问内网的时候就采用内网的地址访问服务器，避免在内网的时候访问公网。这部分也要按需的修改一下。
```js
// 根据环境变量设置API URL
if (environment === 'internal') {
    apiURL = 'http://10.1.16.174:15001';
} else {
    apiURL = 'http://gpus.lxblxb.top';
}
```
以及nginx那边也需要一些配置，大概是设置下面的内容。好像还有一个地方设置成`internal`的？时间太久了不记得了。
```bash
set $env "public";
add_header X-Environment $env;
```

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