企业官网建设流程全解析

在业务快速迭代和系统复杂度日益增长的今天，服务稳定性监控与对外透明化成为了技术团队的核心挑战。许多团队依赖第三方SaaS状态页产品，它们功能强大但价格不菲，年费动辄数万甚至数十万美元，且存在数据主权、定制化不足和响应延迟等问题。近期，我们团队成功利用现代AI辅助开发工具链，从零构建了一套功能完备、成本极低的自研状态页系统，完全替代了原计划采购的年费高达6.5万美元的SaaS方案。本文将完整复盘此次构建过程，涵盖技术选型、AI辅助开发实践、核心架构实现、部署方案以及成本对比，为希望掌握自主可控监控能力的开发者和技术决策者提供一份详实的实战指南。

1. 项目背景与核心价值：为什么选择自研？

在深入代码之前，我们首先需要厘清自研状态页的核心动机与价值所在。一个状态页（Status Page）不仅是内部监控的仪表盘，更是对外沟通的桥梁，用于向用户实时展示各项服务的健康状态（如运行正常、性能下降、部分中断、严重故障），发布维护公告和事故报告。

1.1 第三方SaaS方案的痛点

我们曾评估过多款业界知名的SaaS状态页服务，它们确实提供了开箱即用的体验，但也暴露出以下关键问题：

1. 高昂成本：对于需要监控数十个服务、要求高可用性和SLA保障的企业级方案，年费轻松超过5万美元，我们的评估方案约为6.5万美元/年。
2. 数据与流程脱节：状态数据需要从内部的监控系统（如Prometheus、Datadog）再次推送到SaaS平台，存在延迟，且故障发生时，内部告警与对外状态更新容易不同步。
3. 定制化局限：UI主题、状态逻辑、通知渠道、集成方式往往受限于SaaS平台提供的模板和API，难以深度融入公司独有的技术栈和运维流程。
4. 数据主权与合规：服务状态和事件数据存储在第三方，可能涉及安全与合规风险。

1.2 自研方案的优势与挑战

相比之下，自研方案能带来显著收益：

• 成本可控：主要成本为服务器资源与开发投入，长期来看远低于SaaS订阅费。
• 深度集成：可直接对接内部监控、告警、CMDB、工单系统，实现状态判断、事件创建的自动化。
• 完全自主：UI/UX、功能逻辑、数据存储、扩展性完全自主掌控。
• 技能沉淀：构建过程能强化团队在系统监控、实时Web、运维自动化等领域的能力。

当然，挑战也显而易见：开发周期、可靠性设计、持续维护都需要投入。而现代AI编程工具的出现，极大地降低了这些挑战的难度。

1.3 AI辅助开发的定位

在本项目中，AI并非替代开发者，而是作为强大的“副驾驶”（Copilot）。我们利用AI工具（如Cursor、GitHub Copilot）进行：

• 代码生成与补全：快速生成基础CRUD、API接口、前端组件代码。
• 逻辑解释与调试：针对复杂的状态聚合逻辑或前端状态机，让AI解释并建议优化方案。
• 技术方案咨询：针对“如何实现WebSocket实时推送”、“如何设计优雅的降级策略”等问题，获取多种实现思路。
• 文档与测试生成：辅助编写API文档、部署脚本和单元测试。

2. 技术栈选型与环境准备

一个健壮的状态页系统通常包含后端API、实时通信层、前端展示层以及数据存储。以下是我们的技术选型及环境说明。

2.1 核心技术栈

• 后端框架：Node.js with Express.js。选择Node.js因其非阻塞I/O模型适合处理大量并发连接和实时特性，生态丰富，且与前端技术栈协同性好。
• 实时通信：Socket.IO。它封装了WebSocket，并提供了心跳、重连、房间等高级功能，非常适合状态页的实时数据推送。
• 前端框架：React with TypeScript。用于构建动态、组件化的用户界面，TypeScript能显著提升代码质量和开发体验。
• 状态管理：Zustand。轻量级状态管理库，API简单，足以应对状态页的全局状态（如用户主题、通知订阅）管理。
• 数据库：PostgreSQL。用于存储历史状态事件、用户订阅、公告信息等关系型数据。其可靠性和JSONB类型对扩展友好。
• 缓存与实时数据：Redis。用于存储当前各服务的实时状态快照，作为Socket.IO的发布/订阅后端，支撑高并发实时查询。
• 部署与运维：Docker & Docker Compose（开发环境）， Kubernetes 或 云服务商托管容器服务（生产环境）。

