哪吒面板宝塔搭建教程（反代 8008 + WebSocket + gRPC）

这篇教程适合用宝塔面板部署 哪吒监控 Dashboard，然后通过域名反向代理访问。

按你这套方式搭，核心就几步：

先用脚本安装哪吒面板
确认 Dashboard 跑在 8008 端口
宝塔创建站点并反代 8008
在 Nginx 配置里补上 upstream、gRPC、WebSocket

我核对了哪吒官方文档，2026-05-11 这天官方文档里仍然说明：V1 之后 Dashboard 和 gRPC 默认共用 8008 端口。

效果图：

一、先安装哪吒面板#

先用 SSH 登录你的服务器，直接执行安装命令：

1
curl -L https://raw.githubusercontent.com/naiba/nezha/master/script/install.sh -o nezha.sh && chmod +x nezha.sh && ./nezha.sh

执行后根据脚本提示完成安装即可。

如果安装成功，哪吒 Dashboard 默认会监听：

1
127.0.0.1:8008

也就是说，后面宝塔反代时，目标地址就是这个端口。

二、宝塔添加网站#

安装完后，先在宝塔里新建一个网站，绑定你准备给哪吒面板使用的域名。

创建完站点后，进入站点设置，后面我们会改它的 Nginx 配置。

三、在站点配置里添加 upstream#

打开宝塔站点配置文件，在合适位置先加入：

1
upstream dashboard {
2
    keepalive 512;
3
    server 127.0.0.1:8008;
4
}

参考图：

这一段的作用，是给后面的 grpc_pass grpc://dashboard; 提供上游目标。

四、宝塔反代 8008 端口#

接着在宝塔站点里创建反向代理，目标填：

1
http://127.0.0.1:8008

先把基础反代建好，然后再手动修改配置文件。

因为哪吒面板不只是普通网页，它还会用到：

gRPC
WebSocket

所以如果只点宝塔默认反代而不补配置，后面常见问题就是：

Agent 连不上
WebSocket 终端打不开
文件管理或在线终端异常

五、修改宝塔站点反代配置#

把反代配置改成下面这样：

1
#PROXY-START/
2
location ^~ / {
3
    proxy_pass http://127.0.0.1:8008; # 改成自己的端口
4
    proxy_set_header Host $host;
5
    proxy_set_header X-Real-IP $remote_addr;
6
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
7
    proxy_set_header REMOTE-HOST $remote_addr;
8
    proxy_set_header Upgrade $http_upgrade;
9
    proxy_set_header nz-realip $remote_addr;
10
    proxy_set_header Connection "upgrade";
11
    proxy_set_header X-Forwarded-Proto $scheme;
12
    proxy_http_version 1.1;
13
    proxy_read_timeout 3600s;
14
    proxy_send_timeout 3600s;
15
    proxy_buffer_size 128k;
16
    proxy_buffers 4 128k;
17
    proxy_busy_buffers_size 256k;
18
    proxy_max_temp_file_size 0;
19
    add_header X-Cache $upstream_cache_status;
20
    add_header Cache-Control no-cache;
21
    proxy_ssl_server_name off;
22
    proxy_ssl_name $proxy_host;
23
    add_header Strict-Transport-Security "max-age=31536000";
24
}
25

26
underscores_in_headers on;
27
set_real_ip_from 0.0.0.0/0; # CDN 回源 IP 地址段
28

29
# gRPC 服务
30
location ^~ /proto.NezhaService/ {
31
    grpc_set_header Host $host;
32
    grpc_set_header nz-realip $remote_addr;
33
    grpc_read_timeout 600s;
34
    grpc_send_timeout 600s;
35
    grpc_socket_keepalive on;
36
    client_max_body_size 10m;
37
    grpc_buffer_size 4m;
38
    grpc_pass grpc://dashboard;
39
}
40

41
# WebSocket 服务
42
location ~* ^/api/v1/ws/(server|terminal|file)(.*)$ {
43
    proxy_set_header Host $host;
44
    proxy_set_header nz-realip $remote_addr;
45
    proxy_set_header Origin https://$host;
46
    proxy_set_header Upgrade $http_upgrade;
47
    proxy_set_header Connection "upgrade";
48
    proxy_read_timeout 3600s;
49
    proxy_send_timeout 3600s;
50
    proxy_pass http://127.0.0.1:8008; # 改成自己的端口
51
}
52
#PROXY-END/

参考图：

如果你前面不是用 8008，那这里所有的 127.0.0.1:8008 都改成你自己的实际端口。

六、登录哪吒 Dashboard#

按官方文档当前说明，安装完成后的默认后台地址一般是：

1
https://你的域名/dashboard

首次默认账号密码是：

1
admin / admin

登录后建议第一时间修改密码。

七、添加自定义美化代码#

登录后台后，进入设置，把下面这段代码粘贴到：

自定义代码（样式和脚本）

参考图：

代码如下：

1
<script>
2
    /* 这部分这几个挂在 window 下的变量是哪吒内置的, 详见 https://nezha.wiki/guide/settings.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BB%A3%E7%A0%81 */
