基於 Cloudflare 的免費網頁歸檔和分享工具

分類：科技
瀏覽數：1796

Web Archive 是一個網頁歸檔工具，包含以下幾個部分：

  • 瀏覽器插件：將網頁保存為網頁快照，並上傳到服務端。
  • 服務端： 接收瀏覽器插件上傳的快照，並存儲在資料庫和存儲桶中。
  • web 客戶端： 查詢快照並展示。

服務端基於 Cloudflare Worker 的全套服務，包含 D1 資料庫、R2 存儲桶。

Why

大多數網頁歸檔工具，比如 archivebox，都是基於伺服器調用無頭瀏覽器抓取的方式進行歸檔。
這種做法的弊端是 知乎、medium 這種需要登錄的網站操作很麻煩，需要配置 token 或 cookie。
同時無頭瀏覽器對伺服器的要求也比較高，大多數都是 nas 用戶在使用。
web-archive 是一個完全免費、無門檻的方案，而且 Cloudflare 可以非常方便的將數據遷移回本地轉為 self-host。

github：https://github.com/Ray-D-Song/web-archive

feat & roadmap

  • 文件夾分類
  • 頁面預覽圖
  • 標題關鍵字查詢
  • 櫥窗，可以分享自己抓取的頁面
  • 移動端適配
  • tag 分類系統
  • 將頁面保存為 markdown

部署指南

Github Actions 一鍵部署(推薦)

點擊上面的按鈕，按照 Cloudflare 的指引完成部署。

Important

R2 存儲桶是需要在 Cloudflare 面板上手動開通的功能，請開通後再進行部署或者失敗後 re-run Github Actions。 僅需開通 R2 功能，不需要創建存儲桶，存儲桶會在部署時自動創建。

Note

創建令牌時，直接選擇 編輯 Cloudflare Workers 模版，再手動添加 D1 編輯 許可權。

部署後請儘快登錄，首個登錄的用戶會被設置為管理員。

命令部署

要求本地安裝了 node 環境。
命令部署時更新比較麻煩, 推薦實用 Github actions 部署。

0. 下載代碼

在 release 頁面下載最新的 service.zip，解壓後在根目錄執行後續操作。

1. 登錄

npx wrangler login

2. 創建 r2 存儲桶

npx wrangler r2 bucket create web-archive

成功輸出：

 ⛅️ wrangler 3.78.10 (update available 3.80.4)
--------------------------------------------------------

Creating bucket web-archive with default storage class set to Standard.
Created bucket web-archive with default storage class set to Standard.

3. 創建 d1 資料庫

# 創建資料庫
npx wrangler d1 create web-archive

執行輸出：

 ⛅️ wrangler 3.78.10 (update available 3.80.4)
--------------------------------------------------------

✅ Successfully created DB 'web-archive' in region UNKNOWN
Created your new D1 database.

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "web-archive"
database_id = "xxxx-xxxx-xxxx-xxxx-xxxx"

拷貝最後一行，替換 wrangler.toml 文件中 database_id 的值。

然後執行初始化 sql:

npx wrangler d1 execute web-archive --remote --file=./init.sql

成功輸出：

 Executing on remote database web-archive (7fd5a5ce-79e7-4519-a5fb-2f9a3af71064):
 To execute on your local development database, remove the --remote flag from your wrangler command.
Note: if the execution fails to complete, your DB will return to its original state and you can safely retry.
├  Uploading 7fd5a5ce-79e7-4519-a5fb-2f9a3af71064.0a40ff4fc67b5bdf.sql
│  Uploading complete.
│
 Starting import...
 Processed 9 queries.
 Executed 9 queries in 0.00 seconds (13 rows read, 13 rows written)
   Database is currently at bookmark 00000001-00000005-00004e2b-c977a6f2726e175274a1c75055c23607.
┌────────────────────────┬───────────┬──────────────┬────────────────────┐
│ Total queries executed │ Rows read │ Rows written │ Database size (MB) │
├────────────────────────┼───────────┼──────────────┼────────────────────┤
│ 9                      │ 13        │ 13           │ 0.04               │
└────────────────────────┴───────────┴──────────────┴────────────────────┘

4. 修改 BEARER_TOKEN

BEARER_TOKEN 是訪問 web-archive 的憑證，相當於密碼，修改 wrangler.toml 文件中 BEARER_TOKEN 的值。

5. 部署服務

# 部署服務
npx wrangler pages deploy

成功輸出：

The project you specified does not exist: "web-archive". Would you like to create it?
❯ Create a new project
✔ Enter the production branch name: … dev
✨ Successfully created the 'web-archive' project.
▲ [WARNING] Warning: Your working directory is a git repo and has uncommitted changes

  To silence this warning, pass in --commit-dirty=true

  Uploading... (3/3)

✨ Success! Uploaded 3 files (3.29 sec)

✨ Compiled Worker successfully
✨ Uploading Worker bundle
✨ Uploading _routes.json
 Deploying...
✨ Deployment complete! Take a peek over at https://web-archive-xxxx.pages.dev

使用指南

在 release 頁面下載最新的 extension.zip，解壓後安裝到瀏覽器中。
首次安裝後，需要輸入 API 地址和密鑰，API 地址是服務地址，密鑰就是首個用戶（管理員）的密碼。

在文件夾頁面，你可以設置某個頁面是否在櫥窗中展示。
櫥窗地址：/#/showcase/folder
科技分類資訊推薦
科技分類視頻推薦
↑