Originally aired on June 9, 2020 @ 5:30 AM - 6:00 AM EDT
Durant cette session, nous allons voir comment déployer votre blog Hugo rapidement sur les serveurs Edge de Cloudflare. Nous couvrirons les sujets suivants :
Workers Sites
Hugo et Wrangler
Intégration continue en utilisant Github Actions pour publier les nouveaux articles sur le Edge de Cloudflare.
(Presented in French)
Bonjour tout le monde, bienvenue sur Cloudflare TV. Alors j'espère que vous m 'entendez bien et que la vidéo également est bonne. Du coup, bienvenue à tous sur Cloudflare. Aujourd'hui, j'ai le plaisir de vous présenter comment déployer son blog sur Cloudflare. Alors tout d'abord, avant de commencer cette présentation, je voulais revenir sur quelques points. Alors tout d'abord, cette présentation va être un peu technique. Je vais vous présenter un peu quelles sont les grandes étapes pour pouvoir utiliser Cloudflare et du coup déployer son blog sur Cloudflare et littéralement sur les infrastructures de Cloudflare. Alors comment est venue cette idée de sélection? Alors tout d'abord, moi -même j'ai un blog actuellement et je cherchais avant tout la simplicité. Simplicité en termes de déploiement, en termes de management, donc du coup mise en place et mise en ligne de nouvelles rubriques et du coup rien de mieux que d 'utiliser Cloudflare. Alors, ce qui me concerne, donc Vincent Slas, je suis solution engineer à Cloudflare. Donc je suis basé actuellement à Londres. Donc le métier de solution engineer à Cloudflare, c'est être en charge des aspects techniques aussi bien en avant-vente qu'en après-vente. Alors avant de commencer, d 'aller au travers des différentes étapes pour pouvoir déployer votre blog sur Cloudflare, je voulais revenir un peu sur ce qu'est Cloudflare, une présentation un peu générale et puis après regarder un peu plus de manière un peu plus précise le produit Worker sur lequel on va utiliser. Donc, qu'est-ce que Cloudflare? Cloudflare, c'est avant tout un réseau global, donc nous sommes actuellement sur plus de 200 villes, donc c'est un réseau de type Anycast et nous avons actuellement trois principales produits qui vont tourner autour de la sécurité, de la performance et de la disponibilité. Donc, l'ensemble de ces produits vont être à destination de vos propriétés web afin de les protéger, d'optimiser le trafic et de délivrer le maximum à vos clients tout autour du monde. Donc actuellement, nous avons une capacité réseau de 35 terabytes, on gère plus de 45 milliards d'événements de sécurité par jour, c'est ce qu'on appelle un peu le système immunitaire, donc ces événements de sécurité nous permettent d'apprendre à être protégé au mieux l'ensemble des propriétés web qui utilisent Cloudflare. Et également pour la partie de performance, ce qui va être important, c'est la partie interconnection avec les réseaux, donc que ce soit des réseaux au niveau de vos providers, donc des réseaux Internet que vont délivrer vos opérateurs, donc que ce soit du Free, du Orange, etc., mais également être aussi bien interconnectés avec les réseaux de datacenters sur lesquels il va y avoir vos propriétés web. Donc l'ensemble de ces 200 points de présence autour du monde font tourner l'ensemble de nos services, aussi bien la partie sécurité, performance, donc protection des DOS, notre partie protection applicative au niveau Firewall et l'ensemble de ces solutions que vous allez pouvoir retrouver. Aujourd'hui, je vais plus m'attarder sur une solution, on va dire un ensemble de solutions qui est la partie Workers, qui est en fait notre plateforme de type serverless. Donc qu'est -ce que ça veut dire? Ça veut dire que nous allons faire tourner des logiques sur nos datacenters et nous allons pouvoir utiliser du coup des services et notamment la partie Workers case. Donc la solution Workers a été designée avant tout pour être au niveau sécurité et au niveau performance. Alors pourquoi la sécurité est importante? Tout d'abord, comme je vous l'ai dit, ces logiques vont tourner sur nos datacenters, donc il faut s 'assurer que ces logiques vont rester segmentées et du coup vont être au maximum sécurisées. Et de plus, vous allez utiliser l'infrastructure de Cloudflare, donc il faut s'assurer également que d'un point de vue sécurité, on soit optimal là -dessus. Partie performance, donc quand on va utiliser les plateformes de serverless, ce qui est important, c'est ce qu'on appelle le call start, donc c'est-à-dire le temps que va mettre le script à pouvoir se charger lors du premier appel. Donc actuellement, au niveau de la plateforme Workers, c'est quelque chose sur lequel nous travaillons fortement et nous avons actuellement un call start qui est de 5 millisecondes. Donc aujourd'hui, je vais vous parler de quelque chose de spécifique qui est la partie Workersite, du coup qui va être une combinaison entre Workers plus la partie Workers KV. Donc la Workers KV, ça veut dire Key Value, ça va être un espace dans lequel vous allez pouvoir stocker l'ensemble de vos fichiers. Donc en ce qui nous concerne aujourd'hui, ça va être vos pages HTML, vos pages de type CSS et l'ensemble de votre architecture web pour pouvoir délivrer votre blog. Alors, avant de passer sur la partie de vous montrer un peu comment mettre en place tout ça, je voulais revenir un peu sur les prérequis pour cette démo, donc les étapes importantes que vous devez avoir. Donc tout d'abord, avoir un compte et un domaine sur Cloudflare. Donc en ce qui me concerne aujourd'hui, je vais utiliser venv.tech qui est du coup un domaine que j'utilise pour cette démo aujourd'hui. Il faut avoir souscrit à l 'offre Workers illimitée. Donc vous avez le récapitulatif à droite, j'ai pris un petit screenshot sur la partie Workers illimitée. Celle-ci est importante car elle débloque la partie KV qu'on va utiliser aujourd'hui. Ensuite, j'ai fait le choix d'utiliser GitHub pour la partie automatisation, donc on verra ça dans un second temps. Et également, j'ai fait le choix d'utiliser Hugo qui est une plateforme, un générateur de sites web statique. Alors l'avantage de Hugo, c'est qu'on a énormément de thèmes qui sont open source qu'on va pouvoir intégrer de manière très facile au niveau de votre plateforme. Et du coup, ça va vous permettre d'avoir un maximum de personnalisation. Et enfin, Wrangler, j'en ai pas encore parlé, mais Wrangler va être l'interface en ligne de commande qui va permettre d'orchestrer la partie Workers et Workers KV afin que ce soit de manière la plus transparente pour vous en termes d 'utilisation de la plateforme Cloudflare. Alors j'espère que tout ça est clair. Je rappelle que vous pouvez poser des questions tout au long de cette session. Donc c'est sur livestudio.com et ce que je vous propose maintenant, c'est de passer un peu sur la partie démo et du coup mettre les mains dedans et regarder un peu comment on fait tout ça. Alors j'espère que vous voyez bien mon éditeur. Si ce n 'est pas le cas, je vais essayer de maximiser au maximum mon écran. Et puis je vais essayer un maximum de parler dessus, comme ça, même si vous ne voyez pas très bien, j'espère que ma voix pourra vous guider au travers des actions que je fais. Donc première chose qu'on va utiliser, c 'est avant tout Hugo. Donc Hugo ici, c'est du coup l'architecture que j'ai utilisée. Donc pour installer Hugo, il suffit d 'utiliser du coup Brew qui est sur votre laptop. Une fois que vous avez Hugo, vous allez pouvoir créer un site de manière très facile en faisant Hugo, new site, quick start par exemple. Par exemple, désolé pour l'anglicisme. Et il va vous créer directement une architecture. Alors ce qui va être important pour nous aujourd 'hui, c'est la partie content que vous pouvez voir à gauche qui va contenir l 'ensemble de vos articles. Donc au niveau de Hugo, vous allez créer vos articles en markdown. Donc typiquement, ici, ça va être un titre. Je vais pouvoir ajouter un titre de niveau 2 en rajoutant deux hashtags. Voilà, par exemple, titre de niveau 2. Et du coup, ça va être assez simple en termes d'écriture et ça va être assez lisible sans avoir de fleuritures autour. Donc qui est parfait pour l 'écriture d'un post. On veut se concentrer sur le contenu. On ne veut pas se concentrer sur la partie design. Donc c 'est parfait. Deuxième chose, au niveau d 'Hugo, vous allez installer un thème. Le thème qui va être le design de votre site. Et ensuite, Hugo va se charger lui-même d 'intégrer vos articles et créer un markdown. Il va les translater en HTML, en CSS et va faire un beau design pour vous par rapport au thème que vous avez choisi. Dernière chose sur Hugo, qui est le fichier de configuration. Donc une fois que vous avez installé votre thème que vous avez écrit, on va dire, un premier article, vous allez devoir regarder un peu quelle est la configuration que vous avez au niveau de Hugo. Donc ici, chose très simple, c'est des configurations qui sont propres à mon thème. Ce qui va être important ici, c'est de bien spécifier le thème. Et ensuite, du coup, on va pouvoir regarder un peu quel est le résultat de ce que vous venez de faire au niveau de Hugo. Pour ça, nous allons utiliser hugoserver -d, qui va vous permettre de générer les fichiers statiques et va vous permettre de regarder en local quel va être le résultat de votre site. Donc j'ai déjà ouvert les pages ici. Et du coup, je me suis déjà connecté. Et alors ce que vous pouvez voir, c'est qu'ici j'ai un site en local avec tous mes blog posts que j'ai mis. Et vous pouvez voir que le contenu qui a été généré au niveau du site de Hugo est bien celui que j'ai écrit. Voilà, il a fait une belle présentation par rapport à mon thème que j'ai choisi. C'est parfait, c'est ce que je voulais. Donc maintenant, ce qu'on va faire, c'est on va regarder la partie Wrangler. Et du coup, la partie comment le configurer Wrangler pour mettre en place le site Hugo que vous venez de voir en local sur Cloudflare et du coup sur l'ensemble des 200 data centers autour du monde. Donc la première chose que vous allez d'abord devoir faire, c'est faire un Wrangler init-site qui va vous créer en fait deux choses. Donc moi je l'ai déjà fait, je ne vais pas le refaire ici. Mais une première chose qui va être un fichier de configuration qui s'appelle Wrangler.toml et également un dossier qui s'appelle workersite dans lequel vous allez voir certains javascripts, etc. Donc je vais revenir un peu plus dessus. Donc tout d'abord, la partie configuration. Qu'est-ce qui va être important ? Deux choses. Ici, vous pouvez voir que vous avez un account ID. Donc du coup, vous allez devoir spécifier cet account ID. Vous avez également une zone ID que vous allez devoir spécifier. Donc on va revoir un peu tout ça. Où est -ce qu'on va pouvoir trouver cette information sur votre compte Cloudflare ? Vous avez une route. La route va permettre de dire où est-ce que vous allez déployer votre blog, donc votre site Hugo. Ici, j 'ai créé mon blog.vans.tech pour pouvoir déployer sur ce chemin et ce sous-domaine. Et enfin, la dernière chose importante, ça va être de spécifier le bucket. Donc en fait, Hugo, lorsqu'il va générer les pages statiques, il va les mettre dans le dossier public. Donc voilà. Donc c'est important ici de spécifier que l'ensemble de votre site est situé dans public afin que Wrangler puisse pousser tout ça dans la partie clé vie et soit disponible sur Cloudflare. Alors maintenant, je vais passer sur l'interface de Cloudflare et on va voir un peu où est-ce qu'on peut retrouver les informations que je vous ai présentées. Alors quand vous êtes connecté sur votre dashboard Cloudflare, vous avez une partie overview et puis on va dire l 'ensemble des produits Cloudflare qui sont disponibles ici. Donc là ici, vous avez quelques informations sur le nombre d 'utilisateurs, le nombre de requêtes, etc. Mais ce qui nous intéresse ici, c'est la partie zone ID et Outcomes ID que vous allez pouvoir retrouver du coup sur le bandeau droit ici dans la partie API. Donc vous allez juste devoir faire des copiés -collés au niveau de votre fichier de configuration Wrangler. Parfait. Du coup, une fois que vous avez fait ça, ce qui va être important, c'est également de générer un token API qui va vous permettre du coup de configurer et de piloter votre compte Cloudflare. Donc pour cela, vous pouvez aller dans votre account, sélectionner API token et ici vous allez avoir directement les APIs que vous allez utiliser. Vous allez pouvoir créer pour la partie Workers qui va être directement disponible ici. Parfait. Donc une fois que vous avez tout ça, on va configurer, dernière chose sur le dashboard Cloudflare, on va configurer le subdomaine, donc mon blog pour pouvoir être proxifié et du coup servir bien comme il faut mon workers. Donc pour ça, vous allez créer mon blog ici. L'IP n'a peu d 'importance. Ce qui va être très important, c'est la partie proxy, donc de bien proxifier cette partie-là. Parfait. Alors je vais revenir maintenant ici sur ma configuration. Donc j'ai fait un changement au niveau de mon site. Donc je vais juste recréer bien comme il faut mes pages statiques. Pour ça, je vais créer, je vais dire Hugo qui va permettre de régénérer mes fichiers statiques dans le dossier point statique. Ensuite, je vais pouvoir publier tout ça. Donc très simplement en utilisant Wrangler Publish. Et en fait, ce que vous allez voir ici, c 'est que du coup, Wrangler va construire l 'ensemble de tout ce qu'il a besoin et va l'envoyer ensuite à Cloudflare. Cloudflare va configurer votre compte pour la route, donc mon blog.vens.tech et va également pousser l'ensemble des fichiers statiques dans la partie que c'est ici. Et alors comment est-ce que, voilà, maintenant ça a été publié. Donc maintenant, on va pouvoir aller sur mon site ici, donc mon blog.vens .tech. Donc vous voyez bien que tout a été bien poussé. Et si on va sur mon premier blog post, on voit bien que la modification que j'ai apportée, titre de niveau 2, a bien été affichée ici. Donc là, on est très content. C'est parfait. On a du coup Hugo qui fonctionne en local. On peut le pousser de manière très simple avec Wrangler. Maintenant, je vais aller un petit peu plus loin et aller dans la simplicité et être agnostique par rapport à la plateforme que je vais utiliser. En effet, quand je vais vouloir publier des articles, je ne vais pas vouloir être tout le temps sur mon laptop. Je veux pouvoir l 'éditer sur ma tablette, sur mon téléphone, un peu partout où je veux. Et donc pour ça, on va utiliser la plateforme GitHub qui va nous permettre d'avoir un versionning de vos blog posts et également de pouvoir gérer la partie intégration continue qui est appelée GitHub Action au niveau de GitHub. Je vais passer un petit peu de temps maintenant sur la partie GitHub. Et du coup, regardez un peu où est-ce que vous allez spécifier toutes les étapes que vous avez faites. On va les mettre dans GitHub Action. Et donc pour ça, vous avez un fichier de configuration qui s'appelle main.yaml. C'est un fichier qui ressemble à cela, sur lequel vous allez définir l 'ensemble des étapes pour pouvoir arriver à la publication de votre blog. Donc là ici, on voit que je vais déclencher ces actions sur tout changement dans la branche master. Du coup, je garde simplicité, une seule branche et du coup, chaque nouveau push, je vais déclencher ces actions. Ici, je vais utiliser Ubuntu Latest qui est du coup une version de Ubuntu qui a été pré-packagée par GitHub avec un certain nombre d'outils qui est directement installé dessus. Première action, ça va être de faire un checkout, c 'est-à-dire de récupérer l'ensemble de tout ce que vous avez au niveau de votre master sur cette image Ubuntu. Ensuite, d 'installer Hugo, donc exactement ce que vous feriez en local, d'installer Wrangler, toujours pareil, les mêmes étapes. Et ensuite, ça va être de créer votre site, donc Hugo, en appelant Hugo, donc c'est exactement ce que j'ai fait tout à l'heure. Et enfin, on va pousser tout ça avec un Wrangler Publish et on va spécifier l'API Token. L'API Token, vous allez pouvoir le mettre dans ce qu'on appelle un Secrets que vous pouvez retrouver sur la partie Settings au niveau de votre dépôt sur GitHub sur lequel vous allez du coup spécifier l'API Token qui va être utilisé par Wrangler. Parfait. Donc là, on a un peu les étapes. J'ai reproduit exactement les mêmes étapes sur GitHub. J 'ai un dépôt qui est public avec l 'ensemble de mes articles que vous allez pouvoir voir ici. Et du coup, maintenant, pour vous illustrer que je peux éditer un peu n'importe où, on va venir éditer un fichier, donc mon dernier blog post que vous voyez ici, mon premier post.md. Parfait. Alors, ce n'est pas la dernière version. Vous voyez bien que mon titre de niveau 2 n'apparaît pas. Peu d'importance. Ici, juste pour vous illustrer, on va écrire une phrase. Donc, c'est terminé. Je viens de déployer mon site sur GitHub et Cloudflare. Parfait. Donc, on va faire ce petit changement. Ici, du coup, je vais écrire un petit message au niveau de mon comics. Vous pouvez spécifier ce que vous voulez. Je vais pousser mon change. Et du coup, maintenant, on va regarder qu'est-ce qui se passe au niveau de la partie action de GitHub. Alors, ici, on voit que la partie action a bien été levée. On va regarder un peu plus en détail qu'est-ce qui est en train de se passer. Donc, voilà. Donc, là, la première étape, c'est la partie checkout. Donc, là, il vient juste de le faire. Maintenant, il va installer Hugo. Voilà. C'est fait. Il va installer maintenant Wrangler. Parfait. Il va construire le site. Du coup, construire le CSS et l'HTML. Il va configurer Wrangler, pousser tout ça dans Cloudflare. Voilà. Donc, c'est exactement les mêmes étapes que ce qu'on a fait en local. Et là, on voit que maintenant, tout s'est bien passé. Le job est compliqué. Et du coup, maintenant, ça devrait être live au niveau de mon site. Donc, si je retourne sur mon blog.vens.tech, on voit bien que j 'ai mon poste. On voit bien mon titre de niveau 1. On voit bien mes modifications. Tout s'est bien passé. Du coup, ici, parfait, on a pu utiliser GitHub, GitHub Action, Hugo et Wrangler pour pouvoir publier votre site sur Cloudflare avec un minimum et une simplicité que j'espère que j'ai pu illustrer durant cette session. Alors, je vais passer maintenant. Je vais regarder s'il y a quelques questions. OK. Alors, j'ai vu qu'il y avait quelques questions. Alors, il y a une question qui a été posée. OK. Donc, comment est-ce qu'on peut retrouver un peu toute cette partie documentation et regarder un peu plus en détail? Donc, pour cela, je vais vous renvoyer sur la partie developers.Cloudflare.com sur lequel vous avez une rubrique qui s'appelle Workers et sur lequel vous avez l'ensemble des étapes sur lesquelles je suis allé. Alors, peut -être de manière un peu rapide, mais du coup, ça vous permet, vous, de revenir sur l'ensemble de ces étapes et, du coup, de le faire à tête reposée un peu plus tard aujourd'hui ou dans la semaine ou même plus tard. Donc, là, ici, vous avez la partie tutoriel. Excusez-moi, ça va être Workersite, Start from an existing site. Parfait. Donc, là, ici, vous avez exactement toutes les étapes que j'ai utilisées. Alors, ensuite, j'ai une autre question, c'est est-ce qu'il est possible d'utiliser GitLab, donc une autre plateforme, Git? Alors, oui, tout à fait. Vous avez la possibilité de l'utiliser. Aucun souci là-dessus. La seule petite différence avec GitLab Action, c'est que les images de GitLab, donc pour Ubuntu, ne viennent pas avec des paquets déjà préconfigurés à l'intérieur de la VM. Du coup, vous allez devoir réinstaller tout au niveau de la partie CI-CD, donc intégration continue, développement continu de GitLab. Vous allez spécifier comment installer Wrangler, comment installer Hugo, etc. Mais c'est exactement pareil, vous allez pouvoir utiliser également GitLab. Alors, j'ai une autre question, comment faire des redirections en nombre avec Cloudflare Kali? Alors, ce n'est pas l 'objet aujourd'hui, je vois bien la question. Pour vous aiguiller, comme l'a très justement noté la personne, vous avez des templates ici que vous allez pouvoir utiliser. Donc, les redirections en masse, ici, sont faites directement au niveau de workers. Vous pouvez le faire avec Kali. Le but, ce n'est pas de vous montrer aujourd'hui, mais c'est quelque chose que vous pouvez complètement faire. Et si vous le souhaitez, je mettrai un petit blog post sur mon article en spécifiant un peu le script pour pouvoir le faire, si ça peut répondre du coup à la question et vous aiguiller. Parfait, je regarde s'il y a d'autres questions. Ok, nickel. Alors, je ne vois pas d'autres questions. Merci à tous, en tout cas, de votre participation, d'avoir regardé ce segment Cloudflare TV. J'espère que ça a été clair, que du coup, je vous ai donné des idées sur comment utiliser Cloudflare Workers plus Kali pour pouvoir pousser vos blog posts et du coup, ne plus avoir besoin d'infrastructures à maintenir un serveur Linux avec les dernières pages de sécurité. Tout ça, vous poussez sur Cloudflare, plus besoin de maintenir une simplicité d'utilisation. Voilà. J'espère que du coup, je vous souhaite une très bonne journée et puis du coup, je vais laisser la main pour le segment suivant. Merci à tous. Au revoir. Au revoir. Ok. Alors, on dit d'occuper les deux dernières minutes qui nous restent. Alors, je vais juste parler de la prochaine section qui va avoir lieu. Donc, c'est une session de 30 minutes dont le titre est « If I knew then, what I know now tells from the early Internet ». Du coup, c'est une session qui va suivre juste après moi et qui va être du coup animée par David Conrad et Paul qui est du coup, l 'inventeur de la partie DNS et ça sera modéré par Matthew Prince, du coup, notre co-founder et notre CEO au niveau de Cloudflare. Voilà. Je vous souhaite une très belle journée et à bientôt sur Cloudflare. Sous -titres réalisés para la communauté d 'Amara.org ❤️ par SousTitreur.com