3
    window.CustomBackgroundImage = 'https://im.gurl.eu.org/file/d9e924748b3a2ec7af338.jpg'; /* PC 端背景图 */
4
    window.CustomMobileBackgroundImage = 'https://im.gurl.eu.org/file/d9e924748b3a2ec7af338.jpg'; /* 移动端背景图 */
5
    window.CustomDesc = 'Assute'; /* 页面左上角副标题 */
6
    window.ShowNetTransfer = true; /* 服务器卡片是否显示上下行流量, 默认不显示 */
7
    window.DisableAnimatedMan = true;
8
    window.CustomIllustration = 'https://r2.wuxie.de/blog/20250415_762b4cb3.webp';
9
    window.FixedTopServerName = true; /* 是否固定顶部显示服务器名称, 默认不固定 */
10
   /* window.CustomLinks = '[{\"link\":\"https://xiny.cc/\",\"name\":\"首页\"},{\"link\":\"https://blog.xiny.cc/\",\"name\":\"博客\"}]'; *//* 自定义导航栏链接 */
11

12
    /* 自定义字体, 注意需要同步修改下方 CSS 中的 font-family */
13
    var link = document.createElement('link');
14
    link.rel = 'stylesheet';
15
    link.href = 'https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans'; // MiSans
16
    // link.href = 'https://npm.elemecdn.com/lxgw-wenkai-screen-webfont@1.7.0/style.css'; // 霞鹜文楷, font-family: 'LXGW WenKai Screen'
17
    document.head.appendChild(link);
18
</script>
19
<script>
20
window.FixedTopServerName = true; /* 是否固定顶部显示服务器名称, 默认不固定 */
21
setInterval(function() {
22
    function formatFileSize(bytes) {
23
        if (bytes === 0) return { value: '0', unit: 'B' };
24

25
        const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
26
        let unitIndex = 0;
27
        let size = bytes;
28

29
        while (size >= 1024 && unitIndex < units.length - 1) {
30
            size /= 1024;
31
            unitIndex++;
32
        }
33

34
        let decimalPlaces = 1;
35
        if (unitIndex === 0) decimalPlaces = 0;
36

37
        return {
38
            value: size.toFixed(decimalPlaces),
39
            unit: units[unitIndex]
40
        };
41
    }
42

43
    function calculatePercentage(used, total) {
44
        if (typeof used === 'string') used = Number(used);
45
        if (typeof total === 'string') total = Number(total);
46

47
        if (used > 1e15 || total > 1e15) {
48
            used = used / 1e10;
49
            total = total / 1e10;
50
        }
51

52
        return (used / total * 100).toFixed(1);
53
    }
54
    fetch('/api/v1/service')
55
        .then(response => response.json())
56
        .then(data => {
57
            if (data.success) {
58
                const trafficData = data.data.cycle_transfer_stats;
59

60
                const serverMap = new Map();
61

62
                for (const cycleId in trafficData) {
63
                    const cycle = trafficData[cycleId];
64
                    if (cycle.server_name && cycle.transfer) {
65
                        for (const serverId in cycle.server_name) {
66
                            const serverName = cycle.server_name[serverId];
67
                            const transfer = cycle.transfer[serverId];
68
                            const max = cycle.max;
69

70
                            if (serverName && transfer !== undefined && max) {
71
                                serverMap.set(serverName, {
72
                                    id: serverId,
73
                                    transfer: transfer,
74
                                    max: max,
75
                                    name: cycle.name
76
                                });
77
                            }
78
                        }
79
                    }
80
                }
81

82
                serverMap.forEach((serverData, serverName) => {
83
                    const targetElement = Array.from(document.querySelectorAll('section.grid.items-center.gap-2')).find(el =>
84
                        el.textContent.trim().includes(serverName));
85

86
                    if (targetElement) {
87

88
                        const usedFormatted = formatFileSize(serverData.transfer);
89
                        const totalFormatted = formatFileSize(serverData.max);
90

91
                        const percentage = calculatePercentage(serverData.transfer, serverData.max);
92

93
                        const uniqueClassName = 'traffic-stats-for-server-' + serverData.id;
94

95
                        const insertedElement = targetElement.parentNode.querySelector('.' + uniqueClassName);
96

97
                        if (insertedElement) {
98
                            const usedSpan = insertedElement.querySelector('.used-traffic');
99
                            const usedUnitSpan = insertedElement.querySelector('.used-unit');
100
                            const totalSpan = insertedElement.querySelector('.total-traffic');
101
                            const totalUnitSpan = insertedElement.querySelector('.total-unit');
102
                            const percentageSpan = insertedElement.querySelector('.percentage-value');
103
                            const progressBar = insertedElement.querySelector('.progress-bar');
104

105
                            if (usedSpan) usedSpan.textContent = usedFormatted.value;
106
                            if (usedUnitSpan) usedUnitSpan.textContent = usedFormatted.unit;
107
                            if (totalSpan) totalSpan.textContent = totalFormatted.value;
108
                            if (totalUnitSpan) totalUnitSpan.textContent = totalFormatted.unit;
109
                            if (percentageSpan) percentageSpan.textContent = percentage + '%';
110
                            if (progressBar) progressBar.style.width = percentage + '%';
111

112
                            return;
113
                        }
114

115
                        let currentElement = targetElement;
116
                        for (let i = 0; i < 2; i++) {
117
                            currentElement = currentElement.nextElementSibling;
118
                            if (!currentElement) {
119
                                currentElement = targetElement;
120
                                currentElement = currentElement.nextElementSibling;
121
                            }
122
                        }
123

124
                        const newElement = document.createElement('div');
125
                        newElement.classList.add('space-y-1.5', 'new-inserted-element', uniqueClassName);
126
                        newElement.style.width = '100%';
127

128
                        newElement.innerHTML = `
129
                            <div class="flex items-center justify-between">
130
                                <div class="flex items-baseline gap-1">
131
                                    <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200 used-traffic">${usedFormatted.value}</span>
132
                                    <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200 used-unit">${usedFormatted.unit}</span>
133
                                    <span class="text-xs text-neutral-500 dark:text-neutral-400">/ </span>
134
                                    <span class="text-xs text-neutral-500 dark:text-neutral-400 total-traffic">${totalFormatted.value}</span>
135
                                    <span class="text-xs text-neutral-500 dark:text-neutral-400 total-unit">${totalFormatted.unit}</span>
136
                                </div>
137
                                <span class="text-xs font-medium text-neutral-600 dark:text-neutral-300 percentage-value">${percentage}%</span>
138
                            </div>
139
                            <div class="relative h-1.5">
140
                                <div class="absolute inset-0 bg-neutral-100 dark:bg-neutral-800 rounded-full"></div>
141
                                <div class="absolute inset-0 bg-emerald-500 rounded-full transition-all duration-300 progress-bar" style="width: ${percentage}%;"></div>
142
                            </div>
143
                        `;
144

145
                        currentElement.insertAdjacentElement('afterend', newElement);
146
                    } else {
147
                        console.log(`没有找到服务器 ${serverName}(ID: ${serverData.id}) 的元素`);
148
                    }
149
                });
150
            } else {
151
                console.log('API请求成功但返回数据不正确');
152
            }
153
        })
154
        .catch(error => {
155
            console.error('获取流量数据失败:', error);
156
        });
157
}, 3000);
158
</script>
159
<script>
160
/*
161
  window.TrafficScriptConfig = {
162
    showTrafficStats: true,    // 显示流量统计, 默认开启
163
    insertAfter: true,         // 如果开启总流量卡片, 是否放置在总流量卡片后面, 默认为true
164
    interval: 60000,           // 60秒刷新缓存, 单位毫秒, 默认60秒
165
    toggleInterval: 5000,      // 4秒切换流量进度条右上角内容, 0秒不切换, 单位毫秒, 默认5秒
166
    duration: 500,             // 缓出缓进切换时间, 单位毫秒, 默认500毫秒
167
    enableLog: false           // 开启日志, 默认关闭
168
  };
169
*/
170
</script>
171
<script src="https://cdn.jsdelivr.net/gh/8730062/installnet@main/jdt.js"></script>

