Maison > interface Web > js tutoriel > J'ai construit un outil d'archivage Web complet fonctionnant sur Cloudflare

J'ai construit un outil d'archivage Web complet fonctionnant sur Cloudflare

Susan Sarandon
Libérer: 2024-11-12 04:39:01
original
373 Les gens l'ont consulté

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

Adresse du projet : https://github.com/ray-d-song/web-archive

Pourquoi créer cet outil

Je suis un utilisateur fidèle d'ArchiveBox depuis longtemps. ArchiveBox est un très bon outil d'archivage Web, mais il nécessite un auto-hébergement et des exigences de serveur élevées (nécessite un navigateur sans tête). J'ai déjà utilisé un Raspberry Pi et les performances n'étaient pas bonnes.

Et pour les sites Web comme x et Medium, qui nécessitent une connexion, ArchiveBox doit configurer manuellement les jetons ou les cookies, ce qui est gênant.

Alors j'ai pensé : peut-il exister un outil d'archivage Web qui ne nécessite pas d'auto-hébergement, ne nécessite pas de navigateur sans tête, n'a aucune exigence de serveur et peut être multiplateforme ? Je peux ensuite accéder à mes pages archivées n'importe où, n'importe quand et sur n'importe quel appareil.

Pourquoi Cloudflare

Le service Workers de Cloudflare est très puissant et gratuit, avec de nombreuses bases de données D1 et des compartiments de stockage R2, ce qui est très approprié pour créer cet outil.

Plus important encore, l'écosystème de Cloudflare est complet et prend en charge le déploiement et la migration des données en un clic. Le service CDN mondial de Cloudflare peut également être utilisé.

Que peut faire cet outil

  • [x] Classement des dossiers
  • [x] Image d'aperçu de la page
  • [x] Recherche par mot-clé de titre
  • [x] Présentez, partagez les pages que vous avez capturées
  • [x] Assistance mobile
  • [x] Système de classification des balises
  • [x] Mode lecture

Comment ça marche

web-archive est composé des parties suivantes :

  • Extension de navigateur : enregistrez la page en tant qu'instantané de page Web et téléchargez-la sur le serveur.
  • Serveur : recevez l'instantané et les métadonnées téléchargées par l'extension du navigateur et stockez-les dans la base de données et le compartiment de stockage.
  • Client Web : interrogez l'instantané et affichez-le.

J'ai utilisé le code open source de SingleFile pour enregistrer la page sous la forme d'un seul fichier HTML (incluant même des images et des vidéos).

Le serveur est entièrement basé sur le service Workers de Cloudflare, avec une base de données D1 pour stocker les métadonnées et un compartiment de stockage R2 pour stocker les instantanés.

Bien que le nombre d'interfaces ne soit pas petit, je n'ai pas utilisé ORM, en fait j'ai essayé prisma et drizzle, car ils ont causé beaucoup de problèmes de déploiement, donc ils n'ont finalement pas été utilisés.

Le client Web est construit avec React, Vite, TailwindCSS et shadcn/ui, et la taille du package est étonnamment petite, seulement 1,5 Mo. Le produit packagé sera intégré dans le dossier des actifs du serveur, il n'a donc pas besoin d'être déployé séparément lors du déploiement du serveur.

Limites

J'aime beaucoup les services gratuits de Cloudflare, mais il y a certaines limitations.

  • Le temps de calcul CPU d'une seule requête ne peut pas dépasser 10 millisecondes, sinon elle sera terminée de force. (J'ai été surpris de constater que le compte payant dure 30 secondes ?)
  • L'utilisation de la mémoire ne peut pas dépasser 256 Mo, sinon elle sera interrompue de force.

Ces limitations ont affecté la construction du site Web dans une certaine mesure, comme l'analyse ssr ou dom lors de l'exploration.

Cependant, peu importe comment cela est dit, merci, Cloudflare !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal