Construire une application sans serveur complète avec des travailleurs CloudFlare

L'informatique sans serveur a révolutionné le développement de logiciels, simplifiant le déploiement et DevOps. Ce tutoriel montre la création d'une application sans serveur complète à l'aide de CloudFlare Workers, une plate-forme qui résout la mise à l'échelle et l'infrastructure. Le projet, «Repo Hunt», est un classement quotidien pour les projets open-source, inspiré de Product Hunt et Reddit. Le site fini est disponible ici .

CloudFlare Workers, tirant parti du réseau mondial de CloudFlare, offre des performances extrêmement à faible latence, quelle que soit l'emplacement de l'utilisateur. L'outil Wrangler CLI simplifie la construction, le téléchargement et la publication. Ce tutoriel utilise le modèle "routeur", permettant le routage basé sur l'URL. Le code source est disponible sur github [link-to-github-repo].

Configuration de votre environnement

Installer Wrangler:

 NPM Install -g @ cloudflare / wrangler

Créez un nouveau projet à l'aide du modèle de routeur:

 Wrangler génére un repo-hent https://github.com/cloudflare/worker-template-router
CD REPO-Hunt

Le modèle de routeur utilise WebPack, permettant l'inclusion de modules NPM. Une classe Router gère le routage d'URL. Un exemple de base:

 // index.js
const Router = requis ('./ routeur');

addEventListener ('fetch', événement => {
  event.RespondWith (handlerequest (event.request));
});

Fonction asynchrone handlerequest (request) {
  essayer {
    const r = new router ();
    r.get ('/', () => nouvelle réponse ("Bonjour, monde!"));
    const resp = attend r.Route (demande);
    retour resp;
  } catch (err) {
    renvoyer une nouvelle réponse (err);
  }
}

Les travailleurs réagissent aux événements fetch , renvoyant une Response . Ce tutoriel utilise des itinéraires pour la page d'accueil ( / ), le formulaire de soumission ( /post ) et la gestion de la soumission ( /repo ).

Routage et modèles

La page d'accueil ( / ) Route rend une liste de référentiels soumis. Nous commencerons par une simple réponse HTML:

 // index.js
const Router = requis ('./ routeur');
const index = require ('./ handlers / index');

// ... (reste d'index.js)

// Handlers / index.js
const Header = {'Content-Type': 'text / html'};
const Handler = () => {
  return new Response ("Hello, World!", {Headers});
};
module.exports = handler;

Utilisez wrangler preview pour tester. Ensuite, nous allons créer un modèle plus sophistiqué:

 // Handlers / index.js
const Header = {'Content-Type': 'text / html'};
const template = require ('../ modèles / index');

// ... (reste des gestionnaires / index.js)

// modèles / index.js
const Layout = require ('./ Layout');
const Template = () => Layout (`<h1 id="Bonjour-le-monde"> Bonjour le monde!</h1> `);
module.exports = modèle;

// Templates / Layout.js
Const Layout = body => ` $ {Body} `;
module.exports = disposition;

Cela utilise un modèle de mise en page pour un style cohérent (Bulma CSS est inclus).

Persistance des données avec les travailleurs KV

Les travailleurs KV fournissent un magasin de valeurs clés pour la persistance des données. Nous stockons des référentiels (clé: repos:${id} ) et des listes quotidiennes (clé: $date ). Remarque: les travailleurs KV ont besoin d'un plan payant.

Opérations de base KV:

 Repo_hunt.put ("MyString", "Hello, World!"); // Définition d'une valeur
const string = attend repo_hunt.get ("mystring"); // Récupération d'une valeur

Nous allons créer des cours pour gérer les données de répenses et de jour:

 // Store / Repo.js
const uuid = require ('uuid / v4');

classe repo {
  // ... (implémentation de classe de réapprovisionnement)
}
module.exports = repo;

// Store / Day.js
const Today = () => new Date (). TolocaleDateString ();

module.exports = {
  Ajouter: fonction asynchrone (id) {// ...},
  getRepos: fonction async () {// ...}
};

La classe Repo gère la validation et la persistance. Day gère les listes de référentiels quotidiens.

Gestion des soumissions d'utilisateurs

Un formulaire (GET /post ) permet aux utilisateurs de soumettre des référentiels. Un post /repo traite les soumissions:

 // Handlers / Create.js
const qs = require ('qs');
const repo = require ('../ store / repo');
const day = require ('../ store / day');

// ... (Créer une implémentation du gestionnaire)

Cela utilise la bibliothèque qs pour analyser les données de formulaire, crée un objet Repo , l'enregistre à KV et ajoute son ID à la liste quotidienne.

Rendre des données sur la page d'accueil

La page d'accueil récupère et rend désormais les données de référentiel:

 // Handlers / index.js
// ... (gestionnaire d'index mis à jour)

// modèles / index.js
// ... (fonction de modèle mise à jour pour rendre des références)

La fonction getRepos du module Day récupére et instancie des objets Repo . Le modèle rend chaque référentiel.

Déploiement

Réclamer un sous-domaine de travailleurs.DEV:

 Sous-domaine de Wrangler mon-subdomain

Déployez la demande:

 wrangler publier

Créez un espace de noms KV dans le tableau de bord CloudFlare et mettez à jour wrangler.toml avec l'ID d'espace de noms:

 [[kv-namespaces]]
binding = "repo_hunt"
id = "$ yourNamespaceid"

Republier après avoir ajouté l'espace de noms KV à wrangler.toml . L'application est maintenant en direct!

Développement

Ce tutoriel fournit une base pour une application sans serveur. Les améliorations futures pourraient inclure des votes up, des commentaires et des fonctionnalités plus sophistiquées. Explorez la documentation et la galerie de modèles des travailleurs pour d'autres idées de développement.

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!