🚀 部署高颜值探针前端 Nazhua + 哪吒V1 + Cloudflare Tunnel (Docker Compose 一键部署)
本文将详细介绍如何使用 Docker Compose 快速部署 Nezha V1 监控面板，并配合高颜值的 Nazhua 前端主题，最后通过 Cloudflare Tunnel 实现无需公网 IP 的安全访问。
1. 准备工作：创建目录与配置文件
首先，我们需要在服务器上创建项目目录，并配置前端所需的脚本和样式表。
📂 创建目录
在终端执行以下命令：
mkdir -p /opt/nazhua
cd /opt/nazhua
⚙️ 创建 config.js
该文件用于配置 Nazhua 前端的各项参数（如标题、API路径、背景等）。
nano config.js
请粘贴以下内容（建议使用配置生成器生成，以下为通用模板）：
window.$$nazhuaConfig = {
title: '遥遥领先',
nezhaVersion: 'v1', // 强制指定为 v1 版本
v1ApiMonitorPath: '/api/v1/service/{id}',
v1WsPath: '/api/v1/ws/server',
v1ApiGroupPath: '/api/v1/server-group',
v1ApiSettingPath: '/api/v1/setting',
v1ApiProfilePath: '/api/v1/profile',
hideNavbarServerCount: false,
routeMode: 'h5',
footerSlogan: '吃饱了撑的',
freeAmount: '白嫖',
infinityCycle: '长期有效',
customBackgroundImage: '',
showFireworks: true,
listServerItemTypeToggle: true,
listServerItemType: 'server-status',
listServerStatusType: 'donut',
listServerRealTimeShowLoad: true,
detailServerStatusType: 'donut',
hideDetailWorldMap: true,
homeWorldMapPosition: 'bottom',
monitorRefreshTime: 10,
monitorChartType: 'multi',
monitorChartTypeToggle: true,
v1HideNezhaDashboardBtn: true,
};
(按 Ctrl+O 保存，Ctrl+X 退出)
🎨 创建 style.css
该文件用于自定义页面样式。
nano style.css
粘贴以下内容：
:root {
/* 修改颜色 */
/* 地图上标记点的颜色 */
--world-map-point-color: #fff;
/* 列表项显示的价格颜色 */
--list-item-price-color: #ff6;
/* 购买链接的主要颜色 */
--list-item-buy-link-color: #f00;
}
/* 自定义背景图示例 */
:root {
/* 图片太亮时，增加背景遮罩透明度 */
--layout-main-bg-color: rgba(0, 0, 0, 0.45);
}
.layout-group .layout-bg {
/* 添加!important强制背景图替换 */
background: url(https://cdn.seovx.com/?mom=302) no-repeat 80% 80% !important;
background-size: cover;
}
(按 Ctrl+O 保存，Ctrl+X 退出)
2. 获取 Cloudflare Tunnel Token
为了配合 Docker 部署，我们需要从 Cloudflare 获取隧道令牌。
- 登录 Cloudflare Dash。
- 点击左侧菜单的 Zero Trust（如未开通需先免费开通）。
- 进入 Networks -> Tunnels。
- 点击 Create a tunnel。
- Select connector: 保持默认
Cloudflared，点击 Next。 - Name your tunnel: 输入名称（如
monitor），点击 Save tunnel。
- Select connector: 保持默认
- 【关键步骤】提取 Token：
- 在 Install connector 页面，点击 Docker 图标。
- 在下方的代码框中，找到
--token后面的长字符串。 - 注意：只复制
ey开头的那一长串字符，不要复制整行命令。
✅ 正确复制示例：
eyJhIjoiMmY...(直到结尾)
3. 编排 Docker Compose
创建并编辑 docker-compose.yml 文件。
nano docker-compose.yml
粘贴以下内容，请务必替换其中的 TOKEN：
services:
# -----------------------
# 1. 哪吒探针 V1 (后端)
# -----------------------
dashboard:
image: ghcr.io/nezhahq/nezha:latest # 【修正】这是 V1 的官方新镜像
container_name: dashboard
restart: always
volumes:
- ./data:/dashboard/data # 【修正】V1 的容器内数据路径
ports:
# V1 面板端口 (同时也是 Agent 通信端口)
- "8008:8008"
expose:
- "8008" # 暴露给 Nazhua 和 Tunnel 使用
# -----------------------
# 2. Nazhua (前端 + 反代)
# -----------------------
nazhua:
image: ghcr.io/hi2shark/nazhua:latest
container_name: nazhua
restart: always
environment:
# 指向后端容器名 dashboard 的 8008 端口
- NEZHA=http://dashboard:8008/
- DOMAIN=_
volumes:
- ./config.js:/home/wwwroot/html/config.js:ro
- ./style.css:/home/wwwroot/html/style.css:ro
depends_on:
- dashboard
# -----------------------
# 3. Cloudflare Tunnel
# -----------------------
cloudflared:
image: cloudflare/cloudflared:latest
container_name: cloudflared
restart: always
command: tunnel run
environment:
- TUNNEL_TOKEN=替换你的token # <---【请在此处填入步骤2获取的Token】
depends_on:
- nazhua
▶️ 启动服务
docker compose up -d
4. 域名绑定与配置
回到 Cloudflare Zero Trust 面板，配置域名的公网访问。
- 进入 Access -> Tunnels。
- 找到刚才创建的隧道，点击 Configure。
- 点击 Public Hostname 标签页，添加以下记录：
🔹 配置 Nazhua 前端 (访问页面)
- Subdomain:
status(你的前缀) - Domain:
abc.com(你的域名) - Path: (留空)
- Service:
http://nazhua:80- 注意：这里填写的是 docker 容器名
nazhua
- 注意：这里填写的是 docker 容器名
5. 后续设置与验证
🔐 初始化管理面板
- 浏览器访问您的后端地址（如
http://admin.abc.com:8008）。 - 登录哪吒管理界面（首次登录通常需要设置管理员账号），并修改登录密码。
📡 添加服务器监控
- 在管理面板中添加服务器。
- Agent 配置地址：填写
admin.abc.com:8008。 - TLS：不勾选（除非您配置了 SSL 证书反代）。
- 复制安装命令到您的其他服务器执行即可。
🎉 完成
此时，打开浏览器访问前端域名（如 https://status.abc.com），您应该就能看到界面精美的 Nazhua 探针页面了！
注意：如修改完config.js或者style.css不能立即生效，到cloudflare清除缓存！
本文基于 Docker Compose 部署，适用于 Nazhua 及 Nezha V1 版本。