返回博客

全站托管在 Cloudflare:个人网站的架构设计与边缘运维实践

CloudflareWorkersNext.js

封面图片

核心结论

kimura512.dev 全站托管于 Cloudflare 之上,将静态编译产物与无服务器边缘计算全部收敛至 Workers。免去了自行维护虚拟主机的繁琐负担,日常更新被高度精简为一条命令。Next.js 应用借助 vinext 稳健运行在边缘节点,内容数据则作为纯 TypeScript 资产直接纳入版本库管理。

1. 一键化发布流水线

生产发布严格遵循 pnpm run build 后接 wrangler deploy 的流水线。主域名严格绑定生产环境,预览用 Worker 与生产 DNS 保持隔离。发布前仔细核对环境目标,能彻底避免配置覆盖引发的事故。

2. 静态图片资产规范化

博客头图统一存放于 public/blog/ 目录下,并通过 sharp 进行尺寸与质量归一化。统一的宽高比杜绝了文章列表卡片的视觉抖动,摆脱外部图床依赖亦彻底规避了外链失效风险。

3. 边缘安全与零凭据暴露

依托 Cloudflare WAF 与强制 HTTPS 护航,敏感密钥完全托管在 Workers 加密 Secret 中。非公开的后台 API 不在首页暴露任何入口,将攻击面降至最低。

4. 边缘缓存与内容生效确认

文章发布后,通过浏览器隐身模式核实列表总数与正文,确认 CDN 缓存已被正确刷新。代码仓库就是全站唯一的确定性源头。

5. 性能与成本控制

高开销的三维渲染场景仅保留在首页与介绍页,博客阅读页面则全面追求轻量化与极速加载,显著降低移动端跳出率。

6. 异常排查与日志沉淀

鉴于边缘实时日志具备短期易失性,排查过程与修复结论均以技术备忘或博客形式落地归档,为后续故障诊断提供可靠依据。

7. 预览环境与正式环境隔离

预览 Worker 拥有独立项目名称,生产密钥一律通过命令行加密录入,杜绝明文流转。

8. 子域名与主域名权责分离

其他衍生项目作为独立链接管理,主站 apex 域名全力保障核心展示与文章访问,精简运维负担。

总结

Workers 负责全球边缘分发,Git 负责可追溯的内容沉淀,TypeScript 负责严谨的数据契约。这套三位一体的分工体系是个人开发者长期稳健运营的最优解。

常见问题

Q. 为何选用 Workers 而非传统云主机?
它在极低维护成本的前提下,完美整合了全球边缘 CDN 分发与动态 API 运行能力。

Q. 是否需要引入 R2 对象存储?
文章图片直接随前端项目分发,R2 仅作为独立商业产品的持久化存储。