Docker 部署多节点 Looking Glass 面板NetMirror

最近因为客户需要做四线监控测试，我们在网上找了一圈 Looking Glass 面板，结果发现市面上现有的项目大多是基于 PHP 的老旧方案，要么界面陈旧、功能有限，要么已经多年无人维护，根本无法满足现代网络运维和多线路展示的需求。

于是，我们干脆决定自己动手，联合小伙伴一起开发了一个全新的 Looking Glass 项目 —— NetMirror，希望能为各大 IDC 运营商、oneman 运维以及广大网络爱好者提供更现代、更易用的解决方案。

在此也特别感谢 wikihost-opensource 和 Hybula ，他们的项目为我们提供了很多设计和架构上的灵感。

NetMirror 是什么？#

NetMirror 是一个功能丰富、界面美观的现代化 Looking Glass 服务端面板，适用于展示和测试多线路网络节点状态。它支持常见的网络诊断工具（如 ping、traceroute、mtr、speedtest 等），并支持多地区节点统一展示，方便用户对比各线路的性能和可达性。

官方Demo#

开源地址：https://github.com/catcat-blog/NetMirror （欢迎点点star）

See it in action here!

✨ 功能特性 #

现代 UI: 基于 Vue3 + TailwindCSS 打造的响应式界面。
网络工具: 集成了 Ping、iPerf3 和 Speedtest,BGP接口等一套工具。
实时流量: 实时监控网络接口流量。
交互式 Shell: 用于基本诊断的模拟 Shell 环境。
轻松部署: 以单个 Docker 容器的形式提供。
可定制: 通过环境变量配置功能和服务器详情。
多节点支持: 考虑到部分商家的地区很多，同时也新增了主从地区切换的模块。
安全设计：仅暴露面板与相关接口，节点通过 gRPC 安全通信。

🧪 为什么选择 NetMirror？#

如果你正在为你的 VPS 提供网络测试服务、或者希望展示自己多地区的网络质量，NetMirror 将是一个轻量但功能完整的选择。你不再需要手动维护老旧 PHP 项目，也不必再折腾前后端对接。我们已经为你打包好了一切。

📸 界面预览#

这里可以定义你的多个数据中心，直接跳转查看其他地区的LG。

部署#

Docker 部署#

克隆仓库#

1
git clone https://github.com/Yuri-NagaSaki/NetMirror.git cd NetMirror

创建环境文件#

复制环境文件示例以创建您自己的配置。

1
cp .env.example .env

注意: 如果 .env.example 文件不存在，您可以创建一个空的 .env 文件，并从下表中添加您需要的变量。

自定义您的配置 (可选)#

编辑 .env 文件以设置您的服务器位置、公网 IP 地址和其他选项。

启动服务:#

1
services:
2
  als:
3
    image: soyorins/netmirror:latest
4
    container_name: looking-glass-e
5
    restart: always
6
    network_mode: host
7
    user: root
8
    env_file:
9
      - .env
10
    volumes:
11
      - ./data:/data
12
      - ./.air.toml:/app/.air.toml
13
    healthcheck:
14
      test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:${HTTP_PORT:-80}/"]
15
      interval: 30s
16
      timeout: 10s
17
      retries: 3
18
    logging:
19
      driver: "json-file"
20
      options:
21
        max-size: "10m"
22
        max-file: "3"

1
docker compose up -d

应用将可以通过 http://<您的服务器IP> 访问。默认端口是 3000，可以通过 HTTP_PORT 环境变量进行更改。

ENV配置解释#

1
# ALS - Another Looking-glass Server 环境变量
2
# 将此文件复制为 .env 并填写您需要的值。
3

4
# --- 网络设置 ---
5
# 服务器绑定的 IP 地址。留空以绑定到所有网络接口。
6
LISTEN_IP=0.0.0.0
7
# 监听的 HTTP 端口。
8
HTTP_PORT=3000
9

10
# --- 服务器信息 ---
11
# 描述服务器位置的字符串。
12
LOCATION=BGP
13
# 服务器的公共 IPv4 地址。如果为空，将自动检测。
14
PUBLIC_IPV4=
15
# 服务器的公共 IPv6 地址。如果为空，将自动检测。
16
PUBLIC_IPV6=
17

18
# --- 网站品牌设置 ---
19
# 网站Logo设置，支持多种格式：
20
# 1. 图片URL: LOGO=https://example.com/logo.png
21
# 2. Base64图片: LOGO=data:image/png;base64,iVBORw0K...
22
# 3. Emoji表情: LOGO=🌐
23
# 4. 纯文本: LOGO=NetMirror
24
# 5. SVG代码: LOGO=<svg viewBox="0 0 24 24">...</svg>
25

