Heim > Web-Frontend > js-Tutorial > Ich habe ein Full-Stack-Webarchiv-Tool erstellt, das auf Cloudflare läuft

Ich habe ein Full-Stack-Webarchiv-Tool erstellt, das auf Cloudflare läuft

Susan Sarandon
Freigeben: 2024-11-12 04:39:01
Original
381 Leute haben es durchsucht

I built a full-stack web archive tool running on Cloudflare

Projektadresse: https://github.com/ray-d-song/web-archive

Warum dieses Tool bauen?

Ich bin schon lange ein treuer Benutzer von ArchiveBox. ArchiveBox ist ein sehr gutes Webarchivierungstool, erfordert jedoch Selbsthosting und hohe Serveranforderungen (erfordert einen Headless-Browser). Ich habe vorher einen Raspberry Pi verwendet und die Leistung war nicht gut.

Und für Websites wie x und Medium, die eine Anmeldung erfordern, muss ArchiveBox Token oder Cookies manuell konfigurieren, was mühsam ist.

Also dachte ich: Kann es ein Webarchivierungstool geben, das kein Selbsthosting erfordert, keinen Headless-Browser erfordert, keine Anforderungen an einen Server stellt und plattformübergreifend einsetzbar ist? Dann kann ich überall, jederzeit und auf jedem Gerät auf meine archivierten Seiten zugreifen.

Warum Cloudflare

Der Workers-Dienst von Cloudflare ist sehr leistungsstark und kostenlos, mit zahlreichen D1-Datenbanken und R2-Speicher-Buckets, was sich sehr gut zum Erstellen dieses Tools eignet.

Noch wichtiger ist, dass das Ökosystem von Cloudflare vollständig ist und die Bereitstellung und Datenmigration mit einem Klick unterstützt. Auch der globale CDN-Dienst von Cloudflare kann genutzt werden.

Was kann dieses Tool?

  • [x] Ordnerklassifizierung
  • [x] Seitenvorschaubild
  • [x] Titel-Schlüsselwortsuche
  • [x] Präsentieren Sie, teilen Sie die von Ihnen erfassten Seiten
  • [x] Mobiler Support
  • [x] Tag-Klassifizierungssystem
  • [x] Lesemodus

Wie es funktioniert

Webarchiv besteht aus folgenden Teilen:

  • Browsererweiterung: Speichern Sie die Seite als Webseiten-Snapshot und laden Sie sie auf den Server hoch.
  • Server: Empfangen Sie den von der Browsererweiterung hochgeladenen Snapshot und die Metadaten und speichern Sie sie in der Datenbank und im Speicher-Bucket.
  • Webclient: Fragen Sie den Snapshot ab und zeigen Sie ihn an.

Ich habe den Open-Source-Code von SingleFile verwendet, um die Seite als einzelne HTML-Datei zu speichern (sogar einschließlich Bildern und Videos).

Der Server basiert vollständig auf dem Workers-Dienst von Cloudflare, mit D1-Datenbank zum Speichern von Metadaten und R2-Speicher-Bucket zum Speichern von Snapshots.

Obwohl die Anzahl der Schnittstellen nicht gering ist, habe ich kein ORM verwendet, sondern Prisma und Drizzle ausprobiert, da diese bei der Bereitstellung große Probleme verursachten und daher am Ende nicht verwendet wurden.

Der Webclient wurde mit React, Vite, TailwindCSS und shadcn/ui erstellt und die Paketgröße ist erstaunlich klein, nur 1,5 MB. Das verpackte Produkt wird in den Assets-Ordner des Servers eingebettet, sodass es bei der Bereitstellung des Servers nicht separat bereitgestellt werden muss.

Einschränkungen

Ich mag die kostenlosen Dienste von Cloudflare wirklich, aber es gibt einige Einschränkungen.

  • Die CPU-Berechnungszeit einer einzelnen Anfrage darf 10 Millisekunden nicht überschreiten, andernfalls wird sie zwangsweise beendet. (Ich war überrascht, dass das kostenpflichtige Konto 30 Sekunden lang ist?)
  • Die Speichernutzung darf 256 MB nicht überschreiten, andernfalls wird sie zwangsweise beendet.

Diese Einschränkungen haben sich in gewissem Maße auf die Erstellung der Website ausgewirkt, z. B. auf das SSR- oder Dom-Parsing während des Crawlings.

Aber egal wie es gesagt wird: Danke, Cloudflare!

Das obige ist der detaillierte Inhalt vonIch habe ein Full-Stack-Webarchiv-Tool erstellt, das auf Cloudflare läuft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage