一、域名解析#

面板域名以nezha.a.com为例，Cloudflare中添加A记录nezha.a.com指向Dashboard 服务器 IP，开启小黄云。a.com域名设置页面——网络，选择开启WebSockets 和 gRPC ；SSL/TLS模式选择完全（严格）。

二、哪吒面板搭建#

ssh连接vps，输入代码

1
sudo mkdir -p /opt/nezha && cd /opt/nezha
2
nano docker-compose.yml
3
docker compose up -d

docker-compose.yml文件：

1
services:
2
  dashboard:
3
    container_name: nezha-dashboard
4
    image: ghcr.io/nezhahq/nezha:latest
5
    restart: unless-stopped
6
    volumes:
7
      - ./dashboard/data:/dashboard/data
8
    ports:
9
      - 8008:8008

三、反代设置#

1.1panel面板中新建反向代理网站，网站 —— 创建网站 —— 反向代理，主域名填写nezha.a.com，代理地址填写127.0.0.1:8008

证书页面自行设置Acme账户、DNS账户为nezha.a.com申请证书。

网站页面点击nezha.a.com进入网站设置，开启https。

点击配置文件，最下方添加以下代码，保存并重载。

1
# upstream 配置
2
upstream dashboard {
3
    keepalive 512;
4
    server 127.0.0.1:8008;
5
}

2.打开网站 —— 反向代理 —— 源文，使用以下代码替换原内容，点击确认。至此，反向代理设置完成。

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

25
underscores_in_headers on;
26
set_real_ip_from 0.0.0.0/0; # CDN 回源 IP 地址段
27
real_ip_header CF-Connecting-IP; # CDN 私有 header，此处为 CloudFlare 默认
28

29
# gRPC 服务
30
location ^~ /proto.NezhaService/ {
31
    grpc_set_header Host $host;
32
    grpc_set_header nz-realip $http_CF_Connecting_IP;
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 $http_cf_connecting_ip;
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
}

四、哪吒面板设置#

1.登录到 Dashboard 配置界面https://nezha.a.com/dashboard，初始用户名、密码均为admin，登录后立即进入管理页面点击头像 —— 个人信息 —— 更新个人资料修改用户名和密码。

2.点击头像 —— 系统设置，填写站点名称、设置语言，Agent对接地址【域名/IP:端口】填写nezha.a.com:443，勾选Agent 使用 TLS 连接，点击确认即可。

3.添加telegram通知：

通知页面点击“+”，创建通知，名称自定，URL填写https://api.telegram.org/bot<你的机器人Token>/sendMessage?chat_id=<你的用户ID>&text=#NEZHA#，将 <你的机器人Token> 和 <你的用户ID> 替换为实际值。

获取 URL 参数获取机器人 Token：与 @BotFather 对话，发送/newbot创建新机器人，获取 Token。获取用户 ID：与 @userinfobot 对话，获取你的用户 ID。与机器人对话：先与新创建的机器人发送一条消息，确保机器人可以发送消息给你。

分组——通知，页面点击“+”，编辑通知分组，名称自定，通知勾选提前创建的telegram通知，确认即可。

4.记住一定要禁用被控端网页SSH

1
sed -i 's/disable_command_execute: false/disable_command_execute: true/' /opt/nezha/agent/config.yml && systemctl restart nezha-agent

五、哪吒v1美化#

1
<script>
2
window.CustomBackgroundImage="图片URL"; /* 页面背景图 */
3
</script>
4

5
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/aixin.js"></script>/* 点击爱心特效 */
6

7
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yinghua.js"></script>/* 页面樱花效果 */
8

9
<span class="js-cursor-container"></span>
10
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
11
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/xiaoxingxing.js"></script>
12
/* 以上鼠标特效 */

1
<script>
2
var observer = new MutationObserver(function(mutationsList, observer) {
3
    var xpath = "/html/body/div/div/main/div[2]/section[1]/div[4]/div";
4
    var container = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
5

6
    if (container) {
7
        observer.disconnect();
8
        var existingImg = container.querySelector("img");
9
        if (existingImg) {
10
            container.removeChild(existingImg);
11
        }
12
        var imgElement = document.createElement("img");
13
        imgElement.src = "图片URL";
14
        imgElement.style.position = "absolute";
15
        imgElement.style.right = "8px";
16
        imgElement.style.top = "-80px";
17
        imgElement.style.zIndex = "10";
18
        imgElement.style.width = "90px";
19
        container.appendChild(imgElement);
20
    }
21
});
22
var config = { childList: true, subtree: true };
23
observer.observe(document.body, config);
24
</script>

