最近做了一个 简单的 SSL 证书监控网站，想和大家分享一些开发过程中的经验。项目地址放在最后了，先聊聊技术实现。
起因
之前遇到过几次 SSL 证书过期导致服务中断的情况，每次都是用户发现后才去处理，很被动。市面上有一些监控工具，但要么太重，要么功能不够用，就想着自己做一个。
技术选型
Next.js 16 + shadcn/ui + TypeScript
选 Next.js 是因为：
App Router 的开发体验很好，路由和文件结构对应
Server Components 减少了客户端 JavaScript
内置的图片优化、字体加载等开箱即用
shadcn/ui 是基于 Radix UI 的组件库，优点是：
组件复制到项目中，完全可控
使用 Tailwind CSS，样式定制方便
Accessibility 做得很好
Drizzle ORM + PostgreSQL
之前用过 Prisma，这次试了 Drizzle，感觉更轻量：
类型生成更快
SQL 操作更直观
查询性能更好
better-auth 认证系统
这个是最近发现的，比 NextAuth 更新：
TypeScript 支持更好
API 设计更简洁
支持邮箱密码 + 多种 OAuth（GitHub、Google）
遇到的一些坑
1. 证书链验证的复杂性
一开始以为 SSL 证书检查很简单，就是获取证书信息。后来发现证书链验证很复杂：
需要验证每个证书的签名
检查证书链的完整性
判断根证书是否可信（浏览器内置）
处理中间证书缺失的情况
解决方案是写了一个完整的证书链提取和验证模块，包括：
从 TLS 连接提取完整证书链
验证每个证书的签名和有效期
检测链断裂和不完整的情况
树形结构可视化展示
2. 安全评分系统的设计
为了让用户快速了解证书的安全状况，做了一个 A+ 到 F 的评分系统。核心逻辑：
四个维度加权评分
- 证书有效性：30% - 链完整性：25% - 加密强度：25% - 协议版本：20%
如果有严重问题（如证书过期），评级上限为 C
难点在于：
权重分配如何合理
扣分规则如何设计
如何给出有价值的改进建议
最终采用了分层评分，每个维度独立计算，再加权汇总。
3. 多语言路由的 Hydration 问题
支持 6 种语言时遇到了 React Hydration 错误：
// ❌ 错误做法 // app/[locale]/layout.tsx 中包含 <html> 标签 // 与根 layout 冲突 // ✅ 正确做法 // 根 layout 只有一个 <html> 标签 // 使用客户端组件动态更新 lang 属性 4. Redis 缓存的降级处理
为了提升认证性能，加了 Redis 缓存。但需要考虑：
Redis 不可用时怎么办？
缓存和数据库数据不一致怎么办？
解决方案：
Redis 连接失败自动降级到数据库
数据库更新时主动失效缓存
提供缓存统计 API 监控命中率
5. PageSpeed 优化
最初 Lighthouse 跑分只有 60 多分，主要问题：
JavaScript Bundle 太大
使用 Next.js 的动态导入（dynamic import）按需加载组件
移除未使用的依赖
启用 Tree Shaking
图片优化
使用 Next.js Image 组件自动优化
添加合适的 placeholder
启用图片懒加载
字体加载
使用 next/font 自动优化字体
减少字体变体数量
使用 font-display: swap 避免布局偏移
关键渲染路径
识别关键 CSS，内联到 HTML
延迟加载非关键 JavaScript
优化第三方脚本加载顺序
第三方脚本优化
Google Analytics、Crisp Chat 等延迟加载
使用 defer/async 属性
考虑使用 Web Workers 处理耗时任务
最终优化后：
Performance: 60 → 95
Accessibility: 85 → 98
Best Practices: 90 → 100
SEO: 100
一些技术亮点
证书链可视化
用树形结构展示证书链，支持展开 / 折叠，不同状态用颜色编码：
绿色：有效
黄色：即将过期
红色：已过期
安全问题检测
自动检测不安全的加密算法：
MD5、SHA-1 签名算法
RC4、DES 等弱加密
TLS 1.0/1.1 等旧协议
多渠道通知
目前支持邮件、Slack、Discord、Telegram、飞书五种通知渠道，用户可以自由组合。
项目地址
功能：
免费 SSL 证书检查
域名监控和过期提醒
安全评分和改进建议
多语言支持（中英日法西）
欢迎试用和反馈，有什么问题可以一起交流。
评论区(暂无评论)