Gestion des formulaires pour les sites Jamstack à l'aide de travailleurs CloudFlare

Ce didacticiel montre la création d'un service de gestion de formulaire pour votre site Web Jamstack ou votre application à une seule page (SPA) à l'aide de travailleurs CloudFlare, une plate-forme sans serveur offrant une vitesse et une efficacité. Le rendu HTML de build-time de Jamstack et le déploiement du serveur Edge fournissent des temps de chargement rapide, mais la gestion des tâches côté serveur comme le traitement de formulaire nécessite une approche différente.

Les solutions traditionnelles côté serveur comme PHP simplifient la gestion des formulaires, mais Jamstack profite des fonctions sans serveur. Ce didacticiel utilise des travailleurs CloudFlare pour créer un microservice pour le traitement des formulaires, offrant des avantages de coûts par rapport aux serveurs dédiés et permettant des workflows complexes en s'intégrant à des services comme AirTable.

Avantages clés:

• Tirer parti des travailleurs de Cloudflare pour la gestion des formulaires sans serveur sur les sites Jamstack améliore les performances et réduit les coûts.
• Adommagent les limitations de Jamstack pour les fonctionnalités dynamiques comme les formulaires via une architecture de microservices sans serveur.
• Exploration de l'utilisation des services tiers existants (formulaires, formulaires netlify, etc.) pour une intégration rapide.
• Construire des gestionnaires de formulaires personnalisés avec des travailleurs CloudFlare pour des coûts inférieurs par soumission et une sécurité sur mesure.
• en utilisant le réseau de bord de Cloudflare pour une latence réduite.
• Manipulation directe de la soumission du formulaire côté navigateur avec JavaScript, y compris la gestion des demandes de Cors Fillight.
• Déploiement et test sur un domaine personnalisé pour la surveillance des performances en temps réel.

Handleurs de formulaires tiers:

Les services comme FormSpree, GetForm, FormData et Netlify Forms offrent des fonctionnalités telles que les notifications par e-mail, le filtrage des spams, les intégrations tierces (Zapier), les tableaux de bord, les téléchargements de fichiers et l'exportation CSV. Bien que pratique et offrant souvent des niveaux gratuits, ils peuvent devenir coûteux pour une utilisation à haut volume.

Construire votre propre service (avantages sociaux):

Construire une solution personnalisée à l'aide de CloudFlare Workers propose:

• Coût inférieur par soumission.
• Politiques de sécurité personnalisables.
• intégrations de services illimitées.
• la latence réduite due à l'informatique des bords.
• flexibilité pour ajouter des fonctionnalités non disponibles dans les services tiers.

Les services de messagerie comme SendGrid et Mailgun offrent des niveaux gratuits, mais pour l'intégration directe de la base de données ou de l'application, les soumissions de coûts par million peuvent être considérablement inférieures aux gestionnaires de formulaires tiers.

CloudFlare Workers:

CloudFlare Workers, une plate-forme sans serveur, évite le problème "Démarrage du froid" commun dans d'autres offres sans serveur, offrant des temps de réponse presque instants en raison de son architecture informatique d'exécution et de bord V8.

Présentation du projet:

Ce didacticiel vous guide dans la création d'une application CloudFlare Workers et l'intégrer à un spa React prédéfini (liens de code source fourni). Le tutoriel se concentre sur le backend des travailleurs, pas sur le développement de l'interface utilisateur.

Prérequis:

• node.js
• Visual Studio Code
• VS CODE REST EXTENSION Client

Configuration du compte:

1. Domaine personnalisé (recommandé): Un domaine personnalisé simplifie le déploiement, fournit un accès au journal en temps réel et améliore la délivrabilité des e-mails. Fastcomet est suggéré pour l'enregistrement du domaine et l'hébergement par e-mail.
2. Configuration de Mailgun: Créez un compte Mailgun (plan gratuit disponible), vérifiez-le, notez votre clé API et votre URL de base et ajoutez une adresse e-mail de destinataire autorisée. Testez l'envoi d'e-mails à l'aide de la commande Curl fournie. Un domaine personnalisé est recommandé pour les limites d'envoi plus élevées et la livraison améliorée de la boîte de réception.
3. CloudFlare Workers Configuration: Inscrivez-vous à un compte CloudFlare Workers, installez le Wrangler CLI (npm install -g @cloudflare/wrangler), connectez-vous (wrangler login) et vérifiez l'installation (wrangler --version). Si la connexion échoue, reportez-vous aux étapes de dépannage du tutoriel d'origine. Si vous utilisez un domaine personnalisé, ajoutez-le à CloudFlare, modifiez les serveurs de noms et téléchargez / configure cloudflared.

Développement du projet:

1. Générer le projet: Utiliser wrangler generate cloudflare-form-service, cd cloudflare-form-service et npm install. Mettre à jour wrangler.toml avec votre ID de compte et configurer des scripts dans package.json pour le développement et le formatage.
2. Gestion des demandes de poste: Modifier index.js Pour gérer les demandes de publication, lire le corps de la demande (données JSON ou formulaire) et renvoyer les réponses appropriées (y compris la gestion des erreurs).
3. Validation du schéma: installer @cfworker/json-schema (npm install @cfworker/json-schema), changer wrangler.toml en "type = "webpack", créer validator.js avec un schéma JSON et une logique de validation et l'intégrer dans index.js .
4. Intégration des e-mails: Créer email-service.js, email-text-template.js, et email-html-template.js. Configurer des variables d'environnement (clé API Mailgun, URL de base de l'API Mailgun, de l'adresse e-mail, à l'adresse e-mail) en utilisant wrangler secret put ou le tableau de bord CloudFlare. Intégrer email-service.js dans index.js.
5. Ajout de CORS: Ajouter corsHeaders à index.js et gérer les demandes d'options de filigrane pour assurer la compatibilité avec les modèles de sécurité du navigateur.

Déploiement du projet:

1. Déployer le service des travailleurs de la gestion des formulaires: Utiliser wrangler publish pour se déployer dans le sous-domaine Workers.Dev de CloudFlare. Testez avec les demandes HTTP mises à jour dans test.http.
2. Déploiement du domaine personnalisé (facultatif): Configurer des environnements de mise en scène et de production dans wrangler.toml, créez un enregistrement CNAME dans vos paramètres DNS CloudFlare et publiez sur la production en utilisant wrangler publish -e production. Re-télécharger les variables d'environnement à l'aide de wrangler secret put. Tester avec les demandes à votre domaine personnalisé.
3. Déployer l'interface utilisateur du formulaire: Utilisez le spa React fourni, configurez le fichier .env avec votre URL d'application des travailleurs et déployez sur une plate-forme comme CloudFlare Pages, Netlify ou Vercel.

Résumé et FAQ:

Le tutoriel se termine par un résumé et une section FAQ complète couvrant Jamstack, les travailleurs de CloudFlare, des méthodes de traitement des formulaires alternatives, des considérations de coûts et des limitations. Les FAQ explorent également d'autres fonctionnalités et capacités des travailleurs CloudFlare. Les images fournies restent dans leur format et leur emplacement d'origine.

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!