2.2 开发环境准备

确保你的本地开发环境已就绪。

操作系统：macOS / Linux / WSL2 (Windows)Node.js：请安装LTS版本（如v18.x 或 v20.x）

# 检查Node.js和npm版本 node --version npm --version

Docker & Docker Compose：用于快速启动PostgreSQL和Redis。

# 检查Docker版本 docker --version docker-compose --version

代码编辑器：强烈推荐使用内置了AI能力的编辑器，如Cursor或VS Code + GitHub Copilot扩展。这将极大提升后续开发效率。

项目初始化：

# 创建项目根目录 mkdir my-status-page && cd my-status-page # 初始化后端项目 mkdir backend && cd backend npm init -y # 安装核心依赖 npm install express socket.io pg redis axios npm install --save-dev typescript @types/node @types/express ts-node nodemon # 初始化前端项目（在项目根目录） cd .. npx create-react-app frontend --template typescript cd frontend npm install socket.io-client zustand @mui/material @emotion/react @emotion/styled

2.3 基础设施服务（使用Docker Compose）

在项目根目录创建docker-compose.yml文件，一键启动数据库和缓存。

version: '3.8' services: postgres: image: postgres:15-alpine environment: POSTGRES_DB: statuspage POSTGRES_USER: admin POSTGRES_PASSWORD: securepassword ports: - "5432:5432" volumes: - postgres_data:/var/lib/postgresql/data redis: image: redis:7-alpine ports: - "6379:6379" volumes: - redis_data:/data volumes: postgres_data: redis_data:

运行docker-compose up -d启动服务。

3. 系统架构设计与核心模块拆解

在动手编码前，清晰的架构设计能避免后期重构。我们的系统主要分为以下几个核心模块。

3.1 后端架构

后端承担了数据聚合、状态计算、事件管理和实时推送的核心职责。

1. 数据采集器（Collector）：定时或通过Webhook从内部监控系统（如Prometheus、健康检查端点）拉取服务健康数据。
2. 状态计算引擎（Status Engine）：根据预定义的规则（如连续3次检查失败则为故障），计算每个服务的最终状态（正常、降级、故障、维护中）。
3. 事件管理器（Event Manager）：当服务状态发生变化时，自动创建或更新事件记录，并触发通知（如邮件、Slack）。
4. API 层（REST API）：提供管理接口（CRUD服务、事件）和只读接口（获取当前状态、历史事件）。
5. 实时推送层（WebSocket）：通过Socket.IO将状态变化实时推送给所有在线的前端客户端。
6. 数据存储：PostgreSQL存储元数据和历史，Redis存储当前状态和会话。

3.2 前端架构

前端负责向最终用户展示直观、实时的状态信息。

1. 状态仪表盘（Dashboard）：核心页面，以卡片或列表形式展示所有服务的当前状态，通常用颜色（绿、黄、红、蓝）区分。
2. 事件时间线（Incident Timeline）：按时间倒序列出所有历史事件，包括开始、更新、解决时间点。
3. 订阅管理（Subscription）：允许用户订阅特定服务的状态变更通知。
4. 管理后台（Admin）：供运维人员手动更新状态、发布公告。

3.3 数据流

1. 监控系统 -> (Webhook/API) -> 后端数据采集器。
2. 采集器 -> 状态计算引擎 -> 更新Redis中的当前状态。
3. 状态变化 -> 事件管理器 -> 写入PostgreSQL事件表，并触发Socket.IO广播。
4. Socket.IO -> 前端所有已连接客户端实时更新UI。
5. 前端通过REST API获取初始化数据和历史事件。

4. 核心功能实现：从零到一的代码实战

接下来，我们将分步骤实现最关键的后端状态计算与实时推送，以及前端状态展示。

4.1 后端实现：状态计算与实时API

步骤1：定义数据模型（TypeScript接口）在backend/src/types.ts中定义核心数据结构。

