Infrastructure Serverless – Partie 4/5 : Fonctions cloud (Patreon)

Comme vous le savez sûrement, au fil du temps le blog korben.info est devenu un site conséquent et par son nombre de page que par sa sollicitation.Régulièrement,  nous cherchons et mettons en place divers outils ou méthodes dans le  but d’optimiser son exploitation, c’est à dire le rendre plus  performant, plus rapide, mais aussi plus stable. Inévitablement il arrive que soit l’infrastructure elle-même qui nécessite une optimisation.

Ces derniers temps, nous avons étudié la possibilité d’une  transition vers une nouvelle forme d’infrastructure. Cette forme,  récemment popularisé sous le nom un peu buzzword de  « serverless », propose de distinguer les différentes parties d’une  structure web classique pour les placer dans des environnements qui leur  sont adaptés et ainsi optimiser à chaque étape.

De manière générale, nous avons définis les objectifs avec les points suivants.

Optimiser le rendu web pour gagner en performances et en dynamisme ;

Bénéficier d’un dimensionnement dynamique pour absorber le trafic tout en économisant des ressources ;

Réduire la surface d’attaque pour maximiser sa sécurité ;

Favoriser la portabilité pour simplifier le changement de solution ou de prestataire.

Dans ce dossier, nous vous proposons d’explorer et de mettre en place un schéma d’infrastructure serverless, étape par étape.

Notre dossier sur l’infrastructure serverless

Infrastructure Serverless – Partie 1 : Générateur de site

Infrastructure Serverless – Partie 2 : Hébergement statique

Infrastructure Serverless – Partie 3 : Gestion de contenu

Infrastructure Serverless – Partie 4 : Fonctions cloud (cet article)

Infrastructure Serverless – Partie 5 : Micro-services et conclusion (à venir)

<figure></figure>

Fonctions cloud

L’origine

Suite à l’épisode précédent, nous voilà encombrés d’un ensemble  de pages statiques, certes d’une efficacité redoutable, mais sans  possibilité de modifier quoi que ce soit à la volée.

Par rapport à un CMS complet, nous avons réussi à nous passer d’un  travail serveur conséquent, puisque la compilation des templates même  avec le contenu basique (les articles de blog) a déjà été faite en  amont.Mais la partie dynamique, si besoin il y a, demeure absente.

Comment faire pour insérer ici la citation du jour sans exposer l’API  de citations publiquement, et là la météo du jour sans faire travailler  le navigateur du client, qui a probablement désactiver le JavaScript ?

Le principe

Les fonctions cloud ou serverless permettent de manipuler les  réponses aux requêtes client. Ces fonctions sont caractérisées par un  déclanchement unitaire à chaque requêtes et leur exécution à chaud au  plus proche du client sur une répartition géographique (le fameux edge). Elles héritent ainsi d’une excellente scalabilité et d’une très bonne redondance.

Leur efficacité est cruciale, la mesure principale et facturable sur  les fonctions cloud est le temps CPU consommé, mesuré en millisecondes.Elle sont donc formidables pour de la modification simple de comportement ou de contenu, mais pas pour des taches lourdes.

Enfin, aucune configuration n’est à faire, le serveur/l’hébergement  est géré par le fournisseur de la plateforme. La seule entrée est le  (court) script de la fonction cloud.

<figure>FaaS, Function-as-a-Service, en comparaison avec les autres services d’infrastructure, au plus haut de l’abstraction. Source</figure>

La solution

Les fonctions cloud représentent l’outils idéal pour des tests  A/B, de l’insert de contenu avec ou sans rotation, éventuellement après  authentification client.

<figure></figure>

La page « Mon adresse IP »  des services Korben est une page dont la structure ne varie pas mais le  contenu s’adapte à chaque client. La partie ajustée au client est  récupérée à partir d’une API externe, elle se prête donc à l’exercice.

L’usage simple

Dans le contexte d’un blog, ces fonctions cloud permettent de gérer  des insertions de contenu dynamique. Par exemple un citation qui change à  chaque requête, ou l’ajout d’une donnée provenant d’une API privée, ou  encore un chargement d’une page (statique donc) différente selon le pays  du client.

La fonction cloud récupère en parallèle des données dynamiques auprès  d’une API ou d’une base de données locale (souvent proposée par le  fournisseur fonctions cloud), ou d’autres parties statiques, avant de  faire une fusion sur le contenu à retourner au client.

Voyons ça de plus près.

En premier lieu, nous définissons un observateur (listener) pour les évènements de requête (fetch), avec une fonction de retour. Notez que le code suit les standard web, en particulier les API Worker pour JavaScript.

addEventListener("fetch", (event) => {  event.respondWith(handleRequest(event.request))})

Ensuite notre fonction de traitement, handleRequest. Elle est asynchrone et prend la requête en entrée.

async function handleRequest(request) { const res = await fetch(`https://serverless-demo-38a.pages.dev/my-first-post/`)  const contentType = res.headers.get("Content-Type")  // If the response is HTML, it can be transformed with  // HTMLRewriter -- otherwise, it should pass through  if (contentType.startsWith("text/html")) {    return new HTMLRewriter()      .on("p#worker-time", new TimeRewriter())      .transform(res)  } else {    return res  }}

On a ainsi récupéré la page statique et ses attributs (res et contentType), puis, sous condition d’une page HTML, on réécrit une partie du HTML (p#worker-time) avant de transmettre au client.

Le modificateur est décrit par une classe toute simple. Ici on insert la date courante.

class TimeRewriter {  element(element) {    element.setInnerContent(new Date().toUTCString())  }}

La partie HTML à réécrire est ici référencée par un id, que nous ajoutons dans l’article Markdown rédigé en partie 3.

...Hello world!Ce contenu a été ajouté dynamiquement le <time id="worker-time">N/A</time> par la fonction cloud.

Nous pouvons dorénavant déployer notre petit script sur un fournisseur de fonction cloud.Nous avons choisi Cloudflare Workers car il s’intègre parfaitement avec l’offre Cloudflare Page et le  Cloudflare CDN, mais d’autres alternatives sont possibles (AWS, GCP,  Azure, Vercel, Netlify, Deno Deploy…).

Créer une nouvelle fonction cloud est simple comme bonjour. En se rendant sur le tableau de bord, il suffit de préciser un nom de projet pour obtenir un point de terminaison.

<figure></figure>

Un outil chouette avec Cloudflare Workers est l’interface web pour soumettre des fonctions simple (Modification rapide).En l’occurrence, ça donne ça :

<figure></figure>

Le résultat

Voilà !

On obtient un script léger, standard et déployable directement avec une fonction cloud. À chaque requête, il modifie la réponse pour qu’elle contienne la date.Autrement dit, du contenu dynamique sans aucun script côté client.

<figure>serverless-demo.korben.workers.dev/my-first-post/</figure>

La suite

Nous avons donc obtenu un site statique, tout en conservant une  gestion du contenu fluide et accessible, et avec un traitement  dynamique.Niveau fonctionnalités pour un blog de taille humaine, c’est satisfaisant.

Pour aller plus loin, nous prendrons un peu de hauteur dans notre  prochaine épisode pour visualiser l’infrastructure dans son ensemble.