我构建了一个在 Cloudflare 上运行的全栈 Web 存档工具

项目地址：https://github.com/ray-d-song/web-archive

为什么构建这个工具

我长期以来一直是 ArchiveBox 的忠实用户。 ArchiveBox是一个非常好的网络归档工具，但是它需要自托管，并且对服务器要求很高（需要无头浏览器）。我之前用过树莓派，性能不好

而像x、Medium这样需要登录的网站，ArchiveBox需要手动配置token或者cookie，比较麻烦。

于是我想，能不能有一个不需要自托管、不需要无头浏览器、对服务器没有要求、可以跨平台的网络归档工具呢？然后我就可以随时随地在任何设备上访问我的存档页面。

为什么选择 Cloudflare

Cloudflare 的 Workers 服务非常强大且免费，拥有大量的 D1 数据库和 R2 存储桶，非常适合构建这个工具。

更重要的是，Cloudflare生态系统完整，支持一键部署和数据迁移。也可以使用Cloudflare的全球CDN服务。

这个工具能做什么

• [x] 文件夹分类
• [x] 页面预览图片
• [x] 标题关键字搜索
• [x] 展示、分享您拍摄的页面
• [x] 移动支持
• [x] 标签分类系统
• [x] 阅读模式

它是如何运作的

网络存档由以下部分组成：

• 浏览器扩展：将页面保存为网页快照并上传到服务器。
• 服务器：接收浏览器扩展上传的快照和元数据，并将其存储在数据库和存储桶中。
• Web客户端：查询快照并显示。

我使用SingleFile的开源代码将页面保存为单个html文件（甚至包括图像和视频）。

服务器完全基于Cloudflare的Workers服务，D1数据库用于存储元数据，R2存储桶用于存储快照。

虽然接口数量不小，但我并没有使用ORM，实际上我尝试过prisma和drizzle，因为它们给部署带来了很大的麻烦，所以最终没有使用。

Web客户端使用React、Vite、TailwindCSS和shadcn/ui构建，打包后的大小小得惊人，只有1.5MB。打包后的产品会嵌入到服务器的assets文件夹中，所以部署服务器时不需要单独部署。

局限性

我真的很喜欢 Cloudflare 的免费服务，但有一些限制。

• 单个请求的CPU计算时间不能超过10毫秒，否则将被强制终止。 （我惊讶地发现付费账号是30秒？）
• 内存使用量不能超过256MB，否则将被强制终止。

这些限制在一定程度上影响了网站的建设，比如爬取时的ssr或者dom解析。

但是，无论怎么说，谢谢你，Cloudflare！

以上是我构建了一个在 Cloudflare 上运行的全栈 Web 存档工具的详细内容。更多信息请关注PHP中文网其他相关文章！