Cloudflare上で動作するフルスタックのWebアーカイブツールを構築しました

プロジェクトアドレス: https://github.com/ray-d-song/web-archive

このツールを構築する理由

私は長い間、ArchiveBox の忠実なユーザーです。 ArchiveBox は非常に優れた Web アーカイブ ツールですが、セルフホスティングが必要で、サーバー要件が高くなります (ヘッドレス ブラウザーが必要)。以前Raspberry Piを使用しましたが、パフォーマンスが良くありませんでした。

また、ログインが必要な x や Medium のような Web サイトの場合、ArchiveBox は手動でトークンや Cookie を設定する必要があり、面倒です。

そこで私は、セルフホスティングを必要とせず、ヘッドレスブラウザを必要とせず、サーバーの要件も必要とせず、クロスプラットフォームに対応できる Web アーカイブ ツールはないだろうかと考えました。そうすれば、いつでも、どこでも、どのデバイスからでも、アーカイブしたページにアクセスできるようになります。

Cloudflareを選ぶ理由

Cloudflare の Workers サービスは非常に強力かつ無料で、豊富な D1 データベースと R2 ストレージ バケットを備えており、このツールの構築に非常に適しています。

さらに重要なのは、Cloudflare のエコシステムが完成しており、ワンクリックの導入とデータ移行をサポートしていることです。 CloudflareのグローバルCDNサービスも利用可能です。

このツールでできること

• [x] フォルダー分類
• [x] ページのプレビュー画像
• [x] タイトルキーワード検索
• [x] ショーケース、キャプチャしたページを共有します
• [x] モバイルサポート
• [x] タグ分類システム
• [x] 読み取りモード

仕組み

ウェブアーカイブは次の部分で構成されます:

• ブラウザ拡張機能: ページを Web ページのスナップショットとして保存し、サーバーにアップロードします。
• サーバー: ブラウザ拡張機能によってアップロードされたスナップショットとメタデータを受信し、データベースとストレージ バケットに保存します。
• Web クライアント: スナップショットをクエリして表示します。

SingleFile のオープンソース コードを使用して、ページを単一の HTML ファイルとして保存しました (画像やビデオも含めます)。

サーバーは完全にCloudflareのWorkersサービスに基づいており、メタデータを保存するためのD1データベースとスナップショットを保存するためのR2ストレージバケットを備えています。

インターフェースの数は少なくありませんが、ORM は使用しませんでした。実際に prisma と drizzle を試しましたが、デプロイメントに非常に手間がかかるため、最終的には使用されませんでした。

Web クライアントは React、Vite、TailwindCSS、shadcn/ui で構築されており、パッケージ化されたサイズはわずか 1.5MB と驚くほど小さいです。パッケージ化された製品はサーバーのアセットフォルダーに埋め込まれるため、サーバーのデプロイ時に別途デプロイする必要はありません。

制限事項

Cloudflare の無料サービスはとても気に入っていますが、いくつか制限があります。

• 単一リクエストの CPU 計算時間は 10 ミリ秒を超えることはできません。10 ミリ秒を超えると強制的に終了されます。 (有料アカウントは30秒だったので驚きました?)
• メモリ使用量は 256MB を超えることはできません。超えない場合は強制終了されます。

これらの制限は、クロール中の ssr や dom の解析など、Web サイトの構築にある程度の影響を与えています。

しかし、どのように言われても、ありがとう、Cloudflare!

以上がCloudflare上で動作するフルスタックのWebアーカイブツールを構築しましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。