以上是换卡通小人

1
<script>
2
    window.CustomLogo = "图片URL"; /* 自定义Logo */
3
    window.ShowNetTransfer  = "true"; /* 卡片显示上下行流量 */
4
    window.DisableAnimatedMan  = "true"; /* 关掉动画人物插图 */
5
    window.CustomDesc ="MJJ：白嫖至上，技术先行"; /* 自定义描述 */
6
</script>

1
<style>
2
  .dark .bg-card {
3
   font-family: "Roboto", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
4
    color: #ffffff; /* 白色，高对比度 */
5
    position: relative; /* 设置元素为相对定位 */
6
    background-color: rgba(0, 0, 0, 0.3); /* 设置背景颜色为半透明的黑色 */
7
    backdrop-filter: blur(5px); /* 应用毛玻璃效果，模糊度为5像素 */
8
    border-radius: 15px; /* 设置边框圆角为15像素 */
9
    //box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
10
    //overflow: hidden;  /* 确保内容不会溢出容器 */
11
    }
12
  .dark .bg-card h1, .dark .bg-card h2, .dark .bg-card h3 {
13
    color: #ffffff; /* 保持标题的高对比度 */
14
  }
15
  .dark .bg-card p {
16
    color: #eeeeee; /* 段落文本稍微柔和一些 */
17
  }
18
</style>

以上是调整毛玻璃效果”//“是不喜欢的所以注释掉

1
{
2
   "billingDataMod": {
3
       "startDate": "2024-11-05T00:00:00+08:00",
4
       "endDate": "2025-05-05T00:00:00+08:00",
5
       "autoRenewal": "1",
6
       "cycle": "半年",
7
       "amount": "$10.5"
8
   },
9
   "planDataMod": {
10
       "bandwidth": "1000Mbps",
11
       "trafficVol": "500GB/月",
12
       "trafficType": "1",
13
       "IPv4": "1",
14
       "IPv6": "0",
15
       "networkRoute": "电信163,移动CMI,联通4837",
16
       "extra": "传家宝"
17
   }
18
}

1
<meta name="referrer" content="no-referrer">
2
<div class="video-box">
3
  <video id="myVideo" muted
4
    src="https://img.028029.xyz/1734966841908.mp4"
5
    autoplay playsinline loop>
6
  </video>
7
</div>
8
<style>
9
  :root {
10
    --custom-border-color: rgba(13, 11, 9, 0.1);
11
    --custom-background-color: rgba(13, 11, 9, 0.4);
12
    --custom-background-image: unset;
13
  }
14

15
  .dark #root {
16
    background-color: unset !important;
17
  }
18

19
  .dark .bg-card {
20
    background-color: var(--custom-background-color);
21
    backdrop-filter: blur(4px);
22
    border: 1px solid rgba(13, 11, 9, 0.1);
23
    box-shadow: 0 4px 6px rgba(13, 11, 9, 0.2);
24
    /* 阴影效果 */
25
  }
26

27
  .focus\:text-accent-foreground:focus {
28
    background-color: rgba(13, 11, 9, 0.5);
29
  }
30

31
  .dark .text-muted-foreground {
32
    color: #fff;
33
  }
34

35
  .dark\:bg-stone-700:is(.dark *) {
36
    --tw-bg-opacity: 0.5;
37
  }
38

39
  html.dark * {
40
    border-color: var(--custom-border-color);
41
  }
42

43
  html.dark body {
44
    color: #f4f5f6;
45
    background: unset;
46
    position: relative;
47
  }
48

49
  img {
50
    border: none;
51
  }
52

53
  .dark\:border-neutral-800:is(.dark *) {
54
    border-color: var(--custom-border-color);
55
  }
56

57
  .dark\:bg-stone-800:is(.dark *) {
58
    --tw-bg-opacity: 0.5;
59
    background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1));
60
  }
61

62
  .dark\:text-stone-500:is(.dark *) {
63
    color: #f4f5f6;
64
  }
65

66
  .dark .bg-secondary {
67
    background-color: unset;
68
  }
69

70
  .dark .bg-popover {
71
    background-color: unset;
72
  }
73

74
  .dark .bg-muted {
75
    background-color: var(--custom-border-color);
76
  }
77

