准备工作
搭建一个哪吒监控，你需要：
一台可以连接公网的服务器，防火墙和安全策略需要放行 8008 和 5555 端口，否则会无法访问和无法接收数据。单核 512MB 内存的服务器配置就足以满足大多数使用场景。
一个已经设置好 A 记录，指向 Dashboard 服务器 IP 的域名。
TIP
如果你想使用 CDN，请准备两个域名，一个配置好 CDN 用作公开访问，CDN 需要支持 WebSocket 协议；另一个域名不要使用 CDN，用作 Agent 端与 Dashboard 的通信。
本文档分别以 "dashboard.example.com" 和 "data.example.com" 两个域名来演示。
一个 Github 账号（或：Gitlab、Gitee）。
本文档将以宝塔面板反代 Dashboard 的过程作为示范，随着未来版本的变化，部分功能的入口可能会发生改变，本文档仅供参考。
WARNING
本项目并不依赖宝塔，你可以选择使用你喜欢的任何服务器面板，或手动安装 Nginx 或 Caddy 来配置 SSL 和反代。
如果你认为没有必要使用 80、443 端口来访问 Dashboard，你甚至不需要安装 Nginx 就可以直接使用安装脚本安装并运行哪吒监控。
获取 Github 的 Client ID 和密钥
哪吒监控接入 Github、Gitlab、Gitee 作为后台管理员账号。
首先我们需要新建一个验证应用，以 Github 为例，登录 Github 后，打开 https://github.com/settings/developers ，依次选择“OAuth Apps” - “New OAuth App”。
Application name- 随意填写。Homepage URL- 填写面板的访问域名，如："http://dashboard.example.com"（你的域名）。Authorization callback URL- 填写回调地址，如："http://dashboard.example.com/oauth2/callback"（不要忘记/oauth2/callback）。点击 “Register application”。
保存页面中的 Client ID，然后点击 “Generate a new client secret“，创建一个新的 Client Secret，新建的密钥仅会显示一次，请妥善保存。
使用 Cloudflare Access 作为 OAuth2 提供方
对于位于中国大陆的用户，直接连接到 GitHub 可能会遇到困难。如果您在使用 GitHub、GitLab 或 Gitee 作为管理员账户登录时遇到问题，建议切换到使用 Cloudflare Access 作为 OAuth2 提供方 进行登录。
新建 SaaS-OIDC 应用流程
WARNING
以下步骤适用于已经开始使用 Zero Trust 的用户。如果您尚未使用过 Cloudflare Zero Trust，强烈建议您首先阅读 Cloudflare Access 作为 OAuth2 提供方的使用指南，以了解 Cloudflare Access 的配置示例和流程。
前往 Zero Trust Dashboard，使用 Cloudflare 账号登录。
My Team->Users-><具体用户>-> 获取User ID并保存。Access->Application->Add an Application。选择
SaaS，在Application中输入自定义的应用名称（例如 nezha），选择OIDC后点击Add application。Scopes选择openid,email,profile,groups。Redirect URLs填写你的 callback 地址，例如https://dashboard.example.com/oauth2/callback。保存
Client ID、Client Secret、Issuer地址中协议与域名的部分，例如https://xxxxx.cloudflareaccess.com。
如使用此方式，安装 Dashboard 完成后，需要修改配置文件 /opt/nezha/dashboard/data/config.yaml，将 Endpoint 配置修改为之前保存的 Issuer 地址，例如 https://xxxxx.cloudflareaccess.com，保存后需重启 Dashboard。
OIDC 验证配置（可选）
哪吒支持自定义 OIDC 验证登录。有关配置详情，请参考文档：启用 OIDC 认证。
在服务器中安装 Dashboard
在面板服务器中，运行安装脚本：
curl -L https://raw.githubusercontent.com/nezhahq/scripts/refs/heads/v0/install.sh -o nezha.sh && chmod +x nezha.sh && sudo ./nezha.sh2 agent部分
agent安装脚本
把后台复制出来的 main改成v0就可以了
TG通知美化
URL：https://api.telegram.org/bot你的TG_BOT_Token/sendMessage
请求方式 GET POST
Body处填写
{
"chat_id": "你tg的id",
"text": "# *CoCo的探针警报*\n\n时间：#DATETIME#\n来自: \"#SERVER.NAME#\"\n\n*#NEZHA#*",
"parse_mode": "Markdown",
"reply_markup": {
"inline_keyboard": [
[
{
"text": "来自: \"#SERVER.NAME#\"",
"callback_data": "#"
}
],
[
{
"text": "CoCo探针仪表盘",
"url": "http://tz.971000.xyz"
}
]
]
}
}美化代码1
<style>
/* 屏幕适配 */
@media only screen and (min-width: 767px) {
.ui.container {
width: 85% !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://speedtest.thya.tk/6156781233d4e7fee53069a296acf86f_preview.gif) !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.ui.dropdown .menu {
border: 0 !important;
border-radius: 0 !important;
background-color: rgba(255, 255, 255, 80%) !important;
}
/* 登陆按钮（需要使用配套自定义主题） */
.nezha-primary-btn {
background-color: rgba(255, 255, 255, 0.8) !important; /* 80%透明白色 */
color: #000 !important;
}
.mochen-primary-btn {
background-color: rgba(255, 255, 255, 0.8) !important; /* 80%透明白色 */
color: #000 !important;
border-radius: 1rem !important;
transition: all 0.5s;
}
.mochen-primary-btn:hover {
background-color: rgba(247, 199, 111, 0.8) !important; /* 80%透明白色 */
color: #000 !important;
border-radius: 1rem !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: 2.3rem !important;
}
.status.cards .thirteen.wide.column {
padding-left: 0rem !important;
padding-right: 1.4rem !important;
}
.status.cards .three.wide.column {
padding-left: 1.4rem !important;
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 .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;
}
.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;
}
/*鼠标*/
body {
cursor: url(https://raw.githubusercontent.com/mocchen/cssmeihua/mochen/a.cur), default;
}
/* 版权 */
.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="Monitor"
footer.style.visibility="visible"
avatar.src="https://s3.tebi.io/nodes.useful.pp.ua/89907652_p0_master1200.jpg"
avatar.style.visibility="visible"
}
var faviconurl="https://s3.tebi.io/nodes.useful.pp.ua/89907652_p0_master1200.jpg" ;
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = faviconurl;
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!-- 网页特效 - 樱花 -->
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yinghua.js"></script>
评论区