我建立了一個在 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中文網其他相關文章！