哪吒面板部署到fly.io 2

前言

部署方法和前面有点点小差别，但差距不大，就引用前面的文字了

具体操作

准备材料

  1. Fly.io的账号：注册fly.lio

Fly.io免费额度：Fly App Pricing 免费额度有三个不间断运行的容器，以及160G的出站流量。(东亚30g，欧美100g，印度30g)

  1. Flyctl工具

使用以下命令安装Flyctl工具

1
2
3
4
5
Windows：iwr https://fly.io/install.ps1 -useb | iex

（请使用PowerShell或Windows终端的管理员模式安装）

Mac OS / Linux：curl -L https://fly.io/install.sh | sh

https://r2.kwxos.pp.ua/Qexo/23/12/11/Qexo_d41d8cd98f00b204e9800998ecf8427e.png

安装之后会出现这个界面，你需要将这两条命令，复制粘贴到终端运行下，才能直接使用 flyctl 这个命令

1
2
export FLYCTL_INSTALL="/root/.fly"
export PATH="$FLYCTL_INSTALL/bin:$PATH"

  1. 获取 Github的Client ID 和密钥

  2. 首先我们需要新建一个验证应用，登录 Github 后，打开 https://github.com/settings/developers ，依次选择“OAuth Apps” - “New OAuth App”

    1. Application name - 随意填写
    2. Homepage URL - 填写面板的访问域名，如：”http://cdn.example.com“，现在可以随便填，后面改为fly.io分配的域名或者改为ARGO_DOMAIN(用哪个域名登录哪吒面板，就用哪个域名，看自己喜欢)
    3. Authorization callback URL - 填写回调地址，如：”http://cdn.example.com/oauth2/callback“随便填，后面将cdn.example.com改为fly分配的域名或者改为ARGO_DOMAIN(用哪个域名登录哪吒面板，就用哪个域名，看自己喜欢)

  3. 点击 “Register application”

  4. 保存页面中的 Client ID，然后点击 “Generate a new client secret“，创建一个新的 Client Secret，新建的密钥仅会显示一次，请妥善保存

  5. fscarmen2大佬的github仓库：https://github.com/fscarmen2/Argo-Nezha-Service-Container

创建fly.io容器

首先在终端命令行上输入：

输入 flyctl auth login，会出现如下图所示的链接，复制链接网页打开，登录账号就行

https://r2.kwxos.pp.ua/Qexo/23/12/6/b4767fe59212ad57196a1d4b35b3630b_d41d8cd98f00b204e9800998ecf8427e.png

登录之后，输入 flyctl launch，选择 y又会出现一个如下图所示链接，复制链接网页打开

https://r2.kwxos.pp.ua/Qexo/23/12/6/774f6f4b8e51bc6f9a85236920eb4b4d_d41d8cd98f00b204e9800998ecf8427e.png

进链接后，如图选择，最后点击最下面那个按钮

https://r2.kwxos.pp.ua/Qexo/24/1/2/b0f6e7e8c1146efe3b56df90eee7a3c9.png

这个步骤会在fly平台创建一个容器，本地也会多一个 fly.toml文件

https://r2.kwxos.pp.ua/Qexo/23/12/6/a79ffa116be8e077ad8f086559a8f3b2_d41d8cd98f00b204e9800998ecf8427e.png

用命令创建卷和获取共享IP地址

一条一条输

fly volumes create 卷名 –region 地区 –size 1

如下所示：

1
2
3
fly volumes create nz_data --region lax --size 1
flyctl ips allocate-v4 --shared
flyctl ips allocate-v6

以前的那个教程应该是改规则了，居然提示要收费！！！！

打开网页的管理工具，或者用命令行都可以

省字，这里我用网页的管理工具修改 fly.toml文件和增加一个 Dockerfile文件

用到的变量

变量名 是否必须 备注
GH_USER 是 github 的用户名，用于面板管理授权
GH_CLIENTID 是 在 github 上申请
GH_CLIENTSECRET 是 在 github 上申请
GH_BACKUP_USER 否 在 github 上备份哪吒服务端数据库的 github 用户名，不填则与面板管理授权的账户 GH_USER 一致
GH_REPO 否 在 github 上备份哪吒服务端数据库文件的 github 库
GH_EMAIL 否 github 的邮箱，用于备份的 git 推送到远程库
GH_PAT 否 github 的 PAT
NGINX 否 默认使用 gRPCwebProxy 应用来反代，这时可以不填写该变量；如需 nginx 反代，请设置该值为 1
ARGO_AUTH 是 Json: 从https://fscarmen.cloudflare.now.cc 获取的 Argo JsonToken: 从 Cloudflare 官网获取
ARGO_DOMAIN 是 Argo 域名

