最近做了一个 简单的 SSL 证书监控网站，想和大家分享一些开发过程中的经验。项目地址放在最后了，先聊聊技术实现。
之前遇到过几次 SSL 证书过期导致服务中断的情况，每次都是用户发现后才去处理，很被动。市面上有一些监控工具，但要么太重，要么功能不够用，就想着自己做一个。
Next.js 16 + shadcn/ui + TypeScript
选 Next.js 是因为：
shadcn/ui 是基于 Radix UI 的组件库，优点是：
Drizzle ORM + PostgreSQL
之前用过 Prisma ，这次试了 Drizzle ，感觉更轻量：
better-auth 认证系统
这个是最近发现的，比 NextAuth 更新：
一开始以为 SSL 证书检查很简单，就是获取证书信息。后来发现证书链验证很复杂：
解决方案是写了一个完整的证书链提取和验证模块，包括：
为了让用户快速了解证书的安全状况，做了一个 A+ 到 F 的评分系统。核心逻辑：
四个维度加权评分
- 证书有效性：30%
- 链完整性：25%
- 加密强度：25%
- 协议版本：20%
如果有严重问题（如证书过期），评级上限为 C
难点在于：
最终采用了分层评分，每个维度独立计算，再加权汇总。
支持 6 种语言时遇到了 React Hydration 错误：
// ❌ 错误做法
// app/[locale]/layout.tsx 中包含 <html> 标签
// 与根 layout 冲突
// ✅ 正确做法
// 根 layout 只有一个 <html> 标签
// 使用客户端组件动态更新 lang 属性
为了提升认证性能，加了 Redis 缓存。但需要考虑：
解决方案：
最初 Lighthouse 跑分只有 60 多分，主要问题：
JavaScript Bundle 太大
图片优化
字体加载
关键渲染路径
第三方脚本优化
最终优化后：
用树形结构展示证书链，支持展开/折叠，不同状态用颜色编码：
自动检测不安全的加密算法：
目前支持邮件、Slack 、Discord 、Telegram 、飞书五种通知渠道，用户可以自由组合。
功能：
欢迎试用和反馈，有什么问题可以一起交流。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。