// 服务状态枚举 export enum ServiceStatus { OPERATIONAL = 'operational', DEGRADED = 'degraded', PARTIAL_OUTAGE = 'partial_outage', MAJOR_OUTAGE = 'major_outage', MAINTENANCE = 'maintenance', UNKNOWN = 'unknown' } // 服务定义 export interface Service { id: string; name: string; description?: string; checkUrl: string; // 健康检查端点 status: ServiceStatus; lastUpdated: Date; order: number; } // 状态事件（事故） export interface StatusEvent { id: string; serviceId: string; title: string; description: string; status: ServiceStatus; createdAt: Date; updatedAt: Date; resolvedAt?: Date; }

步骤2：实现状态计算引擎在backend/src/statusEngine.ts中，我们实现一个简单的基于规则的状态判断。

import axios from 'axios'; import { Service, ServiceStatus } from './types'; import { updateServiceStatusInRedis } from './redisClient'; import { createStatusEventInDB } from './db'; export class StatusEngine { private failureCountMap: Map<string, number> = new Map(); // 服务ID -> 连续失败次数 async checkService(service: Service): Promise<ServiceStatus> { try { const response = await axios.get(service.checkUrl, { timeout: 10000 }); // 假设HTTP 2xx为健康，其他为不健康。可根据实际需求扩展（检查响应体JSON） const isHealthy = response.status >= 200 && response.status < 300; if (isHealthy) { this.failureCountMap.set(service.id, 0); // 重置失败计数 return ServiceStatus.OPERATIONAL; } else { const failures = (this.failureCountMap.get(service.id) || 0) + 1; this.failureCountMap.set(service.id, failures); // 规则：1次失败->降级，连续3次失败->严重故障 if (failures >= 3) { return ServiceStatus.MAJOR_OUTAGE; } else if (failures >= 1) { return ServiceStatus.DEGRADED; } return ServiceStatus.OPERATIONAL; // 理论上不会走到这里 } } catch (error) { // 网络超时或请求异常 const failures = (this.failureCountMap.get(service.id) || 0) + 1; this.failureCountMap.set(service.id, failures); if (failures >= 3) { return ServiceStatus.MAJOR_OUTAGE; } else if (failures >= 1) { return ServiceStatus.DEGRADED; } return ServiceStatus.UNKNOWN; } } async checkAndUpdateAllServices(services: Service[]): Promise<void> { const updatePromises = services.map(async (service) => { const oldStatus = service.status; const newStatus = await this.checkService(service); service.status = newStatus; service.lastUpdated = new Date(); // 更新Redis缓存 await updateServiceStatusInRedis(service); // 如果状态发生变化，创建事件 if (oldStatus !== newStatus) { await createStatusEventInDB({ serviceId: service.id, title: `Status changed to ${newStatus}`, description: `Service ${service.name} status changed from ${oldStatus} to ${newStatus}`, status: newStatus, }); } }); await Promise.all(updatePromises); } }

步骤3：集成Socket.IO实现实时推送在backend/src/app.ts中设置Express和Socket.IO。

import express from 'express'; import http from 'http'; import { Server } from 'socket.io'; import cors from 'cors'; import { getAllServicesFromDB } from './db'; import { StatusEngine } from './statusEngine'; const app = express(); const server = http.createServer(app); const io = new Server(server, { cors: { origin: "http://localhost:3000", // 前端地址 methods: ["GET", "POST"] } }); app.use(cors()); app.use(express.json()); // 初始化状态引擎 const statusEngine = new StatusEngine(); // REST API：获取所有服务当前状态 app.get('/api/services', async (req, res) => { try { const services = await getAllServicesFromDB(); res.json(services); } catch (error) { res.status(500).json({ error: 'Failed to fetch services' }); } }); // Socket.IO 连接处理 io.on('connection', (socket) => { console.log('a user connected'); // 客户端连接时，立即发送一次全量状态 socket.emit('services:update', async () => { const services = await getAllServicesFromDB(); return services; }); socket.on('disconnect', () => { console.log('user disconnected'); }); }); // 定时任务：每60秒检查一次服务状态并广播更新 setInterval(async () => { const services = await getAllServicesFromDB(); await statusEngine.checkAndUpdateAllServices(services); // 从Redis获取最新的状态并广播给所有客户端 const updatedServices = await getAllServicesFromDB(); // 简化：重新从DB取，实际应从Redis取 io.emit('services:update', updatedServices); }, 60000); // 60秒 const PORT = process.env.PORT || 5000; server.listen(PORT, () => { console.log(`Status Page Backend listening on port ${PORT}`); });

4.2 前端实现：实时状态仪表盘

步骤1：创建全局状态管理（Zustand）在frontend/src/store/statusStore.ts中管理服务状态。

import { create } from 'zustand'; import { Service, ServiceStatus } from '../types'; interface StatusState { services: Service[]; lastUpdated: Date | null; setServices: (services: Service[]) => void; updateServiceStatus: (serviceId: string, status: ServiceStatus) => void; } export const useStatusStore = create<StatusState>((set) => ({ services: [], lastUpdated: null, setServices: (services) => set({ services, lastUpdated: new Date() }), updateServiceStatus: (serviceId, status) => set((state) => ({ services: state.services.map((s) => s.id === serviceId ? { ...s, status, lastUpdated: new Date() } : s ), })), }));

步骤2：建立Socket.IO连接与数据监听在frontend/src/services/socketService.ts中封装Socket.IO客户端逻辑。

import { io, Socket } from 'socket.io-client'; import { useStatusStore } from '../store/statusStore'; import { Service } from '../types'; const SOCKET_SERVER_URL = process.env.REACT_APP_SOCKET_SERVER || 'http://localhost:5000'; class SocketService { private socket: Socket | null = null; connect(): void { this.socket = io(SOCKET_SERVER_URL); const { setServices } = useStatusStore.getState(); this.socket.on('connect', () => { console.log('Connected to status server'); }); this.socket.on('services:update', (services: Service[]) => { console.log('Received services update:', services); setServices(services); }); this.socket.on('disconnect', () => { console.log('Disconnected from status server'); }); } disconnect(): void { if (this.socket) { this.socket.disconnect(); this.socket = null; } } } export const socketService = new SocketService();

步骤3：构建主仪表盘组件在frontend/src/components/StatusDashboard.tsx中实现核心UI。

import React, { useEffect } from 'react'; import { useStatusStore } from '../store/statusStore'; import { socketService } from '../services/socketService'; import { ServiceStatus } from '../types'; import { Box, Card, CardContent, Typography, Grid, Chip, CircularProgress } from '@mui/material'; const statusColorMap: Record<ServiceStatus, string> = { [ServiceStatus.OPERATIONAL]: '#4caf50', // 绿色 [ServiceStatus.DEGRADED]: '#ff9800', // 橙色 [ServiceStatus.PARTIAL_OUTAGE]: '#f44336', // 红色 [ServiceStatus.MAJOR_OUTAGE]: '#d32f2f', // 深红 [ServiceStatus.MAINTENANCE]: '#2196f3', // 蓝色 [ServiceStatus.UNKNOWN]: '#9e9e9e', // 灰色 }; const statusTextMap: Record<ServiceStatus, string> = { [ServiceStatus.OPERATIONAL]: '运行正常', [ServiceStatus.DEGRADED]: '服务降级', [ServiceStatus.PARTIAL_OUTAGE]: '部分中断', [ServiceStatus.MAJOR_OUTAGE]: '严重故障', [ServiceStatus.MAINTENANCE]: '维护中', [ServiceStatus.UNKNOWN]: '状态未知', }; export const StatusDashboard: React.FC = () => { const { services, lastUpdated } = useStatusStore(); useEffect(() => { // 组件挂载时连接Socket socketService.connect(); // 组件卸载时断开连接 return () => { socketService.disconnect(); }; }, []); if (services.length === 0) { return ( <Box display="flex" justifyContent="center" alignItems="center" minHeight="60vh"> <CircularProgress /> <Typography variant="body1" ml={2}>正在加载服务状态...</Typography> </Box> ); } return ( <Box sx={{ flexGrow: 1, p: 3 }}> <Typography variant="h4" gutterBottom> 系统服务状态 </Typography> <Typography variant="body2" color="text.secondary" gutterBottom> 最后更新: {lastUpdated ? lastUpdated.toLocaleTimeString() : '--'} </Typography> <Grid container spacing={3}> {services.map((service) => ( <Grid item xs={12} sm={6} md={4} key={service.id}> <Card> <CardContent> <Box display="flex" justifyContent="space-between" alignItems="center"> <Typography variant="h6" component="div"> {service.name} </Typography> <Chip label={statusTextMap[service.status]} size="small" sx={{ backgroundColor: statusColorMap[service.status], color: 'white', fontWeight: 'bold', }} /> </Box> <Typography variant="body2" color="text.secondary" sx={{ mt: 1.5 }}> {service.description || '暂无描述'} </Typography> <Typography variant="caption" display="block" sx={{ mt: 2, color: 'text.secondary' }}> 最后检查: {new Date(service.lastUpdated).toLocaleString()} </Typography> </CardContent> </Card> </Grid> ))} </Grid> </Box> ); };

步骤4：集成到主应用修改frontend/src/App.tsx。

import React from 'react'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import { StatusDashboard } from './components/StatusDashboard'; import { AppBar, Toolbar, Typography, Container } from '@mui/material'; const theme = createTheme({ palette: { mode: 'light', primary: { main: '#1976d2', }, }, }); function App() { return ( <ThemeProvider theme={theme}> <CssBaseline /> <AppBar position="static"> <Toolbar> <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> 自研服务状态页 </Typography> <Typography variant="body2"> 自主可控，实时透明 </Typography> </Toolbar> </AppBar> <Container maxWidth="lg" sx={{ mt: 4 }}> <StatusDashboard /> </Container> </ThemeProvider> ); } export default App;

4.3 运行与验证

1. 启动后端：在backend目录下，运行npm run dev(需在package.json中配置"dev": "nodemon src/app.ts")。
2. 启动前端：在frontend目录下，运行npm start。
3. 访问前端：打开浏览器访问http://localhost:3000。
4. 模拟服务状态变化：你可以修改backend/src/statusEngine.ts中的checkService方法，或者直接修改数据库/Redis中某个服务的状态，观察前端仪表盘是否实时更新。

5. AI辅助开发的关键实践与技巧

在整个开发过程中，AI工具的使用贯穿始终。以下是提升效率的具体技巧：

5.1 使用AI进行代码生成与补全

当需要创建一个新的API端点或React组件时，可以直接向AI描述需求。

• 示例提示（在Cursor中）：“请帮我生成一个Express.js的POST接口，用于创建新的状态事件，需要验证请求体，并将数据存入PostgreSQL。使用TypeScript。”
• 示例提示：“创建一个React函数组件，显示一个事件时间线列表，每条事件包含标题、状态标签和创建时间。使用Material-UI的List和ListItem组件。”

5.2 利用AI进行代码解释与重构

遇到不熟悉的库或复杂逻辑时，让AI解释。

• 示例提示：“这段Socket.IO的配置代码是什么意思？cors选项的作用是什么？”
• 示例提示：“我这段状态判断逻辑有点冗长，能否帮我重构得更简洁，并增加对‘维护中’状态的特殊处理？”

5.3 借助AI设计数据模型与API

在项目初期，可以让AI帮助设计数据库Schema和API路由。

• 示例提示：“设计一个PostgreSQL表结构，用于存储服务状态事件。字段包括id, service_id, title, description, status, created_at, updated_at, resolved_at。请给出创建表的SQL语句和对应的TypeScript接口。”

5.4 通过AI编写测试与文档

确保项目健壮性和可维护性。

• 示例提示：“为上面的StatusEngine类的checkService方法编写Jest单元测试，模拟axios请求成功和失败的情况。”
• 示例提示：“为GET /api/services这个API端点生成OpenAPI (Swagger) 文档片段。”

重要提示：AI生成的代码必须经过开发者的仔细审查、测试和理解，绝不能直接用于生产环境。它提供的是一个高质量的初稿和思路，最终的责任和决策权在开发者手中。

6. 部署、监控与成本分析

一个完整的系统离不开稳定的部署和运维。

6.1 生产环境部署

我们推荐使用容器化部署，以Docker镜像为基础。

1. 编写Dockerfile：为后端和前端分别编写Dockerfile，进行多阶段构建以减小镜像体积。
2. 使用Docker Compose for Production：创建docker-compose.prod.yml，配置PostgreSQL、Redis、后端服务、前端服务（或使用Nginx服务静态文件），并设置环境变量、网络和卷。
3. 选择部署平台：
   • 云服务商容器服务：如AWS ECS、Google Cloud Run、Azure Container Instances。它们管理简单，适合中小规模。
   • Kubernetes：如果已有K8s集群，部署其上是更灵活的选择。需要编写Deployment和Service配置文件。
   • 传统服务器：在自有服务器上通过docker-compose up -d运行。

6.2 系统监控与高可用

自研状态页本身也需要被监控，否则它挂了用户也无从知晓。

• 健康检查：为状态页后端和前端添加/health端点，供负载均衡器或监控系统检查。
• 多实例部署：后端服务应至少部署2个实例，通过负载均衡器分发流量，避免单点故障。
• 监控状态页自身：使用另一个独立的监控系统（或另一个实例）来监控状态页的服务健康。
• 日志与告警：集成结构化日志（如Winston + ELK），并设置关键错误告警（如数据库连接失败、Redis连接失败、连续多次状态检查失败）。

6.3 成本对比分析

这是自研方案最吸引人的部分。假设我们为一个小型到中型团队（监控50个服务）部署：

• SaaS方案：年费约 $65,000。
• 自研方案（云部署估算）：
  • 计算资源：2台中等规格云服务器/容器实例，约 $100/月 * 12 = $1,200/年。
  • 数据库与缓存：托管PostgreSQL与Redis服务，约 $50/月 * 12 = $600/年。
  • 对象存储与CDN（前端静态资源）：约 $10/月 * 12 = $120/年。
  • 年度总基础设施成本：约$1,920。
  • 开发成本：按2名中级开发者投入3周计算（含学习、开发、测试），一次性成本约 $15,000 - $25,000（取决于地区薪资）。

结论：即使算上一次性开发投入，自研方案在第一年的成本就可能与SaaS方案打平甚至更低。从第二年开始，每年将节省超过$63,000的纯订阅费用。更重要的是，我们获得了完全的掌控权、深度定制能力和团队的技术成长。

7. 常见问题与排查思路

在开发和运行过程中，你可能会遇到以下典型问题。

8. 最佳实践与进阶优化建议

将系统投入生产环境，以下实践能确保其稳定、可靠和易维护。

8.1 工程化与代码质量

• 配置管理：使用dotenv或类似库管理环境变量，区分开发、测试、生产环境配置。切勿将密码、密钥硬编码在代码中。
• 错误处理：在后端实现全局错误处理中间件，统一捕获和记录未处理的异常，并向客户端返回友好的错误信息，避免泄露堆栈信息。
• 日志记录：采用结构化日志（JSON格式），并记录关键操作（状态变化、事件创建、用户订阅）和系统错误，便于后续使用ELK或Loki进行日志分析。
• 单元与集成测试：为核心业务逻辑（如StatusEngine）编写单元测试。为API端点编写集成测试，确保数据流正确。

8.2 性能与可扩展性

• 数据库优化：为services和status_events表的常用查询字段（如service_id,created_at）建立索引。定期归档或清理历史事件表。
• 缓存策略：服务当前状态应主要从Redis读取，减轻数据库压力。可以设置合理的TTL（生存时间）。
• 连接池：对PostgreSQL和Redis客户端使用连接池，避免频繁创建销毁连接的开销。
• 水平扩展：后端服务应设计为无状态，方便通过增加实例进行水平扩展。Socket.IO需要配合Redis适配器 (@socket.io/redis-adapter) 来实现多实例间的消息广播。

8.3 安全与权限

• API认证与授权：管理接口（如创建、更新服务）必须添加认证（如JWT）。可以考虑集成公司的统一SSO。
• 输入验证与消毒：对所有API输入进行严格的验证和消毒，防止SQL注入和XSS攻击。
• HTTPS：生产环境必须使用HTTPS，前端通过WSS连接WebSocket。
• 速率限制：对公共API接口实施速率限制，防止滥用。

8.4 功能增强方向

• 多租户支持：如果需要为不同部门或产品线提供独立状态页，可以引入“租户”概念。
• 更丰富的通知渠道：集成企业微信、钉钉、电话、短信等通知方式。
• 状态依赖关系：定义服务间的依赖，当底层服务故障时，自动标记上游服务为“受影响”状态。
• 自定义状态页面：允许用户通过拖拽等方式自定义仪表盘布局。
• SLA报告：自动计算并展示各服务的月度/季度正常运行时间百分比（SLA）。

通过以上步骤，我们不仅成功构建了一个替代昂贵SaaS的状态页系统，更关键的是，我们建立了一套自主可控、可深度定制、与内部工具链无缝集成的运维能力。AI工具的辅助让这个过程的效率提升了数倍，但核心的系统设计、架构决策和代码质量把控，依然依赖于开发者的专业能力。希望这份详尽的指南能为你开启自研运维工具之路提供扎实的参考。