项目综合状态页开发笔记（一）技术选型

前言

自己的各个小项目状态一直都散乱在各处：Zabbix、哪吒监控、Prometheus + Grafana 和 Rancher + Grafana，每天光确认项目运行状态都是一件相当费时费力的事情，由此萌生了开发个项目综合状态页的想法。

前端技术选型

语言和框架

虽然目前工作中对日方老项目的重构，优先都考虑使用 Vue.js 以提高效率和降低开发门槛。
但是由于自己创业期间使用的前端技术栈是 React + TypeScript，带有私心且写的比较久，语言和框架于是就定下为更心水的了。

• React
• TypeScript

组件库

对 React + TypeScript 友好，且文档和案例足够全的国内似乎只有 Ant Design 和 Element UI 两个。
看下效果：

to B 的味道都有点太重了，尤其是白蓝的经典配色，写起来像是在上班 😂。
自己的项目还是希望美观一点，即使写起来稍微复杂一些也是可以接受的，于是又稍微找了下，看到了这个帖子：React UI 组件库选择
顺手翻了下还有排行：Component set + React
于是花了点时间做了调查和比较：

非常主观地最后选择了 NextUI，正好也是机会尝试下 Tailwind CSS。
免费的组件姑且足够搭建一个状态页了，后续再看情况决定是否付费也可以。

更多

虽然一开始并没有考虑使用 Next.js 作为项目的基础框架，但是在选择了 NextUI 之后，发现 NextUI 的文档中给了在 Next.js 项目中导入的示例，于是就顺手选择了 Next.js。
之前听说过 Next.js 的特点：

• 服务器端渲染（SSR）：支持在服务器上渲染 React 组件，提供更快的初始页面加载速度和更好的 SEO。
• 静态站点生成（SSG）：在构建时生成静态 HTML 文件，适用于内容不经常变化的网站。
• 客户端路由：内置路由系统，简化页面间的导航。
• API 路由：允许在同一项目中创建 API 路由，简化前后端的集成。
• 优化和性能：自动代码分割、预取、热模块替换等功能提高应用性能。

内置路由系统和 API 路由对于快速开始项目还是很有帮助的，于是坚定了折腾一下的想法。

实际构建的过程

主要参考 NextUI 的文档：Next.js | NextUI - Beautiful, fast and modern React UI Library

1. 确定下 Node.js 和 npm 版本：

node -v
# v20.16.0

npm -v
# 10.8.1

如果没有安装的话前往：下载 Node.js 进行安装。

2. 安装 NextUI CLI：

npm install -g nextui-cli
# added 73 packages in 9s

3. 初始化一个名为 sbeer-io 的项目：

nextui init -t app

如果没有安装 yarn 的话可以选择 npm，当然你也可以使用以下命令安装 yarn：

npm install --global yarn

相比 npm，yarn 有更快的下载速度和更好的缓存机制。

4. 进入项目目录、安装依赖并启动项目：

cd sbeer-io
yarn install
yarn dev

之后前往 http://localhost:3000 即可看到项目的初始页面：

后端技术选型

暂时不涉及到权限和复杂的功能，因此怎么方便怎么来吧：Python3 + FastAPI 一把梭就好了。

数据源

结合自己已有的项目和监控平台：

• Prometheus
• InfluxDB
• PostgreSQL
• Zabbix（接口）

后端需要定义好数据结构。

总结

前端技术选型：

• Next.js
• React
• TypeScript
• NextUI
• Tailwind CSS

后端技术选型：

• Python3
• FastAPI

数据源：

• Prometheus
• InfluxDB
• PostgreSQL
• Zabbix（接口）

暂时结束，开始写 Home Page 看看还存在什么问题。