Comment utiliser CloudFlare Workers et KV pour servir un site statique

Une innovation en informatique de pointe a eu lieu ces dernières années. CloudFlare (CF) Workers permet aux applications JavaScript côté serveur d'être exécutées directement sur la périphérie, au plus près d'un consommateur. Qu'il s'agisse d'une application simple ou complexe, un CloudFlare Worker débloque des performances étonnantes, sans démarrage à froid, pour une fraction du prix qu'offre l'informatique sans serveur traditionnelle.

Parallèlement au concept de CF Workers, une fonctionnalité nommée Workers KV (key-value) data store permet d'enregistrer et de diffuser des données directement à un travailleur. Avec cette fonctionnalité, vous pouvez utiliser des nœuds de calcul comme base de données et référentiel de fichiers permettant de servir des sites statiques directement depuis la périphérie. Dans cet article, nous explorons exactement comment provisionner un nouveau site statique simple soutenu par CloudFlare Workers.

Commencer

Cet article suppose que vous disposez déjà d'un compte CloudFlare et que ce compte est lié à un domaine. Vous aurez également besoin du plan Workers Bundled, qui offre la fonction KV. Les fonctionnalités suivantes sont disponibles et se différencient du plan gratuit.

• Frais minimum de 5 USD et 0,50 USD / million de demandes par mois
  • 10 millions de demandes avant que des frais supplémentaires ne soient nécessaires
• Déployez jusqu'à 30 sites
• Sous-domaine workers.dev gratuit
• Jusqu'à 50 ms de temps CPU par requête
  • Le plan gratuit offre 10ms
• Latence toujours la plus faible
• Accès aux travailleurs KV
  • Jusqu'à 100 espaces de noms (pensez aux bases de données)
  • 1 Go de stockage (0,50 USD par Go supplémentaire de stockage)
  • 10 millions d'opérations de lecture, 1 million d'opérations d'écriture, de suppression et de liste
    • 0,50 USD par million d'opérations de lecture supplémentaires et 5,00 USD par million d'opérations d'écriture, de suppression et de liste supplémentaires

Après avoir acheté le plan CloudFlare Workers Bundled, vous pourrez utiliser Workers KV et la fonctionnalité CloudFlare Workers Site.

Outil de ligne de commande Wrangler

Pour créer un déploiement de site, CloudFlare a créé l'outil de ligne de commande Wrangler. Wrangler nécessite une installation via NPM (gestionnaire de packages NodeJS) ou Cargo (gestionnaire de packages de langue Rust).

Installation de NPM

npm i @cloudflare/wrangler -g

Cargaison

cargo install wrangler

Si vous ne souhaitez pas utiliser le binaire OpenSSL inclus dans Cargo, vous pouvez choisir d'utiliser le système OpenSSL en installant à l'aide de la ligne de commande suivante. Cela réduira la taille de l'installation.

cargo install wrangler --features sys-openssl

Créer un site

Maintenant que Wrangler est installé et que les ouvriers sont achetés, nous pouvons créer notre site. Dans cet exemple, nous utilisons le 1.11.0 version de Wrangler, qui a introduit une méthode d'authentification plus récente et plus simple. Cela suppose également que PowerShell est l'environnement shell utilisé, mais Wrangler fonctionnera dans tout environnement prenant en charge les installations NPM ou Cargo.

Connexion Wrangler et création de site

Tout d'abord, nous allons nous connecter à CloudFlare en utilisant Wrangler. Pour ce faire, nous utilisons le nouveau wrangler login fonctionnalité. Cela demandera l'ouverture d'une page Web, et si vous êtes déjà authentifié dans CloudFlare, l'authentification se produira très rapidement. Sinon, connectez-vous et Wrangler configurera automatiquement le jeton API.

wrangler login

Comme vous pouvez le voir à partir de l'emplacement de configuration, il y a un .toml fichier qui contient maintenant votre jeton API pour rendre toutes les opérations ultérieures transparentes.

Générer le site

Ensuite, nous allons générer le site lui-même. En utilisant le generate commande, nous allons créer rapidement le site. À ce stade, il est également recommandé de naviguer dans le répertoire du site et de créer un nouveau référentiel via git init. Il s'agit d'une étape facultative mais fortement recommandée.

wrangler generate --site worker-site

Structure du site

Wrangler crée la structure de site suivante:

• public – Ce sont les actifs statiques de votre projet avec une valeur par défaut index.html et favicon.ico fichier.
• workers-site – Le JavaScript qui pilote la diffusion du site statique, situé dans le index.js fichier. Cela ne doit pas être modifié sauf si vous devez ajouter des fonctionnalités supplémentaires.
• wrangler.toml – Le fichier de configuration qui pointe vers les informations de compte et de projet.

Vous remarquerez peut-être l'avertissement qui s'affiche concernant la nécessité de mettre à jour le projet wrangler.toml fichier. Au minimum, vous devrez ajouter le account_id valeur dans le wrangler.toml fichier pour prévisualiser le site.

Pour récupérer l'ID de compte, le moyen le plus simple consiste à accéder au tableau de bord CloudFlare, à cliquer sur Travailleurs et à localiser l'ID de compte.

Ouvert wrangler.toml et mettre à jour le account_id valeur à la valeur de vos comptes CloudFlare.

Aperçu du site

Pour vérifier que le site fonctionne correctement, vous pouvez utiliser le preview commande de Wrangler pour générer le site et afficher le site dans le navigateur. En ajoutant le --watch paramètre, toutes les modifications que vous apportez au site seront immédiatement reflétées dans la fenêtre du navigateur.

wrangler preview --watch

Déploiement du site en production

La prochaine étape serait de déployer ce site en production. Il n'y a qu'une petite poignée de configurations qui doivent être modifiées dans le wrangler.toml fichier.

• zone_id – Le site Web auquel le travailleur sera appliqué.
• route – Où le travailleur sera appliqué.
• workers_dev – Remplacez cette valeur par false.

Vous pouvez récupérer le zone_id en accédant au site Web auquel vous souhaitez appliquer le Worker dans le tableau de bord CloudFlare, en accédant à la page Présentation et en recherchant l'ID de zone dans la section API.

Pour configurer l'itinéraire, vous utiliserez généralement l'un des deux formats, qui serviront une page sous un domaine de premier niveau ou un sous-domaine:

• example.com/*
• subdomain.example.com/*

Le résultat final de votre wrangler.toml la configuration devrait ressembler à ceci:

name = "worker-site"
type = "webpack"
account_id = "my-account-id"
workers_dev = false
route = "example.com/*"
zone_id = "my-zone-id"

**(**site)
bucket = "./public"

Enfin, exécutez le publish commande pour rendre le site public et créer le site de travail sous la zone et l'itinéraire définis.

wrangler publish

Conclusion

Les sites CloudFlare Workers offrent des fonctionnalités puissantes avec un accès facile aux développeurs. Les sites statiques sont incroyablement rapides et sécurisés en raison du manque d'interactivité. Tous les cas d'utilisation ne sont pas résolus par cela, mais la facilité d'utilisation et le manque de serveurs tiers nécessaires pour héberger le site rendent cette fonctionnalité très attractive!