fly.toml文件内容，把中文删了，xxxx号用自己的替代

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
app = "cskwxos"改为上一步填的容器名
primary_region = "lax" 改为上一步选择的地区
kill_signal = "SIGINT"
kill_timeout = 5
processes = []

[env]
  ARGO_AUTH ='' 改为获取到的json码
  ARGO_DOMAIN = "" 改为隧道域名
  GH_CLIENTID = "xxxxxxxxxxxxxxxxx"
  GH_CLIENTSECRET = "xxxxxxxxxxxxxxxx"
  GH_EMAIL = "xxxxs@qq.com"
  GH_PAT = "xxxxxxxxxxxxxxxCaTJbL8v0TMAUT"
  GH_REPO = "xxxx"
  GH_USER = "xxxxx"

[experimental]
  allowed_public_ports = []
  auto_rollback = true

[mounts]
  destination = "/dashboard/data"
  source = "nz_data" 改为创建卷的名字

[[services]]
  http_checks = []
  internal_port = 80
  processes = ["app"]
  protocol = "tcp"
  script_checks = []

  [services.concurrency]
    hard_limit = 30
    soft_limit = 30
    type = "connections"

  [[services.ports]]
    handlers = ["http"]
    port = 80
    force_https = true
  
  [[services.ports]]
    handlers = ["tls", "http"]
    port = 443

  [[services.tcp_checks]]
    grace_period = "1s"
    interval = "15s"
    restart_limit = 0
    timeout = "2s"

[[services]]
  http_checks = []
  internal_port = 5555
  processes = ["app"]
  protocol = "tcp"
  script_checks = []

  [services.concurrency]
    hard_limit = 30
    soft_limit = 30
    type = "connections"

  [[services.ports]]
    port = 5555

  [[services.tcp_checks]]
    grace_period = "1s"
    interval = "15s"
    restart_limit = 0
    timeout = "2s"

[[vm]]
  cpu_kind = "shared"
  cpus = 1
  memory_mb = 256

Dockerfile文件内容

1
FROM fscarmen/argo-nezha:latest

https://r2.kwxos.pp.ua/Qexo/23/12/11/Qexo_23_d41d8cd98f00b204e9800998ecf8427e.png

没错就这一条，镜像里面都设置好了，直接引用镜像就行

然后目录下面就会看见两个这两个文件在同一个文件夹

https://r2.kwxos.pp.ua/Qexo/23/12/6/9e0957c36e2f275d7a23e4b7fabfa084_d41d8cd98f00b204e9800998ecf8427e.png

然后输入

1
flyctl deploy

就可以等待部署完成了

fly.io常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
flyctl version查看flyctl的版本
fly auth signup登录fly账户
fly launch创建fly容器
flyctl deploy将部署文件推送至fly
flyctl status查看App状态
flyctl info查看App信息
flyctl apps list查看App列表
flyctl ips list查看App的IP
flyctl apps destroy <appname>销毁某个App
flyctl ssh console -a 容器名命令登录部署的服务器
复制部署机器上的文件到本地
在一个终端输入下面的命令来代理端口
fly proxy 10022:22
然后保持上面的终端打开，在另一个终端输入下面的命令:
scp -P 10022 root@localhost:/path/of/file/on/vm /path/on/local

关于哪吒美化

我用的这位大佬的方案https://www.nodeseek.com/post-32011-1

fly怎么改嘞，推荐方法二

方法一：

其实只需要将GitHub备份的压缩包下载下来，改里面的主题文件，改完后上传，在将备份仓库的README.md文件内容改为你上传压缩包的文件名就行，过几分钟等待备份程序自动将美化文件修改至fly.io

方法二：

先把 Github 备份库里的 README.md 文件内容改为 backup，

https://r2.kwxos.pp.ua/Qexo/23/12/19/back_d41d8cd98f00b204e9800998ecf8427e.png

远程登录命令：

1
flyctl ssh console -a 容器名

然后复制下面任一脚本：

kshipeng大佬–>dome

1
wget -N https://github.com/kwxos/nezhaTheme/releases/download/nezhaTheme-page/kshipengTheme.tar.gz && tar -xzvf kshipengTheme.tar.gz && rm -rf kshipengTheme.tar.gz && ./backup.sh

amzayo大佬–>dome

1
wget -N https://github.com/kwxos/nezhaTheme/releases/download/nezhaTheme-page/amzayoTheme.tar.gz && tar -xzvf amzayoTheme.tar.gz && rm -rf amzayoTheme.tar.gz && ./backup.sh

去面板后台，前台主题改为：custom(local)

