Dynamisez vos sites statiques sur Cloudflare Pages avec la disponibilité générale de Pages Functions

Avant le lancement de Pages en avril 2021, nous savions que cela serait le début de quelque chose de magique, une expérience qui semblait idéale. Nous l'envisagions simple et fluide au point que n'importe quel développeur pourrait mettre un site web en ligne en quelques secondes et y ajouter des éléments supplémentaires à l'aide du reste de notre écosystème Cloudflare.

Quelques mois plus tard, lorsque nous avons annoncé que Pages devenait une plateforme full-stack en novembre 2021, cette idée s'est concrétisée. L'histoire de Pages n'allait pas s'arrêter avec la création d'une plateforme de développement pour des sites uniquement statiques et avec Cloudflare Workers faisant déjà partie de cet écosystème, nous savions que nous disposions là d'un potentiel inexploité. Avec la mise en place de Pages Functions, nous avons donné aux développeurs les moyens d'ajouter facilement à n'importe quel site statique du contenu dynamique avec la puissance de Cloudflare Workers.

Au cours de l'année dernière, depuis que Functions existe en version Bêta ouverte, nous avons pu examiner avec plus de précision le type de capacités full-stack que les développeurs recherchent pour leurs projets et en tenir compte pour faire évoluer Functions jusqu'à sa forme actuelle.

Nous nous réjouissons d'annoncer la mise en disponibilité générale de Pages Functions !

Certes, dans le contexte de Pages, on parle de « Functions », mais ces fonctions qui s'exécutent sur le réseau Cloudflare sont en réalité une forme "déguisée" de Cloudflare Workers. Pages tire parti de la puissance et de l'évolutivité des Workers, qu'elle spécialise afin de s'aligner sur l'expérience des utilisateurs de Pages.

Avec Functions, vous pouvez imaginer des possibilités de fonctionnalité dynamique à ajouter à votre site : intégration avec des solutions de stockage, connexion aux services d'un tiers, utilisation du rendu côté serveur avec vos infrastructures full-stack de prédilection et plus encore. Puisque Pages Functions s'ouvre au trafic de production, passons en revue certaines des fonctionnalités intéressantes que nous avons améliorées et ajoutées à cette version.

Vous adorez coder ? Nous gérons l'infrastructure et vous faites reste.

Écrivez simplement une Function JavaScript/Typescritp et déposez-la dans un répertoire de fonctions en soumettant votre code à votre fournisseur Git. Notre système CI compilera votre code et le déploiera aux côtés de vos ressources statiques.

Vous préférez vous occuper vous-même de la compilation ? Votre fournisseur de git n'est pas encore pris en charge par Pages ? Aucun problème ! Après avoir déposé votre Function dans le dossier des fonctions, vous pouvez procéder à la compilation avec votre outil CI préféré, puis télécharger votre projet dans l'instance Pages pour le déploiement.

Pendant la période de version Bêta, nous avons compris qu'avec vos équipes vous accordiez de la valeur à la visibilité avant toute chose. Comme pour Cloudflare Workers, nous avons prévu un moyen facile pour vous d'observer vos fonctions tandis qu'elles traitent vos requêtes ; plus vite vous prenez conscience d'un problème, plus vite vous pouvez réagir.

Vous pouvez désormais facilement journaliser vos Functions en adaptant vos journaux. Pour des informations de base telles que le résultat ou l'IP de requête, vous pouvez accéder au tableau de bord Pages afin d'obtenir les journaux correspondants.

Pour des filtres plus spécifiques, vous pouvez utiliser

pour recevoir un flux en direct de la console et les journaux d'exception pour chaque requête reçue par votre Function.

wrangler pages deployment tail

Dans le tableau de bord, Pages regroupe les données pour vos Functions sous la forme de mesures d'aboutissements/mesures de requêtes et le statut d'invocation. Vous pouvez vous reporter au tableau de bord de vos mesures non seulement pour mieux comprendre votre utilisation par projet, mais également pour contrôler l'état de vos fonctions en détectant les volumes d'aboutissements/erreurs.

Liaisons de stockage

Vous voulez passer véritablement au full-stack ? Nous savons combien il est difficile de trouver une solution de stockage qui réponde à vos besoins et puisse s'inscrire dans votre écosystème ; et pourtant cela pourrait être facile.

Avec Functions, vous pouvez profiter d'une large gamme de produits de stockage dont Workers KV, Durable Objects, R2, D1 et, très prochainement, Queues et Workers Analytics Engine ! Il vous suffit de créer votre espace de noms, compartiment ou base de données et d'ajouter votre liaison au tableau de bord Pages pour mettre en service votre site-full stack en quelques clics.

De l'ajout d'un système de commentaires rapide à la mise en place de votre propre authentification, en passant par la création de sites de commerce électronique reposant sur une base de données, l'intégration des produits existants dans notre plateforme de développement permet d'ouvrir la voie à un ensemble exponentiel de scénarios d'utilisation pour votre site.

Liaisons de secrets

