最近做了一个 简单的 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、飞书五种通知渠道，用户可以自由组合。
项目地址
https://guardssl.info
功能：
- 免费 SSL 证书检查
- 域名监控和过期提醒
- 安全评分和改进建议
- 多语言支持 （中英日法西）
欢迎试用和反馈，有什么问题可以一起交流。
文章来源：w2solo