将下面代码复制到哪吒面板后台的“自定义代码”文本框里

kshipeng大佬CSS文件改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<style>
/* 屏幕适配 */
@media only screen and (min-width: 1200px) {
	.ui.container {
        width: 80% !important;
    }
}

@media only screen and (max-width: 767px) {
	.ui.card>.content>.header:not(.ui), .ui.cards>.card>.content>.header:not(.ui) {
		margin-top: 0.4em !important;
	}
}
 
/* 整体图标 */
i.icon {
	color: #000;
	width: 1.2em !important;
}
 
/* 背景图片 */
body {
	content: " " !important;
	background: fixed !important;
	z-index: -1 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	background-position: top !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-image: url(https://gitee.com/darki/img/raw/master/1631081013043.webp) !important;
	font-family: Arial,Helvetica,sans-serif !important;
}
 
/* 导航栏 */
.ui.large.menu {
	border: 0 !important;
	border-radius: 0px !important;
	background-color: rgba(255, 255, 255, 55%) !important;
}
 
/* 首页按钮 */
.ui.menu .active.item {
	background-color: transparent !important;
}
 
/* 导航栏下拉框 */
.ui.dropdown .menu {
	border: 0 !important;
	border-radius: 0 !important;
	background-color: rgba(255, 255, 255, 80%) !important;
}
 
/* 登陆按钮 */
.nezha-primary-btn {
	background-color: transparent !important;
	color: #000 !important;
}
 
/* 大卡片 */
#app .ui.fluid.accordion {
	background-color: #fbfbfb26 !important;
	border-radius: 0.4rem !important;
}
 
/* 小卡片 */
.ui.four.cards>.card {
	border-radius: 0.6rem !important;
	background-color: #fafafaa3 !important;
}

/* 卡片内间距，如需调整小卡片高度，可以修改下面的3.3rem的数字 */
.status.cards .wide.column {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	height: 3.3rem !important;
}

.status.cards .three.wide.column {
	padding-right: 0rem !important;
}

.status.cards .wide.column:nth-child(1) {
	margin-top: 2rem !important;
}

.status.cards .wide.column:nth-child(2) {
	margin-top: 2rem !important;
}

.status.cards .description {
	padding-bottom: 0 !important;
}
 
/* 小鸡名 */
.status.cards .flag {
	margin-right: 0.5rem !important;
}
 
/* 弹出卡片图标 */
.status.cards .header > .info.icon {
	margin-right: 0 !important;
}

.nezha-secondary-font {
	color: #21ba45 !important;
}
 
/* 进度条圆角和颜色 */
.ui.progress {
	border-radius: 50rem !important;
}

/* 状态进度条 */
.ui.progress .bar {
	min-width: 1.8em !important;
	border-radius: 15px !important;
	line-height: 1.65em !important;
}

/* 正常状态进度条颜色 */
.ui.progress.fine .bar {
	background-color: #21ba45 !important;
}

/* 有点累状态进度条颜色 */
.ui.progress.warning .bar {
	background-color: #ff9800 !important;
}

/* 高负载状态进度条颜色 */
.ui.progress.error .bar {
	background-color: #e41e10 !important;
}

/* 离线状态进度条颜色 */
.ui.progress.offline .bar {
	background-color: #000 !important;
}
 
/* 上传下载 */
.status.cards .outline.icon {
	margin-right: 1px !important;
}

i.arrow.alternate.circle.down.outline.icon {
	color: #21ba45 !important;
}

i.arrow.alternate.circle.up.outline.icon {
	color: red !important;
}
 
/* 弹出卡片小箭头 */
.ui.right.center.popup {
	margin: -3px 0 0 0.914286em !important;
	-webkit-transform-origin: left 50% !important;
	transform-origin: left 50% !important;
}

.ui.bottom.left.popup {
	margin-left: 1px !important;
	margin-top: 3px !important;
}

.ui.top.left.popup {
	margin-left: 0 !important;
	margin-bottom: 10px !important;
}

.ui.top.right.popup {
	margin-right: 0 !important;
	margin-bottom: 8px !important;
}

.ui.left.center.popup {
	margin: -3px .91428571em 0 0 !important;
	-webkit-transform-origin: right 50% !important;
	transform-origin: right 50% !important;
}

.ui.right.center.popup:before,
.ui.left.center.popup:before {
	border: 0px solid #fafafaeb !important;
	background: #fafafaeb !important;
}

.ui.top.popup:before {
	border-color: #fafafaeb transparent transparent !important;
}

.ui.popup:before {
	border-color: #fafafaeb transparent transparent !important;
}