保存后，面板前台就会按这段脚本显示背景图、插画、副标题和流量进度条。

八、添加流量警报规则#

如果前面已经加了自定义代码，前台就能显示流量使用进度。
如果还想在流量接近上限时收到通知，可以继续添加流量警报规则。

先打开规则生成器：

https://wiziscool.github.io/Nezha-Traffic-Alarm-Generator/

在页面里按自己的周期和流量阈值生成规则即可。

参考图：

生成完成后，复制规则内容，回到哪吒后台：

打开 通知
进入 警告规则
添加刚刚生成的流量警报规则
保存后启用

参考图：

效果图：

这样前台既能显示流量使用进度，流量达到设定阈值时也会按通知方式推送提醒。

九、在服务里添加 Ping 节点#

如果你想让面板显示广东三网的 Ping，可以在服务里添加这几个地址：

广东联通：gd-cu-v4.ip.zstaticcdn.com:80
广东移动：gd-cm-v4.ip.zstaticcdn.com:80
广东电信：gd-ct-v4.ip.zstaticcdn.com:80

添加后，前台就能看到这几个节点的探测结果。

十、如果前面套了 CDN#

如果你的域名前面还接了 CDN，那真实 IP 头不一定还是 $remote_addr。

这时候通常要把：

1
set_real_ip_from 0.0.0.0/0;

和真实 IP 头按你的 CDN 去改。

例如 Cloudflare 常见写法会用到：

1
real_ip_header CF-Connecting-IP;

如果你现在是 Nginx 直接对外，没有再套 CDN，那按你现在这版配置先跑就可以。

十一、完成#

到这里，宝塔搭建哪吒面板就完成了。

一、先安装哪吒面板#

二、宝塔添加网站#

三、在站点配置里添加 upstream#

四、宝塔反代 8008 端口#

五、修改宝塔站点反代配置#

六、登录哪吒 Dashboard#

七、添加自定义美化代码#

八、添加流量警报规则#

九、在服务里添加 Ping 节点#

十、如果前面套了 CDN#

十一、完成#

文章分享

目录