Comment utiliser CloudFlare Workers pour exécuter JavaScript sur le bord
Plus vous pouvez exécuter du code ou renvoyer des données à un visiteur près du bord, plus l'expérience utilisateur sera rapide. Dans cet esprit, CloudFlare a publié un produit nommé CloudFlare Workers, qui permet d'exécuter du code JavaScript sur des serveurs de périphérie. Cela vous permet d'intercepter une demande, d'agir sur cette demande et de renvoyer le résultat en périphérie, avec le potentiel de ne jamais toucher votre serveur d'origine.
Cela ouvre un monde de possibilités, non seulement en termes de performances, mais aussi d'applications uniques fonctionnant presque entièrement en périphérie. Profiter de l’énorme infrastructure, de la capacité et des emplacements périphériques de CloudFlare signifie que ce type de produit est unique en son genre.
Bien sûr, avec toute nouvelle solution comme celle-ci, il peut être difficile de trouver des applications potentielles. Bien qu'il y en ait beaucoup, quelles sont les utilisations pratiques? Dans cet article, nous explorons un cas d'utilisation potentiel, celui d'effectuer des redirections directement sur la périphérie.
Sommaire
Configurer CloudFlare Worker
En supposant que vous disposez déjà d'un domaine mandaté via CloudFlare, nous pouvons activer les nœuds de calcul et commencer à tester notre code, avant même de le déployer en production. Une fois connecté au tableau de bord CloudFlare, vous remarquerez une icône pour les travailleurs. Ce qui est très pratique dans cet environnement, c'est que CloudFlare vous offre un environnement de développement pour tout tester avant de déployer votre collaborateur sur votre site en ligne.
Cliquez sur «Créer un travailleur» pour générer un environnement de développement pointé vers un sous-domaine de travail généré aléatoirement pour permettre les tests.
Jetons un coup d'œil à l'environnement de développement pour comprendre comment cela peut nous aider. Il y a trois sections principales. Sur le côté gauche, nous avons un éditeur de code et sur la droite, nous avons deux vues. La première est la vue HTTP où nous pouvons construire des requêtes spécifiques à notre travailleur et voir la réponse, et la seconde est l'onglet Aperçu où nous pouvons voir à quoi ressemblerait la page elle-même.
Maintenant que nous avons configuré un environnement de code, créons une simple redirection que nous pourrons développer plus tard.
Développement du code de redirection
Il existe un code standard qui servira de bon début à notre code de redirection. Dans la première section, le addEventListener est ce qui intercepte en premier la requête entrante. Cette demande est ensuite envoyée au handleRequest fonction de traitement.
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
/**
* Respond to the request
* @param {Request} request
*/
async function handleRequest(request) {
// Redirect logic to go here
}L'idée centrale est que nous lirons le pathname de l'URL de la demande entrante et décidez où rediriger. En utilisant le type d'URL, nous pouvons facilement mapper notre entrée pathname à un endroit. Dans cet exemple ci-dessous, nous utilisons une instruction switch pour définir l'emplacement en fonction du chemin et renvoyer un 301 redirection permanente.
addEventListener('fetch', async event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
let requestURL = new URL(request.url)
let path = requestURL.pathname.split('/redirect')(1)
switch (path) {
'/test1' {
let location = 'https://mysite.com/newlocation1'
break
}
'/test2' {
let location = 'https://mysite.com/newlocation2'
break
}
}
if (location) {
return Response.redirect(location, 301)
}
return fetch(request)
}Amélioration du script de redirection
Cela fonctionne bien, mais il existe une méthode plus efficace et plus facile à gérer pour mapper les redirections. En utilisant le JavaScript Map construct, nous pouvons créer une liste de redirections facile à référencer. Déplaçons nos redirections vers un Map construire et refactoriser notre code pour qu'il fonctionne un peu mieux.
const redirectMap = new Map((
('/test1', 'https://mysite.com/newlocation1'),
('/test2', 'https://mysite.com/newlocation2'),
('/test3', 'https://mysite.com/newlocation3'),
('/test4', 'https://mysite.com/newlocation4'),
))
addEventListener('fetch', async event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
let requestURL = new URL(request.url)
let path = requestURL.pathname.split('/redirect')(1)
let location = redirectMap.get(path)
if (location) {
return Response.redirect(location, 301)
}
return fetch(request)
}Déploiement
Maintenant que notre script est fonctionnel, nous devons le mapper à un domaine. Après avoir cliqué sur Enregistrer et déployer, nous devons revenir à notre tableau de bord et trouver le domaine dans lequel nous mappons également ce script.
Sélectionnez le domaine auquel nous voulons appliquer ce travailleur, puis accédez à l'onglet «Travailleurs». Sélectionnez le bouton «Ajouter une route» et vous pourrez définir le script et la route. Cela signifie également que vous pouvez créer plusieurs scripts et routes auxquels ils s'appliquent.
Sous l'entrée «Route», nous devons définir où ira le lien. Très probablement, nous mettrons en place un itinéraire tel que:
*.mysite.com/*
L'itinéraire ci-dessus correspond à toutes les URL et tous les schémas du site. Parce que nous recherchons le chemin de la fin, nous examinerons chaque demande et testerons cela. Enfin, nous sélectionnerons le Worker que nous avons créé pour le déployer dans cette zone.
Il faut garder à l'esprit que l'affectation d'un CloudFlare Worker à un script et à une route fera que ce worker prendra instantanément effet. Cela signifie également que les changements, les erreurs et tout, prennent également effet instantanément.
Possibilités futures
CloudFlare a mis à disposition plusieurs autres outils et capacités en utilisant ou en intégrant CloudFlare Workers. Il existe un magasin clé-valeur qui permet un stockage de données finalement cohérent, accessible par n'importe quel CloudFlare Worker sur n'importe quel serveur Edge.
En utilisant Wrangler, un outil de ligne de commande, vous pouvez même provisionner un site statique entier avec les fichiers stockés dans le magasin KV et servis à l'aide de scripts CloudFlare Workers. Cela soulève de nombreuses possibilités et ce qui peut être créé à l'aide de CloudFlare Workers.
Conclusion
CloudFlare Workers est un outil très puissant qui permet la capacité unique d'agir rapidement sur les demandes de périphérie. En utilisant cela pour déplacer notre logique d'application normale vers la périphérie, non seulement nous réduisons le temps de réponse, mais nous évitons également de taxer nos serveurs d'origine.