.ui.bottom.left.popup:before {
	border-radius: 0 !important;
	border: 1px solid transparent !important;
	border-color: #fafafaeb transparent transparent !important;
	background: #fafafaeb !important;
	-webkit-box-shadow: 0px 0px 0 0 
#fafafaeb !important;
	box-shadow: 0px 0px 0 0 #fafafaeb !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

.ui.bottom.right.popup:before {
	border-radius: 0 !important;
	border: 1px solid transparent !important;
	border-color: #fafafaeb transparent transparent !important;
	background: #fafafaeb !important
-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
	box-shadow: 0px 0px 0 0 #fafafaeb !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

.ui.top.left.popup:before {
	border-radius: 0 !important;
	border: 1px solid transparent !important;
	border-color: #fafafaeb transparent transparent !important;
	background: #fafafaeb !important;
	-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
	box-shadow: 0px 0px 0 0 #fafafaeb !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

.ui.top.right.popup:before {
	border-radius: 0 !important;
	border: 1px solid transparent !important;
	border-color: #fafafaeb transparent transparent !important;
	background: #fafafaeb !important;
	-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
	box-shadow: 0px 0px 0 0 #fafafaeb !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

.ui.left.center.popup:before {
	border-radius: 0 !important;
	border: 1px solid transparent !important;
	border-color: #fafafaeb transparent transparent !important;
	background: #fafafaeb !important;
	-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
	box-shadow: 0px 0px 0 0 #fafafaeb !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}
 
/* 弹出卡片 */
.status.cards .ui.content.popup {
	min-width: 20rem !important;
	line-height: 2rem !important;
	border-radius: 5px !important;
	border: 1px solid transparent !important;
	background-color: #fafafaeb !important;
	font-family: Arial,Helvetica,sans-serif !important;
}

.ui.content {
	margin: 0 !important;
	padding: 1em !important;
}
 
/* 服务页 */
.ui.table {
	background: RGB(225,225,225,0.6) !important;
}

.ui.table thead th {
	background: transparent !important;
}
 
/* 服务页进度条 */
.service-status .good {
	background-color: #21ba45 !important;
}

.service-status .danger {
	background-color: red !important;
}

.service-status .warning {
	background-color: orange !important;
}

/* 提示消息 */
.floating.message.success {
	backdrop-filter: blur(15px) brightness(110%);
	background-color: rgba(255, 255, 255, 0.556);
	border: 3px solid rgba(225.225.255.0.5);
	border-radius: 1rem !important;
	color: black;
	box-shadow: 0 0 15px rgba(33, 186, 69, 0.66);
}

.floating.message.success .header {
	color: black;
}

.floating.message.warning {
	backdrop-filter: blur(15px) brightness(110%);
	background-color: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(225.225.255.0.5);
	border-radius: 1rem !important;
	color: black;
	box-shadow: 0 0 15px rgba(33, 186, 69, 0.66);
}

.floating.message.warning .header {
	color: black;
}
 
/* 版权 */
.ui.inverted.segment, 
.ui.primary.inverted.segment {
	color: #000 !important;
	font-weight: bold !important;
	background-color: #fafafaa3 !important;
}
</style>
 
<!--Logo和版权-->
<script>
window.onload = function() {
var avatar=document.querySelector(".item img")
var footer=document.querySelector("div.is-size-7")
footer.innerHTML="Copyright © 2023 All Rights Reserved."
footer.style.visibility="visible"
avatar.src="https://img14.360buyimg.com/ddimg/jfs/t1/162473/22/23012/3692/6184b06aEa95a0194/8c51cebbd04b95b2.png"
avatar.style.visibility="visible"
}
</script>

<!--替换默认Favicon-->
<script>
var faviconurl="//img14.360buyimg.com/ddimg/jfs/t1/162473/22/23012/3692/6184b06aEa95a0194/8c51cebbd04b95b2.png";
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/png';
link.rel = 'shortcut icon';
link.href = faviconurl;
document.getElementsByTagName('head')[0].appendChild(link);
</script>

amzayo大佬CSS文件改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
<script>
    // 动画
    window.onload = function () {
        $('.nb-menu').css('visibility', 'visible');
        $('.footer').css('visibility', 'visible');
        $('.nb-menu .right.menu,.nb-menu .item')
            .transition({
                animation: 'fade down in',
                interval: 200,
            });
        $('.footer .container b,.footer .container small')
            .transition({
                animation: 'fade up in',
                interval: 200,
            });
        $('.accordion,.cards .card,table,.table tr,.service-status h2')
            .transition({
                animation: 'scale in',
                interval: 150
            });
    }
</script>
<style>
    :root {
        --lc-color-light: rgba(235, 235, 235, 0.8);
        --bc-color-light: rgba(235, 235, 235, 0.4);
        --the-color-light: rgba(235, 235, 235, 0.6);
        --he-color-light: rgba(235, 235, 235, 0.8);
        --message-color-light: rgb(22, 22, 22, 1);
        --popup-color-light:rgba(235, 235, 235, 1);

        --bc-color-dark: rgba(0, 0, 0, 0.4);
        --lc-color-dark: rgba(55, 55, 55, 0.8);
        --the-color-dark: rgba(35, 35, 35, 0.3);
        --he-color-dark: rgba(35, 35, 35, 0.8);
        --message-color-dark: rgb(235, 235, 235, 0.8);
        --popup-color-dark:rgba(78, 78, 78, 1);


        /* 注释上面一段颜色代码并取消下面注释的代码开启毛玻璃效果（图形性能开销巨大，可能导致掉帧） */

        /* --bb: blur(15px) brightness(110%);
        --lc-color-light: rgba(255, 255, 255, 0.7);
        --bc-color-light: rgba(255, 255, 255, 0.1);
        --the-color-light: rgba(255, 255, 255, 0.4);
        --he-color-light: rgba(255, 255, 255, 0.5);
        --message-color-light: rgb(22, 22, 22, 1); 
        --popup-color-light:rgba(235, 235, 235, 1);

        --bc-color-dark: rgba(0, 0, 0, 0.3);
        --lc-color-dark: rgba(55, 55, 55, 0.8);
        --the-color-dark: rgba(70, 70, 70, 0.1);
        --he-color-dark: rgba(35, 35, 35, 0.7);
        --message-color-dark: rgb(235, 235, 235, 0.8);
        --popup-color-dark:rgba(78, 78, 78, 1); */
  
    }

    /* 暗色模式适配 */
    @media (prefers-color-scheme: dark) {
        *:not(.icon, i) {
            color: rgba(220, 220, 220, 0.95) !important;
        }

        .ui.menu .ui.dropdown .menu>.item {
            color: rgba(220, 220, 220, 0.95) !important;
        }


        .ui .cards>.card {
            background-color: var(--lc-color-dark) !important;
            border-color: var(--lc-color-dark) !important;
        }

        .ui .cards>.card i:not(.flag) {
            filter: saturate(60%) !important;
        }


        .ui.table thead th,
        .ui.table thead {
            background-color: var(--the-color-dark) !important;
        }

        .ui.table {
            background-color: none !important;
        }

        .ui.large.menu,
        .right.menu .menu,
        .service-status h2,
        .footer,
        .floating.message.warning,
        .floating.message.success {
            background-color: var(--he-color-dark) !important;
        }

        .floating.message.warning,
        .floating.message.success {
            color: var(--message-color-dark) !important;
        }

        #app .ui.fluid.accordion,
        .table {
            background-color: var(--bc-color-dark) !important;
        }

        .ui.content.popup {
            background-color: var(--popup-color-dark) !important;
        }
        .ui.content.popup:before{
            background-color: var(--popup-color-dark) !important;
        }

        .ui.progress small,
        td:not(.button):not(.bar):not(:has(.button, .bar)):not(:has(> small)) {
            filter: brightness(115%);
        }

        .ui.progress .bar,
        .nb-container .ui.icon.button,
        .service-status .delay-today>i {
            filter: brightness(85%);
        }

        .ui.button:hover {
            filter: brightness(100%) !important;
        }

        .ui.popup:before {
            background-color: var(--popup-color-dark) !important;
            box-shadow: 0px 0px 0 0 #ffffff !important;
        }

        .amzayo-custom-button {
            background-color: #4d4d4d8f !important;
            color: rgba(178, 178, 178, 0.95) !important;
            border: 2px solid #292929ae !important;
        }

        .amzayo-custom-button:hover {
            background-color: #ff8457 !important;
            color: #ffffffbd !important;
            font-weight: bolder !important;
        }

        i.amzayo-secondary-font {
            color: #727272ae !important;
        }

        .ui.popup {
            background-color: var(--popup-color-dark) !important;
        }

        .ui.menu .item:before {
            background: rgba(125, 125, 125, 0.15);
        }

        .ui.menu .active.item {
            background: rgba(10, 10, 10, 0.2);
        }

        .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child {
            border-left: 1px solid rgba(125, 125, 125, 0.15);
        }
    }

    /* 屏幕适配 */

    @media (min-width: 320px) {
        .ui-alerts.top-center {
            margin-left: 0px !important;
            left: 50%;
            transform: translate(-50%, -0%);
        }
    }

    @media (min-width: 766px) {
        .ui.container {
            width: 80%;
        }

        /* 表格样式 */
        .ui.table thead th {
            backdrop-filter:var(--bb);
            background-color: var(--the-color-light);
        }

        thead tr :first-child {
            border-radius: 1rem 0 0 1rem !important;
        }

        thead tr :last-child {
            border-radius: 0 1rem 1rem 0 !important;
        }

        /* 小卡片 */
        .ui .cards>.card {
            border-radius: 1rem;
            border: none !important;
            background-color: var(--lc-color-light);
            padding: .25rem .25rem !important;
            margin: .5rem .3rem !important;
            visibility: hidden;
        }

        /* 小卡片头部调整 */
        .ui.card>.content>.header,
        .ui.cards>.card>.content>.header {
            padding-top: 0;
            display: flex;
            color: rgba(0, 0, 0, .85);
            align-items: center;
            padding-bottom: .2em;
            border-bottom: 1px solid rgba(0, 0, 0, .2);
        }

        .header_info {
            font-size: 1rem !important;
            line-height: 1rem !important;
            margin-top: .3rem !important;
            padding-right: .38rem !important;
        }
    }

    @media (max-width: 766px) {

        /* 表格样式 */
        .ui.table thead {
            backdrop-filter:var(--bb);
            background-color: var(--the-color-light);
        }

        thead {
            border-radius: 1rem !important;
        }

        thead tr {
            padding: 0 !important;
        }

        /* 小卡片 */
        .ui .cards>.card {
            border-radius: 1rem;
            background-color: var(--lc-color-light);
            outline: none !important;
            visibility: hidden;
        }

        /* 小卡片头部调整 */
        .ui.card>.content>.header,
        .ui.cards>.card>.content>.header {
            padding-top: 0.5rem;
            display: flex;
            color: rgba(0, 0, 0, .85);
            align-items: center;
            padding-bottom: .2em;
            border-bottom: 1px solid rgba(0, 0, 0, .2);
        }

        .header_info {
            font-size: 1rem !important;
            line-height: 1rem !important;
            padding-top: -.1rem !important;
            padding-right: .38rem !important;
        }
    }

    /* 自定义字体 */
    @font-face {
        font-family: 'Harmony Hans';
        src: url(https://cdn.amzayo.top/static/fonts/HarmonyOSHans-Medium.woff2) format('woff2');
    }

    * {
        font-family: 'Harmony Hans';
    }

    *:not(.content) {
        transition: all .2s;
    }

    /* 背景图片 */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: url(https://cdn.amzayo.top/static/public/luban/Luban_time_tour_poster.webp) center/cover no-repeat;
    }

    /* 初始隐藏元素，用于动画效果，关闭动画效果请删除 */
    .nb-menu,
    .nb-menu .right.menu,
    .nb-menu .item,
    .accordion,
    .footer,
    .footer .container b,
    .footer .container small,
    .table,
    .table tr,
    .service-status h2 {
        visibility: hidden;
    }

    /* 菜单颜色 */
    .ui.large.menu {
        backdrop-filter:var(--bb);
        background-color: var(--he-color-light);
        border-radius: 0 0 1rem 1rem !important;
    }

    .ui.menu .item:last-child {
        padding: 0 1.142em !important;
    }

    /* 登录按钮区域 */
    .ui.simple.dropdown {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    /* 登录之后的下拉菜单 */
    .right.menu .menu {
        border-radius: 0 0 1rem 1rem !important;
        position: absolute;
        top: 0 !important;
        background-color: var(--he-color-light);
        padding: 0 0.3em !important;
    }

    /* 登录按钮颜色（需要使用配套自定义主题） */
    .amzayo-custom-button {
        backdrop-filter:var(--bb);
        background-color: #ffffff8f;
        color: #000000cf;
        border: 2px solid #ebe1d9;
        border-radius: 1rem;
        padding: 10px 20px;
        font-size: 16px;
    }

    .amzayo-custom-button:hover {
        background-color: #ff8457;
        color: #ffffffbd;
        font-weight: bolder;
    }

    /* 大卡片 */
    #app .ui.fluid.accordion {
        backdrop-filter:var(--bb);
        background-color: var(--bc-color-light);
        border-radius: 1rem;
    }

    #app :last-child.accordion {
        margin-bottom: 0 !important;
    }

    /* 小卡片靠哪个方向对齐 */
    .cards {
        justify-content: center;
    }

    .ui.card,
    .ui.cards>.card {
        box-shadow: none !important;
    }

    /* 取消下方注释调整下面的数字以调整卡片宽度（非移动端页面，移动端页面让它自适应吧） */
    /* .ui.card,
    .ui.cards>.card {
        width: 300px !important;
    } */

    /* 小卡片右上角的图标 */

    i.amzayo-secondary-font {
        margin-left: auto;
        color: rgba(255, 153, 1, 0.65);
    }

    /* 头部配置信息样式 */
    .header_info i {
        margin-top: .25rem;
        margin-right: .3rem;
        margin-left: .3rem;
    }

    /* 更多信息卡片 */
    .ui.content.popup {
        border: none !important;
        border-radius: 1rem;
        margin: 0;
        padding: 1em !important;
        background-color: var(--popup-color-light);
        width: max-content;
        height: max-content;
    }

    .ui.popup {
        border: none !important;
    }

    /* 小三角 */
    .ui.content.popup:before {
        background-color: var(--popup-color-light);
        z-index: 9999 !important;
        border: none !important;
        box-shadow: 0px 0px 0 0 #ffffff !important;
    }

    .ui.bottom.popup:before {
        clip-path: polygon(0 0, 100% 0, 50% 50%, 0 100%);
    }

    .ui.top.popup:before {
        clip-path: polygon(100% 100%, 0% 100%, 100% 0);
    }

    /* 进度条圆角和颜色 */
    .ui.progress {
        border-radius: 50rem;
        height: 1.5rem;
    }

    /* 卡片内间距，如需调整小卡片高度，可以修改下面的2rem的数字 */
    .status.cards .wide.column {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 2rem !important;
    }

    .bi::before,
    [class^="bi-"]::before,
    [class*=" bi-"]::before {
        vertical-align: middle;
        margin-bottom: .2rem;
    }

    /* 状态进度条 */
    .card .bar {
        height: 1.5rem;
    }

    .card .bar small {
        vertical-align: super;
        line-height: 1.5rem;
    }

    .card .ui.progress .bar {
        min-width: 1.8em !important;
        border-radius: 13px;
        line-height: 1.65em;
        height: 1.5rem;
    }

    table .ui.progress .bar {
        border-radius: 13px;
    }

    /* 正常状态进度条颜色 */
    .nb-container .ui.progress.fine .bar {
        background-image: linear-gradient(to right, rgba(125, 252, 0, 0.6), rgba(50, 205, 50, 0.6));
    }

    /*有点累状态进度条颜色 */
    .nb-container .ui.progress.warning .bar {
        background-image: linear-gradient(to right, rgba(255, 215, 0, 0.6), rgba(255, 125, 80, 0.6));
    }

    /*高负载状态进度条颜色 */
    .nb-container .ui.progress.error .bar {
        background-image: linear-gradient(to right, rgba(255, 160, 120, 0.6), rgba(255, 70, 0, 0.6));
    }

    /* 离线状态进度条颜色 */
    .ui.progress.offline .bar {
        background-color: #000;
    }

    /* 上传下载图标颜色 */
    i.arrow.alternate.circle.down.outline.icon {
        color: rgb(0, 157, 255);
    }

    i.arrow.alternate.circle.up.outline.icon {
        color: #ff0000;
    }

    /*服务状态*/
    .nb-container .service-status .good {
        background: rgba(50, 205, 50, 0.75);
    }

    .nb-container .service-status .warning {
        background: rgba(250, 155, 40, 0.75);
    }

    .nb-container .service-status .danger {
        background: rgba(255, 35, 0, 0.75);
    }

    /* 服务页面大表格背景 */
    .table {
        backdrop-filter:var(--bb);
        background-color: var(--bc-color-light);
        border-radius: 1rem !important;
    }

    .ui.table {
        background-color: var(--bc-color-light);
    }

    .ui.button:not(.good):not(.warning):not(.danger):hover {
        background: #e0e1e2 none;
    }

    .ui.button:hover {
        filter: brightness(0.9);
    }

    .service-status .delay-today {
        vertical-align: sub;
    }

    /* 循环流量统计标题 */
    .service-status h2 {
        backdrop-filter:var(--bb);
        background-color: var(--he-color-light);
        border-radius: 1rem !important;
        margin: 0 !important;
    }

    /*底部*/
    .footer {
        backdrop-filter:var(--bb);
        background-color: var(--he-color-light);
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 1rem 1rem 0 0 !important;
    }

    .ui.inverted.segment,
    .ui.primary.inverted.segment {
        background-color: var(--he-color-light);
    }

    .footer .container,
    .footer .container a {
        color: var(--message-color-light);
    }

    .footer .container a:hover {
        color: #ff8457 !important;
    }

    /* 提示消息 */
    .floating.message.success {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: var(--he-color-light);
        border: 3px solid rgba(255.255.255.0.5);
        border-radius: 1rem !important;
        color: var(--message-color-light);
        box-shadow: 0 0 15px rgba(1, 132, 255, 0.65);
    }

    .floating.message.success .header {
        color: var(--message-color-light);
    }

    .floating.message.warning {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: var(--he-color-light);
        border: 1px solid rgba(255.255.255.0.5);
        border-radius: 1rem !important;
        color: var(--message-color-light);
        box-shadow: 0 0 15px rgba(255, 153, 1, 0.65);
    }

    .floating.message.warning .header {
        color: var(--message-color-light);
    }

    .cpucontent {
        display: inline-block;
    }

    .rollanimation {
        animation: scroll 10s cubic-bezier(.2, 0, .8, 1) infinite;
    }

    @keyframes scroll {

        0% {
            transform: translateX(0%);
        }

        30% {
            transform: translateX(0%);
        }

        100% {
            transform: translateX(-100%);
        }

    }


    /*
  
    以下样式为部分原版主题样式，由于原版主题样式有些强制性，不方便二次修改，故拿出来
  
    */

    .ui.mini.message {
        width: 17rem;
    }

    .ui-alerts {
        padding: 23px 0 !important;
    }

    td {
        word-wrap: break-word;
        word-break: break-all;
    }

    .nb-container {
        padding-top: 75px;
        min-height: 100vh;
        padding-bottom: 65px;
        margin-bottom: -47px;
    }

    #app .ui.fluid.accordion {
        margin-bottom: 1rem;
    }

    .login.nb-container {
        display: flex;
        align-items: center;
        padding-top: unset;
    }

    .login.nb-container>.grid {
        width: 100%;
        margin: 0 auto;
    }

    .login.nb-container>.grid .column {
        max-width: 450px;
    }

    .status.cards .flag {
        margin-right: 0 !important;
    }

    .status.cards .header>.info.icon {
        float: right;
        margin-right: 0;
    }

    .status.cards .wide.column {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 2rem !important;
    }

    .status.cards .three.wide.column {
        padding-right: 0 !important;
    }

    .status.cards .wide.column:nth-child(1) {
        margin-top: 1rem !important;
    }

    .status.cards .wide.column:nth-child(2) {
        margin-top: 1rem !important;
    }

    .status.cards .description {
        padding-bottom: 1rem !important;
    }

    .status.cards .ui.content.popup {
        min-width: 250px;
    }

    .status.cards .outline.icon {
        margin-right: 0 !important;
    }

    .ui.progress .bar {
        min-width: 1.26em !important;
        text-align: right;
        padding-right: 0.4em;
        line-height: 1.75em;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 700;
        max-width: 100% !important;
    }

    .service-status .delay-today {
        display: flex;
        align-items: center;
    }

    .service-status .delay-today>i {
        display: inline-block;
        width: 1.2em;
        height: 1.2em;
        border-radius: 0.6em;
        background-color: grey;
        margin-right: 0.3em;
    }
</style>

然后就OK了，主题美化用的还是https://www.nodeseek.com/post-32011-1 这位老的方案哦！！！

具体看这个F大的仓库解释：https://github.com/fscarmen2/Argo-Nezha-Service-Container/tree/main#%E6%89%8B%E5%8A%A8%E5%A4%87%E4%BB%BD%E6%95%B0%E6%8D%AE

容器文件格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/dashboard/
|-- app                  # 哪吒面板主程序
|-- argo.json            # Argo 隧道 json 文件，记录着使用隧道的信息
|-- argo.yml             # Argo 隧道 yml 文件，用于在一同隧道下，根据不同域名来分流 web, gRPC 和 ssh 协议的作用
|-- backup.sh            # 备份数据脚本
|-- restore.sh           # 还原备份脚本
|-- dbfile               # 记录最新的还原或备份文件名
|-- resource             # 面板主题、语言和旗帜等资料的文件夹
|-- data
|   |-- config.yaml      # 哪吒面板的配置，如 Github OAuth2 / gRPC 域名 / 端口 / 是否启用 TLS 等信息
|   `-- sqlite.db        # SQLite 数据库文件，记录着面板设置的所有 severs 和 cron 等信息
|-- entrypoint.sh        # 主脚本，容器运行后执行
|-- nezha.csr            # SSL/TLS 证书签名请求
|-- nezha.key            # SSL/TLS 证书的私钥信息
|-- nezha.pem            # SSL/TLS 证书文件
|-- cloudflared          # Cloudflare Argo 隧道主程序
|-- grpcwebproxy         # gRPC 反代主程序
`-- nezha-agent          # 哪吒客户端，用于监控本地 localhost

教程如果有错误的，在下面评论我改o(╥﹏╥)o，前提你得告诉我哪步出错，不要只说部署失败了