这是一款自托管的应用仪表盘构建工具，基于Next.js和Ta…

# Next.js 自托管仪表盘搭建指南

一、技术选型

• 框架：Next.js 14+（App Router）
• 认证：NextAuth.js（Credentials 或 GitHub/邮箱登录均可）
• 监控数据来源：Node Exporter + Prometheus（推荐），或直接调用阿里云云监控 API
• 图表：Recharts 或 ECharts

二、项目初始化

```bash

npx create-next-app@latest dashboard --typescript --app

cd dashboard

npm install next-auth recharts prometheus-api-client

```

三、集成 NextAuth 登录

1. 在 app/api/auth/[...nextauth]/route.ts 配置 Provider

2. 简单方案用 Credentials Provider + 环境变量存账号密码（配合 bcrypt 哈希校验）

3. 用 middleware.ts 保护整个 /dashboard 路由：

```ts

export { default } from "next-auth/middleware";

export const config = { matcher: ["/dashboard/:path*"] };

```

4. 敏感信息全部放 .env.local：NEXTAUTH_SECRET、NEXTAUTH_URL、账号凭据

四、获取容器监控数据

方案 A：Prometheus + Node/cAdvisor（推荐）

1. 在阿里云 ECS 上部署 cAdvisor（采集容器 CPU）和 Node Exporter

2. 用 Prometheus 汇总数据，开放查询端口

3. Next.js 中通过 API Route 代理查询 PromQL：

```ts

// app/api/metrics/route.ts

const res = await fetch(${PROM_URL}/api/v1/query?query=container_cpu_usage_seconds_total);

```

• 容器访问状态可用 up{job="cadvisor"} 或探测各容器端口返回码判断

方案 B：阿里云云监控 API

• 通过 SDK（@alicloud/cms-20190101）拉取 ECS 与容器服务指标，需配置 AccessKey（建议用 RAM 子账号最小权限）

五、前端展示

• 访问状态：5 个容器做成状态卡片（绿/红圆点 + 在线时长）
• CPU 占用：用 Recharts 画实时折线图，setInterval 每 10~30 秒轮询一次 API
• 建议用 Server Components 拉初始数据 + 客户端组件轮询刷新的混合模式

六、部署与安全

1. 自托管：npm run build && npm start，用 PM2 守护进程，Nginx 反代 + HTTPS

2. 安全要点：

• Prometheus/Exporter 端口不对外暴露，仅限内网或 Next.js 所在机器访问
• 开启 NextAuth 的 NEXTAUTH_SECRET
• 可加 fail2ban 或登录次数限制防暴力破解

七、验证清单

• [ ] 未登录访问 /dashboard 被重定向
• [ ] 5 个