Comment déployer son blog sur Cloudflare!

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 et de protéger au mieux l'ensemble des propriétés web qui utilisent Cloudflare. Et également pour la partie performance, ce qui va être important, c'est la partie interconnexion 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, 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 dosses, 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 Worker, 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 Worker case. Donc la solution Worker 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 Worker, 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 Worker site, 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é. Donc vous avez le récapitulatif à droite. J'ai pris un petit screenshot sur la partie Workers Illimité. 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 ça, on verra ça dans un second temps. Et également, j'ai fait le choix d'utiliser Hugo. 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 en fait 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. C 'est sur livestudio.Cloudflare.tv. Et ce que je vous propose maintenant, c'est de passer un peu sur la partie démo et du coup un peu 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 Brou 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 contents 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, on va pouvoir regarder un peu quel est le résultat de ce que vous venez de faire au niveau de Hugo. Donc 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, hop, 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, hop, je n'ai pas sauvegardé comme il faut ici. Non, on va sauvegarder. Et vous allez voir du coup que ça apparaît en live. Parfait. Du coup, on voit bien 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 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 JavaScript, 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 des 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 Vrangler puisse pousser tout ça dans la partie suivie 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 copier-coller au niveau de votre fichier de configuration Vrangler. 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électionnez API Token, et ici vous allez avoir directement les API que 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 la 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. Donc pour ça, je vais créer, je vais dire Hugo, qui va permettre de régénérer mes fichiers statiques dans le dossier .static. 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 au niveau de, va configurer votre compte pour la route, donc mon blog .vens.tech et va également pousser l 'ensemble des fichiers statiques dans la partie .static. 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, en fait, 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, 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 spécifier l'API Token qui va être utilisée 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, hop, voilà, hop, 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 pourrez 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, hop, 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 toutes ces parties documentation et regarder un peu plus en détail ? 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 ? 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. On voit 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. Sous-titrage ST' 501 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-titrage ST' 501 Sous -titrage ST' 501 Sous-titrage ST' 501