python+html能否做一套好看的多服务器监控管理系统?
可以监控多个服务器的性能,包含图表、服务器文件管理、网站部署等?
网友回复
您可以将这个文件(我们称之为 agent.py)分发到您需要监控的每一台服务器上运行。
这个代理程序将完成两件事:
提供一个独立的网页:在每台服务器上直接访问 http://<服务器IP>:5000,可以实时看到该服务器的性能指标。
提供一个数据接口:它有一个接口,可以被一个“中心服务器”调用,以收集这台服务器的性能数据。
接下来,我将提供两个代码块:
agent.py: 这是您需要部署到每一台被监控服务器上的核心代码。
central_server.py: 这是一个简单的汇总服务器示例,用来向所有 agent.py 拉取数据并统一展示。
第1步:监控代理 agent.py
将以下代码保存为 agent.py 文件,并将其放置在您想要监控的每一台服务器上。
安装依赖:在每台服务器上,您需要先安装几个必要的 Python 库:
pip install Flask psutil
代码 (agent.py):
import psutil
import platform
import socket
from flask import Flask, jsonify, render_template_string
# 创建 Flask 应用
app = Flask(__name__)
# --- 内嵌的 HTML 模板 ---
# 使用 Jinja2 模板语法 {{ variable_name }} 来插入动态数据
HTML_TEMPLATE = """
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服务器状态监控 - {{ hostname }}</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f4f7f9; color: #333; margin: 0; padding: 20px; }
.container { max-width: 800px; margin: 0 auto; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; }
h1, h2 { color: #2c3e50; border-bottom: 2px solid #e0e0e0; padding-bottom: 10px; }
.metric { margin-bottom: 20px; }
.metric-label { font-weight: bold; color: #555; display: block; margin-bottom: 5px; }
.progress-bar { width: 100%; background-color: #e0e0e0; border-radius: 4px; overflow: hidden; }
.progress { height: 20px; color: #fff; text-align: center; line-height: 20px; font-weight: bold; transition: width 0.5s ease-in-out; }
.cpu { background-color: #3498db; }
.memory { background-color: #2ecc71; }
.disk { background-color: #e74c3c; }
.info-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.info-table td { padding: 8px 12px; border: 1px solid #ddd; }
.info-table tr:nth-child(even) { background-color: #f9f9f9; }
.info-table td:first-child { font-weight: bold; width: 30%; }
footer { text-align: center; margin-top: 20px; color: #888; font-size: 0.9em; }
</style>
</head>
<body>
<div class="container">
<h1>服务器状态监控</h1>
<div class="metric">
<span class="metric-label">主机名: {{ hostname }} (IP: {{ ip_address }})</span>
</div>
<div class="metric">
<span class="metric-label">CPU 使用率</span>
<div class="progress-bar">
<div class="progress cpu" style="width: {{ cpu_percent }}%;">{{ cpu_percent }}%</div>
</div>
</div>
<div class="metric">
<span class="metric-label">内存使用率</span>
<div class="progress-bar">
<div class="progress memory" style="width: {{ memory.percent }}%;">{{ memory.percent }}%</div>
</div>
</div>
<div class="metric">
<span class="metric-label">磁盘使用率 ({{ disk.mountpoint }})</span>
<div class="progress-bar">
<div class="progress disk" style="width: {{ disk.percent }}%;">{{ disk.percent }}%</div>
</div>
</div>
<h2>详细信息</h2>
<table class="info-table">
<tr><td>操作系统</td><td>{{ system_info.system }} {{ system_info.release }}</td></tr>
<tr><td>CPU 核心数</td><td>物理核心: {{ cpu_cores.physical }}, 总核心: {{ cpu_cores.logical }}</td></tr>
<tr><td>总内存</td><td>{{ '%.2f'|format(memory.total / (1024*1024*1024)) }} GB</td></tr>
<tr><td>已用内存</td><td>{{ '%.2f'|format(memory.used / (1024*1024*1024)) }} GB</td></tr>
<tr><td>总磁盘空间</td><td>{{ '%.2f'|format(disk.total / (1024*1024*1024)) }} GB</td></tr>
<tr><td>已用磁盘空间</td><td>{{ '%.2f'|format(disk.used / (1024*1024*1024)) }} GB</td></tr>
</table>
</div>
<footer>
<p>页面将自动刷新。最后更新于 <span id="update-time"></span></p>
</footer>
<script>
// 自动刷新页面以获取最新数据
setTimeout(() => {
location.reload();
}, 15000); // 15秒刷新一次
// 显示最后更新时间
document.getElementById('update-time').innerText = new Date().toLocaleTimeS...点击查看剩余70%


