一款好用开源的服务器探针监控面板+美化

前言

哪吒监控是一款功能强大的开源服务器运维监控面板，与ServerStatus探针相似，但更加轻量化。它支持监控多台服务器系统状态，并提供在线SSH、计划任务、备份脚本、服务重启等定期维护任务。而且，它可以实时监测服务器的各个硬件情况，并通过微信、邮件和Telegram等方式及时通知管理员发生故障的情况。虽然相比ServerStatus探针，哪吒监控的安装配置稍显复杂，但本文将为您提供详细的安装部署教程

哪吒监控官方文档地址：https://nezha.wiki/index.html

前言：哪吒监控分主控端和被控端，主控端就是提供访问的面板，被控端则是需要监控的服务器。

安装教程

准备工作：

• 准备一个域名，用于提供面板访问，独立域名和二级域名皆可，如本站：monitor.nuoyo.cn和xintiao.nuoyo.cn，并解析到用来部署哪吒面板的服务器公网IP地址，同时该服务器需放行8008端口和5555端口或其它自定义端口。

其实只放行5555端口用作于主备服务器之间的心跳检测就可以，8008端口的话使用Nginx反向代理到域名就可以，所以不用放行。

• 一个 Github 账号 或 Gitlab、Jihulab、Gitee账号，用于哪吒监控管理员账号。

一、获取 Github 的 Client ID 和密钥

1、登录 Github 账户后打开 https://github.com/settings/developers  、然后点击New OAuth App按钮，依次填写昵称，面板访问域名，回调地址；

回调地址：”http://你的域名/oauth2/callback” ，如果你没有配置域名反代，则需要在域名后面加上8008端口或其它自定义端口，如：”http://你的域名:8008”

2、点击 “Register application”后保存下Client ID，然后点击 “Generate a new client secret“，创建一个新的 Client Secret，新建的密钥仅会显示一次，请妥善保存；

1、通过SSH工具登录到你要安装哪吒监控的服务器上，执行下列命令：

• 在面板服务器中，运行安装脚本：

curl -L -o nezha.sh && chmod +x nezha.sh && sudo ./nezha.sh

如果你的面板服务器位于中国大陆，可以使用镜像：

curl -L -o nezha.sh && chmod +x nezha.sh && sudo CN=true ./nezha.sh

• 等待Docker安装完毕后，分别输入以下值：
  OAuth提供商 – Github，Gitlab，Jihulab，Gitee 中选择一个
  Client ID – 之前保存的 Client ID
  Client Secret – 之前保存的密钥
  用户名 – OAuth 提供商中的用户名
  站点标题 – 自定义站点标题
  访问端口 – 公开访问端口，可自定义，默认 8008
  Agent的通信端口 – Agent与Dashboard的通信端口，默认 5555
• 输入完成后，等待拉取镜像
• 将来如果需要再次运行脚本，可以运行：./nezha.sh

三、反向代理

打开宝塔，新建一个web，填入你的域名，然后点击反向代理

四、安装agent端

1、进入到控制面板并登录管理账户，在设置里填写面板域名或IP地址，接着添加服务器，自定义被控端昵称和分组；然后复制相应的一键安装命令，被控端支持安装到Linux系统和windows系统服务器；

美化教程

使用Default默认主题，将代码添加到自定义代码

[reply]

[zd-plane title=”美化样式1：“]

<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://cdn.nuoyo.cn/blog/monitor-bg1.jpg) !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;
}

.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;
color:black
}
.ui.fine.progress> .bar {
background-color: #ba45ac !important;
}
.ui.progress> .bar {
background-color: #000 !important;
}

.ui.progress.fine .bar {
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);!important;
}

.ui.progress.warning .bar {
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); !important;
}

.ui.progress.error .bar {
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);important;
}

.ui.progress.offline .bar {
background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%); !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;
}

/* 服务页进度条 */

/* 版权 */
.ui.inverted.segment, .ui.primary.inverted.segment {
color: #000 !important;
font-weight: bold !important;
background-color: #fafafaa3 !important;
}
</style>

<script>
window.onload = function(){
var avatar=document.querySelector(“.item img”)
var footer=document.querySelector(“div.is-size-7”)
document.querySelector(“[rel=’shortcut icon’]”).href = “https://cdn.nuoyo.cn/blog/favicon.love.ico.ico”
footer.innerHTML=”Copyright © 2023 诺言 All Rights Reserved.”
footer.style.visibility=”visible”
avatar.src=”https://q1.qlogo.cn/g?b=qq&nk=2469329338&s=640″
avatar.style.visibility=”visible”
}
</script>

[/zd-plane]

[/reply]

[reply]

[zd-plane title=”美化样式2″]

<style>

@font-face {
font-family: Bold;
src: url(“https://cdn.nuoyo.cn/ziti/bold.otf”);
}
/* 屏幕适配 */
@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;
}

/* 背景图片 */
html{
font-family: Bold;
}
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://cdn.nuoyo.cn/blog/monitor-bg2.jpg) !important;
font-family: Bold !important;

}

/* 导航栏 */
.ui.large.menu {
border: 0 !important;
border-radius: 0px !important;
background-color: rgba(255, 255, 255, 55%) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

/* 首页按钮 */
.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: 1rem !important;
}

/* 小卡片 */
.ui.four.cards>.card {
border-radius: 1rem !important;
background-color: #fafafa55 !important;
border: 0 !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}

.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.fine.progress> .bar {
background-color: #21ba45 !important;
}

.ui.progress> .bar {
background-color: #000 !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;
z-index:100;
}

.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;
z-index:100;
}

.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;
z-index:100;
}

.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;
z-index:100;
}

.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;
z-index:100;
}

/* 弹出卡片 */
.status.cards .ui.content.popup {
min-width: 20rem !important;
line-height: 2rem !important;
border-radius: 10px !important;
border: 1px solid transparent !important;
background-color: #fafafaeb !important;
font-family: Arial,Helvetica,sans-serif !important;
z-index:100;
}

.ui.content {
margin: 0 !important;
padding: 1em !important;
z-index:100;
}

/* 服务页 */
.ui.table {
background: RGB(225,225,225,0.6) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 1em;
}

.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;
}

/* 版权 */
.ui.inverted.segment, .ui.primary.inverted.segment {
color: #000 !important;
font-weight: bold !important;
background-color: #fafafaa3 !important;
}

nezha-secondary-font info circle icon{
z-index: 100;
}
</style>

<!–Logo和版权–>
<script>
window.onload = function(){
var avatar=document.querySelector(“.item img”)
var footer=document.querySelector(“div.is-size-7″)
footer.innerHTML=”诺言监控 www.nuoyo.cn”
footer.style.visibility=”visible”
avatar.src=”https://cdn.nuoyo.cn/blog/favicon.love.ico.ico”
avatar.style.visibility=”visible”
}
</script>

[/zd-plane]

[/reply]