简介

这里先介绍一下-Web Archive，它和最著名的服务“Wayback Machine”（时光机）类似，能够抓取和存档网页，并允许用户在过去的不同时间点查看这些网页的快照。这里附上项目开源地址先

这是作者对该项目的介绍：

Web Archive 是一个网页归档工具，包含以下几个部分：

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

服务端基于 Cloudflare Worker 的全套服务，包含 D1 数据库、R2 存储桶

预览图

这里附上一张部署完成后的图片：
图片预览

整体效果还是不错的，接下来将怎么部署吧

部署教程

以下部署内容参考官方部署文档，可以在github项目地址中找到
使用该教程需要电脑本地安装node环境

1. 下载代码

在 项目的release 页面下载最新的 service.zip，解压后在根目录执行后续操作（可以cd到该目录或者直接在文件管理器上方地址栏输入cmd后回车）。

2. 登录Cloudflare

在该目录的cmd下运行如下命令

ebnf
1
npx wrangler login

会返回一个登陆链接地址，将他从cmd复制出来后再浏览器打开，然后登陆即可

3. 创建 r2 存储桶

运行如下命令（或者在cloudflare-r2储存桶相关位置手动创建也行，名字叫‘web-archive’的储存桶即可）

armasm
1
npx wrangler r2 bucket create web-archive

成功会输出如下内容：

pgsql
1
2
3
4
5
 ⛅️ 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.

4. 创建 d1 数据库

运行如下命令（同样的，此步骤也可以在cloudflare数据库位置手动创建）

gauss
1
2
# 创建数据库
npx wrangler d1 create web-archive

执行成功会输出如下内容：

asciidoc
1
2
3
4
5
6
7
8
9
10
 ⛅️ 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:
运行如下命令

ada
1
npx wrangler d1 migrations apply web-archive --remote

执行成功会输出如下内容：

applescript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
🌀 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               │
└────────────────────────┴───────────┴──────────────┴────────────────────┘

5. 部署服务

运行如下命令

jboss-cli
1
2
# 部署服务
npx wrangler pages deploy

执行成功会输出如下内容：

livecodeserver
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

如何更新

命令部署时，需要下载最新的代码并手动更新。

后续使用

在部署成功之后前往cloudflare找到该项目后绑定域名即可访问（有魔法直接用项目链接也可以访问，没有域名的可以参考本站免费域名注册一个）

网页汉化

关于部署后的网页是英文的界面，这个项目作者没有提供语言切换相关功能（也可能是我没找到），好在这个语言影响的知识前端部分，所以汉化显得比较简单，只需要更改service\src\static\index.js文件中和网页上对应的内容为中文即可，例如网页上folders字样，只需要在文件中搜索该字样然后改为中文即可，注意不是所有字样都需要修改，部分字样修改会导致无法运行，在不确定的情况下建议修改一下部署测试一下，博主在很久之前部署的，所以源文件不见了，不然就放这里了，实在不行英文界面也问题不大。
该工具使用需要配合浏览器插件使用，这里附上插件地址：
google插件商店
无法访问的也可以看原作者的项目主页release，里面有插件安装包，到这里就可以开始快乐使用啦