lxb
/
Tool_CheckGPUsWeb
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

修改了下Readme，网页下方增加一个footer

lxb 4 months ago
parent
98a56aa10c
commit
68c7e30a18
3 changed files with 77 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      README.md
  2. 34
      web/css/style_1.css
  3. 17
      web/index.html

42
README.md
View File

@ -48,7 +48,7 @@ pyinstaller --onefile server.py
- port：改成合适的端口，服务器记得要开放这个端口。 - port：改成合适的端口，服务器记得要开放这个端口。
- server_list：所查询的服务器名称列表，客户端访问的时候只有下列对应的名称才会被处理。 - server_list：所查询的服务器名称列表，客户端访问的时候只有下列对应的名称才会被处理。
- note_dict：公告字典，可以给对应服务器显示公告。 - note_dict：公告字典，可以给对应服务器显示公告。
- api_name：api的名称，保持服务器和客户端统一即可。 - api_name：api的名称，保持服务器、客户端和nginx的设置统一即可。
修改配置文件之后需要**重启**程序才能生效。 修改配置文件之后需要**重启**程序才能生效。
@ -76,13 +76,13 @@ pyinstaller --onefile server.py
"api_name": "api" "api_name": "api"
} }
``` ```
- server_url：访问服务器的路径，即IP+端口，根据情况修改。 - server_url：访问服务器的路径，即IP+端口，根据情况修改。（按理来说是直接15002，但是用了nginx之后会根据设置将api的请求转发到15002上，nginx监听的15001所以这里就是15001）
- title：客户端本机的名称，只有这个名称在服务器的server_list中才会被处理。（那是不是任一个客户端程序设置到其他的title就会干扰其他服务器数据的显示？**是的**，除了这个title没有做其他验证，只能是人工确保一下每个客户端有单独的title） - title：客户端本机的名称，只有这个名称在服务器的server_list中才会被处理。（那是不是任一个客户端程序设置到其他的title就会干扰其他服务器数据的显示？**是的**，除了这个title没有做其他验证，只能是人工确保一下每个客户端有单独的title）
- interval：获取信息的间隔 - interval：获取信息的间隔
- note：公告，会与在服务器那边设置的公告合并显示。 - note：公告，会与在服务器那边设置的公告合并显示。
- enable：开启检测的内容，如果不需要检测某个数据删除掉即可，目前只支持`gpu`、`cpu`、`memory`、`storage`、`network`。 - enable：开启检测的内容，如果不需要检测某个数据删除掉即可，目前只支持`gpu`、`cpu`、`memory`、`storage`、`network`。
- storage_list：检测的硬盘的路径，需要检测哪条路径就加到这个上面。 - storage_list：检测的硬盘的路径，需要检测哪条路径就加到这个上面。
- api_name：与服务器保持一致即可，不然无法正常访问。 - api_name：与服务器、nginx的设置保持一致即可，不然无法正常访问。
修改配置文件之后需要**重启**程序才能生效。 修改配置文件之后需要**重启**程序才能生效。
@ -103,9 +103,37 @@ docker run -d \
将web目录下的内容放到数据卷的对应位置。 将web目录下的内容放到数据卷的对应位置。
有域名的话也可以搞一个反向代理，可参考 [服务器上使用Nginx部署网页+反向代理](http://blog.lxblxb.top/archives/1723257245091)。 另外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的端口。
**特别的**，`web/js/script.js`中有如下的代码，是通过`internal`来修改访问的URL，以实现访问内网的时候就采用内网的地址访问服务器，避免在内网的时候访问公网。这部分也要按需的修改一下。 最后，有域名的话也可以搞一个反向代理，可参考 [服务器上使用Nginx部署网页+反向代理](http://blog.lxblxb.top/archives/1723257245091)（现在看来这个博客可能写的是有些问题的）。
**特别的**，`web/js/script.js`中有如下的代码，是通过`internal`来修改访问的URL，以实现访问内网的时候就采用内网的地址访问服务器，避免在内网的时候访问公网。这部分也要按需的修改一下。如果只是在内网访问则直接让`apiURL`等于内网地址即可。
```js ```js
// 根据环境变量设置API URL // 根据环境变量设置API URL
if (environment === 'internal') { if (environment === 'internal') {
@ -114,8 +142,8 @@ if (environment === 'internal') {
apiURL = 'http://gpus.lxblxb.top'; apiURL = 'http://gpus.lxblxb.top';
} }
``` ```
以及nginx那边也需要一些配置，大概是设置下面的内容。好像还有一个地方设置成`internal`的？时间太久了不记得了。 以及反向代理的nginx那边也需要一些配置，大概是设置下面的内容。对应内网nginx设置的`internal`。
```bash ```
set $env "public"; set $env "public";
add_header X-Environment $env; add_header X-Environment $env;
``` ```

34
web/css/style_1.css
View File

@ -1,13 +1,37 @@
#header-container { #header-container {
/* background-color: beige; */
font-size: 32px; font-size: 32px;
font-weight: bold; font-weight: bold;
padding-left: 20px;
padding-top: 10px;
/* padding-bottom: 5px; */
} }
.header-container { /* 设置html和body的高度为100% */
/* display: grid; html, body {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); height: 100%;
gap: 10px; */ margin: 0;
padding: 0;
}
/* 使用flexbox布局 */
body {
display: flex;
flex-direction: column;
}
/* 主要内容区域，flex-grow: 1使其占据剩余空间 */
.content {
flex-grow: 1;
/* padding: 20px; */
}
/* Footer样式 */
footer {
background-color: #f1f1f1;
color: rgb(172, 172, 172);
text-align: center;
padding: 10px 0;
} }
.card { .card {

17
web/index.html
View File

@ -1,18 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服务器信息</title> <title>服务器信息</title>
<link rel="stylesheet" href="./css/style_1.css"> <link rel="stylesheet" href="./css/style_1.css">
</head> </head>
<body> <body>
<div id="header-container"> <div class="content">
服务器信息 <div id="header-container">
</div> 服务器信息
<div id="server-data"> </div>
<div id="server-data">
</div>
</div> </div>
<footer>
<p>Footer</p>
</footer>
<script src="./js/script.js"></script> <script src="./js/script.js"></script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save