服务器仪表盘

相关源文件

• assets/frps/static/index-82-40HIG.js
• assets/frps/static/index.html
• client/admin_api.go
• server/dashboard_api.go
• web/frps/components.d.ts
• web/frps/src/App.vue
• web/frps/src/components/ProxiesTCPMux.vue
• web/frps/src/components/ProxyView.vue
• web/frps/src/components/ProxyViewExpand.vue
• web/frps/src/components/ServerOverview.vue
• web/frps/src/router/index.ts
• web/frps/src/utils/proxy.ts

FRP 服务器仪表盘为监控和管理 frps (FRP 服务器) 实例提供了一个基于 Web 的界面。它提供实时统计数据、代理状态可视化和基本的管理功能，以帮助管理员监督他们的 FRP 部署。

有关客户端管理界面的信息，请参阅 客户端管理界面。

架构概述

服务器仪表盘由 Go 实现的后端 API 和基于 Vue.js 和 Element Plus UI 框架构建的前端单页应用程序 (SPA) 组成。

来源: server/dashboard_api.go40-67 assets/frps/static/index.html1-15

启用仪表盘

仪表盘默认在 7500 端口启用，但可以通过 frps 配置文件进行配置。

dashboard_user 和 dashboard_pwd 参数用于 HTTP 基本身份验证，以保护仪表盘。

仪表板功能

概览页面

概览页面提供了 frps 实例的全面视图，包括

• 服务器版本和配置信息
• 流量统计（以图表形式可视化）
• 当前连接数和代理数
• 客户端数量
• 服务器端口配置

来源: web/frps/src/components/ServerOverview.vue1-196 server/dashboard_api.go97-133

代理管理

仪表盘为每种代理类型提供单独的视图，允许管理员

• 查看特定类型的代理（TCP、UDP、HTTP、HTTPS 等）
• 监控代理状态（在线/离线）
• 跟踪每个代理的连接和流量
• 查看每个代理的详细配置
• 可视化流量统计

每个代理都可以展开以显示详细的配置信息，并且可以通过图表查看流量数据。

来源: web/frps/src/components/ProxyView.vue1-146 web/frps/src/components/ProxyViewExpand.vue1-114

数据结构

仪表盘按代理类型组织代理，所有代理类型都有通用的基本结构以及每种类型的专用字段。

代理类型	特定属性
TCP/UDP	远程端口
HTTP/HTTPS	自定义域名、子域名、位置、主机头重写
TCPMux	自定义域名、子域名、多路复用器、按 HTTP 用户路由
STCP/SUDP	仅基础属性

所有代理类型共享通用属性，如名称、加密、压缩、连接数、流量统计和状态。

来源: web/frps/src/utils/proxy.ts1-158 server/dashboard_api.go134-193

API 端点

服务器仪表盘提供以下 API 端点

端点	方法	描述
/healthz	GET	健康检查端点
/api/serverinfo	GET	获取服务器信息和统计数据
/api/proxy/{type}	GET	按类型获取代理
/api/proxy/{type}/{name}	GET	获取特定代理的详细信息
/api/traffic/{name}	GET	获取特定代理的流量统计
/api/proxies?status=offline	DELETE	清除离线代理
/metrics	GET	Prometheus 指标 (如果已启用)

来源: server/dashboard_api.go40-67

服务器信息响应

/api/serverinfo 端点返回有关服务器的全面信息。

来源: server/dashboard_api.go69-89 server/dashboard_api.go97-133

代理信息响应

代理信息端点返回已配置代理的详细信息，包括

• 代理名称和类型
• 特定于代理类型的配置详细信息
• 当前连接数
• 流量统计
• 状态（在线/离线）
• 最后启动/关闭时间
• 客户端版本（如果在线）

来源: server/dashboard_api.go197-208 server/dashboard_api.go214-271

用户界面

仪表盘 UI 组织如下部分

1. 顶部标题：包含 FRP logo 和浅色/深色主题切换器
2. 侧边导航：提供概览和不同代理类型视图的访问
3. 内容区域：显示选定的视图

导航结构

来源: web/frps/src/App.vue1-128 web/frps/src/router/index.ts1-58

管理操作

清除离线代理

仪表盘允许管理员从系统中清除离线代理。此操作会删除已不再连接到服务器的代理的统计信息，有助于使仪表盘保持整洁并专注于活动代理。

要清除离线代理

1. 导航到任何代理类型视图
2. 点击“ClearOfflineProxies”按钮
3. 在对话框中确认操作

此操作会触发一个 DELETE 请求到 /api/proxies?status=offline。

来源: web/frps/src/components/ProxyView.vue11-22 server/dashboard_api.go385-406

认证和安全

仪表盘受 HTTP 基本身份验证保护。凭证在 frps 配置文件中使用 dashboard_user 和 dashboard_pwd 参数配置。

身份验证应用于除健康检查端点（/healthz）之外的所有仪表盘路由。

来源: server/dashboard_api.go42-44

与 Prometheus 集成

当使用 enable_prometheus = true 配置选项启用时，仪表盘会在 /metrics 端点以 Prometheus 格式公开指标。这允许与 Prometheus 监控系统集成，以获得更高级的监控功能。

来源: server/dashboard_api.go46-49

技术实现

后端实现

服务器仪表盘实现在 server/dashboard_api.go 文件中，该文件注册了仪表盘 API 的 HTTP 路由和处理程序。API 处理程序从服务器状态、代理管理器和统计信息收集器收集数据，以提供系统的全面视图。

统计信息收集器（mem.StatsCollector）维护有关以下信息：

• 服务器范围的统计信息（流量、连接数、客户端数）
• 代理特定的统计信息（流量、连接数、启动/关闭时间）

前端实现

仪表盘前端是使用以下技术构建的单页应用程序：

• Vue.js 3 框架
• Element Plus UI 组件
• Vue Router 用于导航
• 图表用于流量可视化

前端代码组织成 Vue 组件，关注点分离清晰。

• App.vue：主应用程序框架和导航
• ServerOverview.vue：服务器信息显示
• ProxyView.vue：通用代理列表组件
• 特定代理类型的组件（ProxiesTCP.vue 等）

前端与后端 API 通信以获取数据并执行操作。

来源: assets/frps/static/index.html1-15 web/frps/components.d.ts1-44

故障排除

如果您无法访问仪表盘

1. 验证仪表盘在 frps.ini 文件中已启用并配置正确。
2. 检查配置的仪表盘端口是否可访问（未被防火墙阻止）。
3. 确保您使用的是正确的身份验证凭据。
4. 检查 frps 日志，查看是否有与仪表盘初始化相关的任何错误。

仪表盘的健康端点（/healthz）可用于验证仪表盘是否正常运行，而无需身份验证。