diff --git a/README.md b/README.md index d25d765..447c32c 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ pyinstaller --onefile server.py - port：改成合适的端口，服务器记得要开放这个端口。 - server_list：所查询的服务器名称列表，客户端访问的时候只有下列对应的名称才会被处理。 - note_dict：公告字典，可以给对应服务器显示公告。 -- api_name：api的名称，保持服务器和客户端统一即可。 +- api_name：api的名称，保持服务器、客户端和nginx的设置统一即可。 修改配置文件之后需要**重启**程序才能生效。 @@ -76,13 +76,13 @@ pyinstaller --onefile server.py "api_name": "api" } ``` -- server_url：访问服务器的路径，即IP+端口，根据情况修改。 +- 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：与服务器保持一致即可，不然无法正常访问。 +- api_name：与服务器、nginx的设置保持一致即可，不然无法正常访问。 修改配置文件之后需要**重启**程序才能生效。 @@ -103,9 +103,37 @@ docker run -d \ 将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 // 根据环境变量设置API URL if (environment === 'internal') { @@ -114,8 +142,8 @@ if (environment === 'internal') { apiURL = 'http://gpus.lxblxb.top'; } ``` -以及nginx那边也需要一些配置，大概是设置下面的内容。好像还有一个地方设置成`internal`的？时间太久了不记得了。 -```bash +以及反向代理的nginx那边也需要一些配置，大概是设置下面的内容。对应内网nginx设置的`internal`。 +``` set $env "public"; add_header X-Environment $env; ``` diff --git a/web/css/style_1.css b/web/css/style_1.css index 0b90a43..ef6aab8 100644 --- a/web/css/style_1.css +++ b/web/css/style_1.css @@ -1,13 +1,37 @@ #header-container { - /* background-color: beige; */ font-size: 32px; font-weight: bold; + padding-left: 20px; + padding-top: 10px; + /* padding-bottom: 5px; */ } -.header-container { - /* display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 10px; */ +/* 设置html和body的高度为100% */ +html, body { + height: 100%; + 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 { diff --git a/web/index.html b/web/index.html index 32e0425..bfb9742 100644 --- a/web/index.html +++ b/web/index.html @@ -1,18 +1,27 @@ + 服务器信息 + -
- 服务器信息 -
-
+
+
+ 服务器信息 +
+
+
+ + + \ No newline at end of file