En plus d'ajouter des variables d'environnement disponibles à votre projet à la fois au moment du développement et de l'exécution, vous pouvez désormais également lui ajouter des « secrets ». Il s'agit de variables d'environnement chiffrées qui ne peuvent pas être visualisées par n'importe quelle interface de tableau de bord et qui se révèlent particulièrement intéressantes pour héberger des données sensibles telles que les jetons d'API ou les mots de passe.

Notre objectif avec Pages est de toujours vous suivre lorsqu'il s'agit des outils que vous aimez utiliser. Au cours de cette période de version Bêta, nous avons observé des schémas récurrents dans la manière dont vous employez Functions pour l'intégration de services tiers courants. Les Plug-ins Pages, nos fragments de code prêts à l'emploi, permettent une utilisation immédiate pour le développement de l'écosystème de votre choix autour de votre application.

Concrètement, les plug-ins pour Pages sont des éléments de code runtime réutilisables et personnalisables susceptibles d'être intégrés à n'importe quel endroit de votre application Pages. Il s'agit d'une Function Pages « composable », qui accorde aux plug-ins la pleine puissance de Functions (c'est-à-dire Workers), y compris la capacité de configurer des intergiciels, des itinéraires paramétrés et des ressources statiques.

Avec les plug-ins de Pages, vous pouvez procéder à une intégration avec pléthore d'applications tierces ; y compris les applications officiellement prises en charge Sentry, Honeycomb, Stytch, MailChannels et plus encore.

Toujours dans l'idée de rejoindre les développeurs là où ils se trouvent, nous avons pensé aux infrastructures Javascript. Toujours prompte à défendre les infrastructures largement adoptés, mais aussi celles à venir, notre équipe travaille avec de nombreux auteurs d'infrastructures pour vous donner l'occasion de jouer avec leurs nouvelles technologies et de les déployer immédiatement sur Pages.

Désormais compatible avec Next.js 13 et plus encore !

Récemment, nous avons annoncé que nous prenions en charge les applications Next.js qui entrent dans le cadre d'Edge Runtime. Aujourd'hui nous sommes heureux d'annoncer que nous sommes désormais compatibles avec Next.js 13. Next.js 13 ajoute à notre infrastructure Next.js certains des paradigmes modernes les plus demandés, notamment le routage imbriqué, les composants serveur et le streaming de React 18.

Vous préférez une autre infrastructure ? Aucun problème.

Passez au full-stack sur Pages pour profiter de l'avantage du rendu côté serveur (SSR) avec une des nombreuses infrastructures officiellement prises en charge telles que Remix, SvelteKit, QwikCity, SolidStart, Astro et Nuxt. Vous pouvez lire notre publication de blog sur la prise en charge de SSR sur Pages et sur la façon de commencer avec ces infrastructures.

Certes les fonctions Pages sont émulées par Workers, nous comprenons toutefois que la valeur nominale n'est pas tout à fait la même pour les deux. Cependant, pour les utilisateurs existants, qui utilisent peut-être Workers et auraient envie d'essayer Cloudflare Pages, nous avons prévu un chemin d'accès direct qui vous permettra de démarrer plus rapidement.

Si vous avez déjà un Worker unique et que vous souhaitez une méthode facile pour passer au full-stack sur Pages, vous pouvez utiliser le mode avancé des Functions de Pages. Générez un module Worker ES appelé _worker.js dans le répertoire de sortie de votre projet et procédez au déploiement ! Ce processus peut se révéler particulièrement avantageux si vous êtes auteur d'infrastructure ou si vous travaillez sur un scénario d'utilisation plus complexe qui ne suit pas la structure de fichiers que nous avons fournie.

Ainsi, aujourd'hui tandis que nous annonçons la mise en disponibilité générale de Functions, nous sommes très heureux de permettre à votre trafic d'évoluer. Pendant la période de la version Bêta, nous avons imposé une limite quotidienne de 100 000 requêtes gratuites afin de vous permettre d'essayer la fonctionnalité. La limite de 100 000 requêtes gratuites par jour reste en vigueur, mais vous pouvez désormais payer pour ne plus avoir aucune limite.

Dans la mesure où les Functions ne sont que des Workers « spéciaux », après cette annonce vous allez voir l'utilisation des Functions apparaître sur vos factures dans le cadre de l'abonnement payant à Workers ou via le contrat Workers Enterprise. À l'instar de Workers, dans le cadre d'une offre payante, vous avez la possibilité de choisir entre deux modèles d'utilisation, par regroupement ou sans limite, et vous serez facturé en conséquence.

Pour que Pages reste le « cadeau de Cloudflare à Internet », vous bénéficierez d'un nombre illimité de requêtes gratuites pour les ressources statiques, et vous serez essentiellement facturé pour les requêtes dynamiques. Vous pouvez en lire davantage sur la facturation de Functions dans notre documentation.

Pour vous mettre en route, consultez les documents concernant Pages Functions et les articles de notre blog qui concernent certaines des meilleures infrastructures à utiliser pour déployer votre première application full-stack. Lorsque vous commencerez à créer vos projets, n'oubliez pas de nous le faire savoir dans le canal #functions sous Pages dans notre Discord Cloudflare Developers. Joyeux développement !