+
97
-

python+html能否做一套好看的多服务器监控管理系统?

python+html能否做一套好看的多服务器监控管理系统?

可以监控多个服务器的性能,包含图表、服务器文件管理、网站部署等?

网友回复

+
8
-

您可以将这个文件(我们称之为 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%

我知道答案,我要回答