Implémentation de l'envoi Gmail avec Cloudflare Workers - Guide de développement

Ceci est la deuxième partie d'une série sur la mise en œuvre de l'envoi de Gmail avec Cloudflare Workers :

• Partie 1 : Configuration ✅
• Partie 2 : Environnement de développement (actuel)
• Partie 3 : Mise en œuvre (à venir)

Introduction

Après avoir configuré l'accès à l'API Gmail dans la première partie, nous allons maintenant configurer notre environnement de développement pour Cloudflare Workers. Ce guide se concentre sur la création d'une configuration de développement robuste qui fonctionne de manière transparente avec Cloudflare Pages et Workers.

Comprendre l'infrastructure Cloudflare

Cloudflare fonctionne sur une plate-forme informatique de pointe distribuée à l'échelle mondiale. Lorsque le trafic augmente, les pages sont répliquées sur ces serveurs et les utilisateurs sont dirigés vers le serveur le plus proche. Cette architecture sans serveur élimine le besoin de gérer vos propres serveurs, conteneurs Docker ou clusters Kubernetes.

Travailleurs et pages Cloudflare

Aperçu des travailleurs

Cloudflare Workers sont des fonctions sans serveur qui gèrent le traitement des requêtes. Tandis que Cloudflare Pages gère le frontend (contenu statique), les Workers gèrent les opérations backend telles que le traitement des formulaires et l'envoi d'e-mails.

Options de stockage disponibles

Les employés peuvent intégrer diverses solutions de stockage Cloudflare :

1. D1:

   • Base de données SQL sans serveur basée sur SQLite
   • Jusqu'à 10 Go de capacité de stockage
   • Fonctionnalité de voyage dans le temps de 30 jours

2. KV (valeur clé) :

   • Magasin clé-valeur distribué à l'échelle mondiale
   • Optimisé pour la lecture des bords

3. Objets durables :

   • Gestion cohérente de l'état
   • Idéal pour les systèmes distribués

4. R2:

   • Stockage d'objets compatible S3
   • Capacité de gestion de fichiers volumineux

5. Hyperdrive :

   • Connecteur de base de données PostgreSQL
   • Regroupement de connexions optimisé

Remarques importantes sur le Wrangler

Les changements récents apportés au modèle d'utilisation de Wrangler nécessitent une attention particulière. Auparavant, Wrangler était généralement installé à l'échelle mondiale, mais l'approche recommandée a changé :

Ancienne méthode (déconseillée) :

npm install -g wrangler
wrangler init my-project

Nouvelle méthode recommandée :

npm create cloudflare@latest

Ce changement offre une meilleure isolation des projets et une meilleure gestion des versions.

Environnement linguistique dans Cloudflare Workers

Bien que Cloudflare Workers puisse ressembler à Node.js, il existe des différences importantes :

• Les modules natifs Node.js ne sont pas disponibles
• Le code doit être compatible avec le navigateur
• TypeScript est pris en charge, offrant de solides avantages en matière de frappe
• Node.js est installé par projet à des fins de développement uniquement
• Les requêtes HTTP directes doivent être utilisées à la place des bibliothèques Node.js

Comprendre les applications Cloudflare Pages

Les applications Cloudflare Pages diffèrent des Workers traditionnels :

• Ce sont des applications Web entièrement intégrées fonctionnant sur la plateforme Cloudflare Pages
• Pages Functions étend cette fonctionnalité via le répertoire /functions
• Cette intégration permet un traitement côté serveur (comme la gestion des e-mails) directement dans votre application Pages
• Aucun déploiement Worker distinct n'est nécessaire lors de l'utilisation de Pages Functions

Configuration de l'environnement de développement

1. Conditions préalables

• Créez un compte Cloudflare
• Connectez votre référentiel GitHub à Pages
• Configurer les paramètres de déploiement

2. Configuration de la structure du projet

Créez la structure de répertoires suivante :

npm install -g wrangler
wrangler init my-project

Initialiser avec :

npm create cloudflare@latest

3. Installer les dépendances

your-project/
├── src/
│   └── pages/
│       └── index.astro
├── functions/
│   ├── contact-form.ts
│   └── tsconfig.json
├── public/
├── astro.config.mjs
├── package.json
└── wrangler.toml

4. Configurer TypeScript

Ajouter à function/tsconfig.json :

mkdir functions
touch functions/contact-form.ts functions/tsconfig.json wrangler.toml

Mettre à jour le projet tsconfig.json :

npm install --save-dev typescript @cloudflare/workers-types

Prochaines étapes

Le prochain article de cette série couvrira les détails de mise en œuvre, notamment :

• Création de la fonction d'envoi d'email
• Gestion des soumissions de formulaires
• Gestion des erreurs et validation
• Tests et déploiement

Restez à l'écoute pour la partie 3, où nous rassemblerons tout avec la mise en œuvre réelle.

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!