26
# 示例：使用网络图标SVG
27
LOGO=<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="2"/><path d="m16.24 7.76-1.41 1.41M15.76 16.24l1.41 1.41M7.76 16.24l1.41-1.41M7.76 7.76l1.41 1.41M12 3v6M12 15v6M3 12h6M15 12h6"/></svg>
28

29
# Logo类型（可选，留空自动检测）
30
# 支持的值: auto, url, base64, emoji, text, svg
31
LOGO_TYPE=auto
32

33
# 其他示例（取消注释测试）：
34
# 使用Emoji: LOGO=🌐
35
# 使用文本: LOGO=NetMirror
36
# 使用简单SVG图标: LOGO=<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7v10c0 5.55 3.84 9.95 9 11 5.16-1.05 9-5.45 9-11V7l-10-5z"/></svg>
37

38
# --- 功能开关 ---
39
# 设置为 'true' 或 'false' 来启用/禁用功能。
40
# 显示实时网卡流量图。
41
DISPLAY_TRAFFIC=true
42
# 启用 LibreSpeed (HTML5) 速度测试。
43
ENABLE_SPEEDTEST=true
44
# 启用 Ping 工具。
45
UTILITIES_PING=true
46
# 启用 MTR 工具。
47
UTILITIES_MTR=true
48
# 启用 Traceroute 工具。
49
UTILITIES_TRACEROUTE=true
50
# 启用 Speedtest.net CLI 集成。
51
UTILITIES_SPEEDTESTDOTNET=true
52
# 启用交互式伪 Shell。
53
UTILITIES_FAKESHELL=true
54
# 启用 iPerf3 服务器工具。
55
UTILITIES_IPERF3=true
56

57
# --- 功能配置 ---
58
# 用于下载速度测试的文件大小列表，以空格分隔。
59
# 例如："10MB 100MB 1GB"
60
SPEEDTEST_FILE_LIST=100MB 1GB 10GB
61
# iPerf3 服务器端口范围 - 起始。
62
UTILITIES_IPERF3_PORT_MIN=30000
63
# iPerf3 服务器端口范围 - 结束。
64
UTILITIES_IPERF3_PORT_MAX=31000
65

66
# --- 自定义 ---
67
# 显示赞助商信息。支持多种格式：
68
# 1. 本地文件路径：
69
#    - Markdown文件: SPONSOR_MESSAGE=/data/sponsor.md
70
#    - HTML文件: SPONSOR_MESSAGE=/data/sponsor.html
71
# 2. 网络链接：
72
#    - Markdown链接: SPONSOR_MESSAGE=https://example.com/sponsor.md (会下载内容)
73
#    - HTML页面链接: SPONSOR_MESSAGE=https://example.com/sponsor.html (会用iframe嵌入)
74
# 3. 直接内容：
75
#    - 纯文本: SPONSOR_MESSAGE="感谢使用我们的服务"
76
#    - HTML代码: SPONSOR_MESSAGE="<div><h2>赞助我们</h2><p>内容...</p></div>"
77
#    - Markdown文本: SPONSOR_MESSAGE="## 标题\n**粗体**内容"
78

79
# 使用 data 目录中的 Markdown 示例文件测试
80
SPONSOR_MESSAGE=data/sponsor-iframe-example.html
81

82
# 测试其他格式（取消注释可测试）：
83
# 使用 HTML iframe 页面
84
# SPONSOR_MESSAGE=/data/sponsor-iframe-example.html
85
# 使用外部网站 iframe
86
# SPONSOR_MESSAGE=https://example.com/sponsor
87
# 使用直接 HTML 内容
88
# SPONSOR_MESSAGE="<div style='text-align:center;'><h2 style='color:#0ea5e9;'>💝 感谢支持</h2><p>您的支持让我们更有动力！</p><a href='https://github.com/sponsors/username' target='_blank' style='color:#0ea5e9;'>GitHub Sponsors</a></div>"
89

90
# --- Looking Glass 节点配置 ---
91
# 节点列表格式: NAME1|LOCATION1|URL1;NAME2|LOCATION2|URL2
92
# 例如: "London|London, UK|http://IP:Port;Singapore|Singapore, SG|http://IP:Port;Tokyo|Tokyo, JP|http://IP:Port"
93
LG_NODES=London|London, UK|http://IP:Port;Singapore|Singapore, SG|http://IP:Port;Tokyo|Tokyo, JP|http://IP:Port;Frankfurt|Frankfurt, DE|http://IP:Port;New York|New York, US|http://IP:Port;Los Angeles|Los Angeles, US|http://IP:Port

镜像大小非常小，30MB不大，基本上所有机器都能部署。