78
  .dark\:bg-black:is(.dark *) {
79
    background-color: rgba(13, 11, 9, 0.1);
80
  }
81

82
  .dark .bg-border {
83
    background-color: var(--custom-border-color);
84
  }
85

86
  .dark .border-input {
87
    border-color: var(--custom-border-color);
88
  }
89

90
  .dark\:text-neutral-300\/50:is(.dark *) {
91
    color: #999;
92
  }
93

94
  .dark\:text-stone-400:is(.dark *) {
95
    color: #fff;
96
  }
97

98
  div#radix-\:r4\: {
99
    background: rgba(0, 0, 0, 0.7);
100
  }
101

102
  .dark .bg-stone-800 {
103
    background: var(--custom-background-color);
104
  }
105

106
  .text-green-600 {
107
    color: rgb(34, 197, 94);
108
  }
109

110
  .bg-green-600 {
111
    background-color: rgb(34, 197, 94);
112
  }
113

114
  .dark .vps-info {
115
    border-radius: 12px;
116
    padding: 12px;
117
  }
118

119
  .dark .font-medium.opacity-40 {
120
    opacity: unset;
121
  }
122

123
  .dark .font-medium.opacity-50 {
124
    opacity: unset;
125
  }
126

127
  .dark .max-w-5xl.gap-4>div:first-child {
128
    background-color: var(--custom-background-color);
129
    backdrop-filter: blur(2px);
130
    border: 1px solid rgba(13, 11, 9, 0.2);
131
    box-shadow: 0 4px 6px rgba(13, 11, 9, 0.2);
132
    border-radius: 12px;
133
    padding: 12px;
134
  }
135

136
  img[alt="BackIcon"] {
137
    /* 样式规则 */
138
    margin-right: 12px;
139
  }
140

141
  .flex.items-center.gap-1.rounded-\[50px\].bg-stone-100.p-\[3px\].dark\:bg-stone-800 {
142
    backdrop-filter: blur(2px);
143
  }
144

145
  .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
146
    fill: #fff;
147
  }
148

149
  .dark\:fill-neutral-800:is(.dark *) {
150
    fill: #fff;
151
  }
152

153
  .data-\[state\=unchecked\]\:bg-input[data-state=unchecked] {
154
    background-color: unset;
155
  }
156

157
  .data-\[state\=checked\]\:bg-primary[data-state=checked] {
158
    background-color: var(--custom-background-color);
159
  }
160

161

162

163
  .video-box {
164
    position: fixed;
165
    z-index: 1;
166
    top: 0;
167
    left: 0;
168
    bottom: 0;
169
    right: 0;
170
  }
171

172
  .video-box video {
173
    width: 100%;
174
    height: 100%;
175
    object-fit: cover;
176
  }
177
</style>
178

179
<script>
180

181
    window.CustomMobileBackgroundImage="https://img.028029.xyz/1734664417905.png";
182
    window.CustomLogo = "https://img.028029.xyz/1734533172211.png";
183
    window.ShowNetTransfer  = "true";
184
    window.CustomDesc ="MJJ：白嫖至上，技术先行";
185

186
    window.CustomIllustration = "https://img.028029.xyz/1734664224123.png";
187
    window.ForceTheme = "dark";
188

189
    var observer = new MutationObserver(function(mutationsList, observer) {
190
    var xpath = "/html/body/div/div/main/div[2]/section[1]/div[4]/div";
191
    var container = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
192

193
    if (container) {
194
        observer.disconnect();
195
        var existingImg = container.querySelector("img");
196
        if (existingImg) {
197
            container.removeChild(existingImg);
198
        }
199
        var imgElement = document.createElement("img");
200
        imgElement.src = "https://img.028029.xyz/1734664224123.png";
201
        imgElement.style.position = "absolute";
202
        imgElement.style.right = "0px";
203
        imgElement.style.top = "-60px";
204
        imgElement.style.zIndex = "10";
205
        imgElement.style.width = "90px";
206
        container.appendChild(imgElement);
207
    }
208
});
209
var config = { childList: true, subtree: true };
210
observer.observe(document.body, config);
211
</script>
212

213
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/aixin.js"></script>
214
<span class="js-cursor-container"></span>
215
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/xiaoxingxing.js"></script>

风尘落微雨

用1panel面板部署哪吒监控v1教程

一、域名解析#

二、哪吒面板搭建#

三、反代设置#

四、哪吒面板设置#

五、哪吒v1美化#

文章分享

评论区

目录