00:00:00Bonjour à tous.
00:00:24Bienvenue à la session en direct de la communauté Vercel de cette semaine.
00:00:27Je suis Amy et je suis accompagnée de Maya aujourd'hui.
00:00:31Bonjour tout le monde.
00:00:32Nous travaillons toutes les deux dans l'équipe communautaire de Vercel.
00:00:35Nous diffusons ce live sur X et YouTube,
00:00:37mais si vous voulez poser des questions,
00:00:39n'oubliez pas de vous connecter sur [community.vercel.com/live](https://community.vercel.com/live)
00:00:43pour rejoindre le chat et vous assurer que nous voyons vos questions.
00:00:47Absolument. Si vous passez du temps sur notre chat,
00:00:50petit rappel amical : restez respectueux,
00:00:52suivez notre code de conduite,
00:00:54et aidez-nous à faire de cet espace un lieu agréable pour tous.
00:00:56La session d'aujourd'hui est consacrée au CDN de Vercel.
00:01:00Le saviez-vous ? Si vous nous regardez depuis notre plateforme,
00:01:04celle-ci utilise justement le CDN de Vercel. C'est très "meta".
00:01:07Si cela vous intrigue,
00:01:10Jacob Parris, qui fait partie de l'équipe d'ingénierie DX,
00:01:13a récemment publié un excellent article de blog
00:01:15sur cette implémentation sur le site de Vercel.
00:01:19>> Je viens de mettre le lien dans le chat,
00:01:22donc si vous voulez le lire, il est là.
00:01:25Ensuite, si vous avez suivi l'actualité,
00:01:28nous avons publié beaucoup de nouveautés dans
00:01:30notre journal des modifications concernant le CDN Vercel.
00:01:33Nous voulions donc inviter des membres
00:01:35de l'équipe pour vous en dire plus,
00:01:37vous expliquer comment nous l'avons construit,
00:01:40comment l'utiliser et toutes les fonctionnalités disponibles.
00:01:43Accueillons donc sur scène
00:01:45Mark, Andrew et Yash pour vous en parler.
00:01:48On vous laisse la place, les gars.
00:01:51>> Merci Amy et Maya.
00:01:55Bonjour à tous, je m'appelle Mark.
00:01:57Je suis ingénieur logiciel dans l'équipe CDN,
00:01:59et je suis ici avec Andrew et Yash.
00:02:03Je me trouve dans les superbes
00:02:06bureaux de Vercel à San Francisco, il fait assez chaud cette semaine en Californie.
00:02:09Aujourd'hui, je voulais vous parler des
00:02:12récentes fonctionnalités du CDN sur lesquelles nous avons travaillé.
00:02:15Je suis donc ravi d'en discuter.
00:02:18Tout d'abord, je vais présenter brièvement le CDN de Vercel.
00:02:21Je vais partager quelques diapositives à ce sujet,
00:02:25puis je passerai la parole à Andrew,
00:02:27qui commencera par une démonstration du tableau de bord CDN.
00:02:32Génial. Je voulais vous expliquer un peu comment fonctionne le CDN de Vercel.
00:02:39Vous ne le savez peut-être pas, mais chaque projet
00:02:42déployé sur Vercel utilise le CDN de Vercel.
00:02:44C'est inclus gratuitement.
00:02:46Mais comme c'est transparent, on ne sait pas forcément comment ça marche.
00:02:51Le CDN de Vercel
00:02:54reçoit les requêtes de votre client,
00:02:56de votre navigateur ou de votre machine,
00:02:58et les dirige vers un point de présence.
00:03:01Ces points de présence sont répartis partout dans le monde.
00:03:03Nous en avons plus de 125, distribués géographiquement.
00:03:07Ensuite, la requête transite vers une région Vercel où nous terminons le TLS,
00:03:14puis nous traitons la demande.
00:03:16C'est là que nous effectuons la mise en cache.
00:03:18Nous gérons aussi le routage.
00:03:19S'il n'y a pas de correspondance en cache,
00:03:21nous pouvons la transmettre à la région de la fonction pour
00:03:25la régénération statique incrémentale (ISR) via une fonction, etc.
00:03:29Je détaillerai ce schéma plus tard quand on parlera du cache.
00:03:33Grâce à cela, vous bénéficiez de l'entrée de trafic,
00:03:35mais aussi d'un pare-feu, du routage,
00:03:38et de fonctions de gestion de trafic comme la protection contre le décalage,
00:03:40les déploiements progressifs, les micro-frontends et bien plus.
00:03:44Alors, qu'est-ce qui rend le CDN de Vercel si spécial ?
00:03:49Le CDN de Vercel comprend nativement le code des frameworks.
00:03:52Cela signifie que lorsque vous déployez un projet sur Vercel,
00:03:56votre code et
00:03:57votre configuration sont automatiquement traduits en
00:04:00artefacts que le CDN de Vercel traite nativement.
00:04:04Avec la plupart des autres CDN, vous devez tout configurer vous-même.
00:04:07Ici, c'est automatique si vous utilisez l'un des frameworks.
00:04:10Vous bénéficiez d'une accélération intégrée des requêtes
00:04:13et de la haute disponibilité dont je parlais.
00:04:16Vous avez aussi accès à l'ISR,
00:04:19soit la régénération statique incrémentale.
00:04:21C'est géré nativement,
00:04:23ce qui permet de régénérer des pages sans redéployer
00:04:27votre code, simplement en envoyant
00:04:29une requête API ou un webhook ciblant des pages spécifiques.
00:04:34De plus, vous disposez d'une protection DDoS
00:04:36illimitée et permanente pour chacun de vos projets.
00:04:40C'est gratuit et cela gère les menaces de façon cohérente,
00:04:46avec un pare-feu d'application web (WAF) configurable et une gestion des bots.
00:04:51Ces derniers mois,
00:04:53nous avons travaillé sur plusieurs nouvelles fonctionnalités
00:04:56disponibles dans le tableau de bord Vercel,
00:05:00et nous allons les passer en revue aujourd'hui.
00:05:02Elles incluent une toute nouvelle expérience du tableau de bord CDN,
00:05:06la possibilité de définir des règles de routage au
00:05:09niveau du projet sans nécessiter de nouveau déploiement,
00:05:12un tout nouvel onglet de mise en cache,
00:05:13ainsi que la gestion de redirections massives (jusqu'à un million).
00:05:18Sur ce, je passe la parole à Andrew,
00:05:22qui va nous présenter le tableau de bord CDN. Andrew ?
00:05:27>> Merci Mark. Bonjour.
00:05:29Salut tout le monde, je suis Andrew Gazek.
00:05:31Je suis ingénieur logiciel dans l'équipe CDN, comme vous pouvez le deviner.
00:05:36Je suis basé dans le New Hampshire.
00:05:38Aujourd'hui, il fait environ 2 degrés avec du soleil, c'est encore assez froid.
00:05:45J'attends avec impatience les beaux jours de l'été.
00:05:49Aujourd'hui, je vais partager mon écran
00:05:53et vous montrer une petite application de démonstration
00:05:56que nous avons construite pour cette session.
00:05:59C'est une application Next.js.
00:06:02Elle contient plusieurs routes pour un blog.
00:06:08On peut voir un tableau de bord.
00:06:10Il y a une route API qui renvoie des données, etc.
00:06:16Mais ce n'est pas ce qui nous amène.
00:06:18Nous sommes ici pour les changements du tableau de bord.
00:06:22Dans le tableau de bord Vercel,
00:06:25vous remarquerez maintenant un nouvel onglet "CDN" ici.
00:06:28Si vous cliquez dessus,
00:06:30cela vous mène à une page d'aperçu qui liste
00:06:35toutes les régions Vercel qui
00:06:39servent actuellement votre projet sur la période spécifiée.
00:06:45Ici, nous avons les 12 dernières heures.
00:06:47On voit que le trafic venant de San Francisco et
00:06:49Washington arrive sur notre site.
00:06:52Vous pouvez survoler ces éléments pour plus de détails.
00:06:55Vous pouvez ouvrir l'observabilité
00:06:58pour approfondir l'analyse des données de trafic.
00:07:04Ce qui est cool, c'est qu'on peut afficher une carte en 3D,
00:07:08revenir à la 2D,
00:07:10et voir d'autres données d'observabilité ici,
00:07:17qui renvoient également aux pages d'observabilité spécifiques.
00:07:22Voilà pour la page d'aperçu.
00:07:27Elle sert à donner un instantané du
00:07:30trafic de votre projet ainsi qu'à
00:07:35montrer où vos fonctions sont situées.
00:07:38On voit que la région des fonctions de ce projet est Washington.
00:07:44Ensuite, je vais vous montrer les redirections.
00:07:48Les redirections massives (bulk), pardonnez-moi.
00:07:52Oh non, c'était censé fonctionner.
00:08:00Voyons voir. Je vais essayer un autre projet.
00:08:07D'accord, essayons un autre projet.
00:08:18Désolé pour ce désagrément.
00:08:22Nous avons ce projet de redirections massives.
00:08:27Essayons d'y ajouter quelques redirections.
00:08:30Pour créer une redirection,
00:08:35allez sur cette page et cliquez sur "Manual".
00:08:37Disons que je veux que "/demo" redirige vers,
00:08:44voyons, "/about/blog/2020",
00:08:51quelque chose comme ça.
00:08:57Cliquez sur "Create", ça se crée en arrière-plan,
00:09:02puis cette fenêtre de révision des changements s'affiche.
00:09:07Pour l'instant, ces changements ne sont pas en production.
00:09:11Ils sont dans un environnement de staging,
00:09:13et vous pouvez tester la nouvelle redirection ici.
00:09:18On clique, et bon, cette page n'existe pas.
00:09:24Mais voilà comment ça fonctionne.
00:09:27Si vous voulez publier en production, cliquez sur "Publish".
00:09:30Si vous voulez rester en staging, cliquez sur "Cancel",
00:09:34et vous pouvez voir les modifications de staging ici.
00:09:39Si nous publions ceci en production,
00:09:42ces changements seraient appliqués.
00:09:45Nous devrions le voir en production.
00:09:58Maintenant, vous pouvez faire des recherches.
00:10:01Vous pouvez consulter votre historique.
00:10:05Vous pouvez comparer les changements en direct avec les précédents,
00:10:14et vous pouvez restaurer cette version si vous le souhaitez.
00:10:17Cliquez sur "Restore", et on verra que "demo" n'existe plus.
00:10:26Parfait. Super. Je passe maintenant la main à Yash pour sa démo.
00:10:34>> Merci Andrew. Bonjour tout le monde.
00:10:38Je m'appelle Yash. Je suis stagiaire ingénieur dans l'équipe CDN,
00:10:42et je suis également basé au siège de San Francisco.
00:10:55Je suis à l'Université de Californie à San Francisco.
00:10:58Je suis stagiaire ingénieur à l'Université de Californie à San Francisco.
00:11:03Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:11:08Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:11:14Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:11:18Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:11:23Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:11:26Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:11:32Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:11:37Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:11:41Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:11:46Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:11:50Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:11:57Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:12:02Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:12:07Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:12:13Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:12:17Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:12:22Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:12:27Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:12:32Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:12:37Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:12:41Je suis aussi stagiaire ingénieur à l'Université de Californie à San Francisco.
00:12:45Si nous devions faire la même chose en code, il faudrait redéployer le projet.
00:12:49Mais maintenant, c'est instantané.
00:12:53Je vais créer une deuxième route. Celle-ci sera un peu plus complexe.
00:12:56Au lieu de remplir le formulaire, je vais taper ce que je veux ici.
00:13:00Nous allons utiliser l'IA pour générer la route.
00:13:02J'ai un tableau de bord et j'en crée une version 2 que je veux déployer progressivement uniquement pour les utilisateurs bêta.
00:13:08Je peux donc réécrire notre tableau de bord vers la version 2.
00:13:14Voyons si l'utilisateur possède un cookie bêta défini sur “true”.
00:13:21Maintenant, nous pouvons générer la règle, et en quelques secondes, l'IA devrait remplir le formulaire pour nous.
00:13:27Jetons un œil à la règle créée. Elle réécrit “dashboard” vers “dashboard v2”.
00:13:32Cela signifie que l'utilisateur verra toujours “/dashboard” dans son URL,
00:13:35mais le contenu affiché proviendra du nouveau tableau de bord.
00:13:39Et il y a cette condition ici. Cela signifie que la règle de réécriture ne s'appliquera
00:13:43que si l'utilisateur a un cookie nommé “beta” dont la valeur est “true”.
00:13:46S'ils ont ce cookie, ils verront le nouveau tableau de bord, sinon ils verront l'ancien.
00:13:53Et encore une fois, nous pouvons tester cela très rapidement.
00:13:58et que nous rafraîchissons, on voit le nouveau tableau de bord, alors que l'URL est toujours “/dashboard” et non “/dashboard/v2”.
00:14:09새로고침을 해보면 새로운 대시보드가 보이지만, URL은 여전히 /dashboard/v2가 아닌 /dashboard인 것을 확인할 수 있습니다.
00:14:16C'est parce qu'on utilise une réécriture (rewrite) au lieu d'une redirection, et on peut maintenant la publier.
00:14:22Enfin, la dernière règle de réécriture que je veux vous montrer concerne les en-têtes de mise en cache.
00:14:26C'est un élément que vous pouvez configurer pour améliorer les performances de votre site,
00:14:30et je souhaite particulièrement optimiser nos images statiques.
00:14:33Je peux donc indiquer que nous voulons optimiser le cache pour les images statiques,
00:14:41en fixant l'en-tête “cache-control” sur “public, max-age=31536000, immutable” pour nos images.
00:14:52Là encore, nous pouvons générer la règle grâce à l'IA.
00:14:55Nous créons ainsi cette règle qui appliquera un cache d'un an à toutes les images.
00:14:59Ainsi, au lieu que le navigateur interroge votre serveur à chaque fois pour récupérer l'image,
00:15:03il tentera de la récupérer localement, ce qui améliore les performances et réduit les coûts.
00:15:08mais je pense que pour des ressources statiques, c'est la meilleure option.
00:15:11하지만 정적 자산(static assets)의 경우에는 이 방법이 가장 좋다고 생각합니다.
00:15:14Vous pouvez donc créer, puis publier la route.
00:15:19Et comme je l'ai mentionné plus tôt, toutes ces routes peuvent également être définies dans le code.
00:15:23Nous avons ce module ici où vous pouvez
00:15:26transformer toutes les routes de votre tableau de bord en un bloc à copier-coller
00:15:30soit dans “vercel.json” soit dans “vercel.ts”, selon votre préférence.
00:15:35Le principal avantage de les mettre dans votre code est de suivre les meilleures pratiques de gestion de version,
00:15:40mais notez que si vous faites des changements ici, vous devrez redéployer votre projet pour qu'ils soient effectifs.
00:15:46L'autre chose que je veux vous montrer est la page d'historique.
00:15:49C'est similaire à ce qu'Andrew a présenté pour la page des redirections groupées.
00:15:52Vous pouvez voir les versions passées de ce qui a été modifié.
00:15:55Supposons que nous voulions annuler notre changement le plus récent, à savoir l'ajout de la règle de cache.
00:16:00On peut le restaurer immédiatement en cliquant simplement sur ce bouton “Restaurer”.
00:16:04Et presque instantanément, la règle disparaît ; on peut voir qu'elle n'est plus là.
00:16:09Vous pouvez aussi effectuer des recherches et filtrer par type pour voir, par exemple, toutes vos redirections.
00:16:14Et voilà pour l'ajout de routes au projet.
00:16:16Toutes les fonctionnalités présentées sont également accessibles via l'API, le CLI et le SDK.
00:16:22Merci beaucoup, je laisse maintenant la parole à Mark.
00:16:26Merci beaucoup Yash, c'était vraiment génial.
00:16:29J'aime beaucoup cette fonctionnalité en langage naturel.
00:16:31Je vais maintenant présenter la dernière fonctionnalité des nouveaux onglets CDN : l'onglet de mise en cache (caching).
00:16:41par défaut, avec le CDN de Vercel, vous bénéficiez du cache gratuitement en utilisant des fonctionnalités comme
00:16:46기본적으로 Vercel CDN에서는 인크리멘털(incremental) 같은 기능을 사용할 때 무료로 캐싱 혜택을 받을 수 있습니다.
00:16:53la régénération statique incrémentale (ISR), ou vous pouvez gérer les en-têtes vous-même.
00:16:56Ici, dans l'onglet “Caches” en haut, nous avons ce diagramme de mise en cache.
00:17:04Je voulais prendre un moment pour l'expliquer car, contrairement à d'autres CDN, il y a
00:17:09plusieurs niveaux ici qui vous aident à optimiser votre site.
00:17:12Si vous utilisez l'ISR, voici le diagramme que nous avons vu plus tôt.
00:17:17La requête arrive au point d'entrée le plus proche du client.
00:17:20Elle passe ensuite par la région Vercel la plus proche.
00:17:22Il y a 20 régions dans le monde où elle est confrontée au cache du CDN.
00:17:27S'il n'y a pas de correspondance ici, elle peut aller vers votre région de fonction où se trouve un autre cache
00:17:33pour votre ISR, et si la fonction doit être exécutée, il y a aussi un cache utilisable pour
00:17:39les requêtes de données vers vos backends afin de les protéger.
00:17:43Il existe différents types de requêtes que vous pouvez effectuer sur Vercel.
00:17:47Par exemple, si vous faites simplement une requête API et utilisez des en-têtes de contrôle de cache,
00:17:52si on regarde la documentation, elle utilise également le cache du CDN.
00:17:56Cela ignore le cache ISR mais conserve les caches de fonction et d'exécution.
00:18:00Enfin, si vous effectuez une réécriture sur le CDN Vercel vers une origine externe,
00:18:07disons que vous passez par un proxy vers le backend Vercel, vous profitez des avantages du CDN
00:18:14comme le cache et le pare-feu, avant que la requête ne soit transmise à l'origine externe.
00:18:18Cela nous amène à la fonctionnalité de purge du cache.
00:18:22Disons que, pour une raison quelconque, vous souhaitez revalider le contenu.
00:18:26Sur cette page, j'ai un exemple d'utilisation d'ISR avec un “fetch” utilisant un tag de cache spécifique.
00:18:36Ici, il s'appelle le tag “fetch-data”.
00:18:38On peut voir qu'il a été régénéré il y a environ une heure et qu'il utilise ce tag “fetch-data”.
00:18:45Si je veux purger cela, par exemple pour forcer la régénération de la page, j'ai plusieurs options.
00:18:54Ici, je peux purger par tag de cache en saisissant le tag “fetch-data”.
00:18:58Je peux ensuite choisir entre invalider le contenu ou le supprimer.
00:19:04L'invalidation permet de servir une page obsolète (stale) pendant qu'elle est régénérée en
00:19:09arrière-plan, c'est pourquoi nous la recommandons : cela évite la latence pour
00:19:14les utilisateurs lors de la requête suivante.
00:19:16Disons que je fais ça, je clique sur purger, “oui, je veux purger”.
00:19:21Quand je rafraîchis la page, l'heure n'a pas changé, elle s'incrémente toujours.
00:19:27Mais si je rafraîchis à nouveau, vous voyez que l'heure a été réinitialisée car elle vient d'être
00:19:33fraîchement régénérée.
00:19:34Je peux faire la même chose en supprimant le contenu.
00:19:39Si je supprime ce contenu et clique sur purger, au prochain rafraîchissement,
00:19:45l'heure est immédiatement réinitialisée.
00:19:48C'est parce qu'il s'agissait d'une revalidation bloquante : la requête suivante a attendu
00:19:53que la page se régénère avant d'être servie.
00:19:55Nous recommandons donc d'utiliser l'invalidation pour rafraîchir le contenu car elle peut servir
00:20:00le contenu obsolète pendant que la mise à jour se fait en arrière-plan.
00:20:05Vous pouvez purger par tag de cache, ou par image source de la même manière.
00:20:11Vous pouvez également purger tout le contenu du cache, et ce sur les deux niveaux
00:20:16évoqués plus tôt : soit le cache CDN, soit le cache d'exécution ou de données.
00:20:21Cela purge absolument tout, c'est une suppression totale, donc la requête suivante sera
00:20:28bloquante pour rafraîchir ce contenu.
00:20:30C'est tout ce que nous avions à présenter aujourd'hui, nous allons maintenant passer aux questions
00:20:39et n'hésitez pas à nous dire ce que vous aimeriez savoir.
00:20:43D'accord, merci.
00:20:44Salut les gars, on a quelques questions dans le chat.
00:20:50Je vais commencer par la première.
00:20:51Après avoir déployé une application Vercel, comment utiliser le CDN et quel est le coût ?
00:21:10Oui, excellente question.
00:21:11Chaque application Vercel bénéficie du CDN gratuitement. Cela signifie que lorsque vous
00:21:20déployez votre application, nous analysons automatiquement son contenu et l'optimisons pour
00:21:27qu'elle soit servie via le CDN Vercel.
00:21:28Si vous utilisez un framework compatible avec l'ISR, nous allons mapper cette génération statique (SSG)
00:21:35et placer ce contenu dans le cache ISR et le cache CDN.
00:21:40Donc, par défaut, vous n'avez probablement rien à configurer pour démarrer.
00:21:46Cependant, vous pouvez tout à fait le faire. Par exemple, si vous définissez une requête API,
00:21:53vous pouvez configurer les en-têtes “cache-control” pour personnaliser cela, ou comme Yash l'a montré,
00:22:00si vous servez du contenu statique depuis un répertoire non standard, vous pouvez définir
00:22:07une règle de mise en cache pour tout ce contenu.
00:22:11Pour les utilisateurs “Hobby”, c'est gratuit, et pour les utilisateurs “Pro”, vous avez un forfait
00:22:21de requêtes et de bande passante inclus ; au-delà, des tarifs s'appliquent selon la région,
00:22:26que vous pouvez consulter sur notre site.
00:22:27Deuxième question.
00:22:31Et si j'ai déjà un CDN devant mon application ?
00:22:38Comment passer à celui de Vercel ?
00:22:40C'est aussi une très bonne question.
00:22:44C'est quelque chose que nous pouvons tout à fait prendre en charge.
00:22:47Généralement, je pense qu'il y a deux étapes pour migrer.
00:22:54Premièrement, si vous utilisez déjà un CDN devant Vercel, vous pouvez simplement laisser passer
00:22:58le contenu pour que Vercel gère le cache et la diffusion, ainsi que
00:23:04les règles de routage. Une fois que toute cette configuration est prête sur Vercel,
00:23:10il vous suffit de modifier votre DNS pour qu'il pointe vers Vercel, afin que
00:23:15les requêtes arrivent automatiquement chez nous.
00:23:18Nous avons un guide, que nous pouvons lier en commentaire, sur la migration vers le DNS de Vercel
00:23:23sans aucune interruption de service.
00:23:25Si vous avez des questions sur les différences de configuration, nous avons plusieurs guides dans notre
00:23:33base de connaissances qui aident à faire correspondre les concepts des autres CDN
00:23:37avec ceux de Vercel ; nous pourrons fournir les liens.
00:23:41Je vais peut-être passer celle-ci à Andrew.
00:23:49Comment puis-je analyser mon trafic CDN ?
00:23:52Oui, il y a plusieurs façons.
00:23:55La première est celle que j'ai montrée tout à l'heure.
00:24:00Vous ne m'entendez pas ?
00:24:00Ah si, d'accord, merci.
00:24:04Premièrement, comme montré, vous pouvez consulter l'onglet d'aperçu du CDN qui vous donne un instantané
00:24:11du trafic de votre projet sur le CDN Vercel pour une période donnée.
00:24:17Vous pouvez également aller sur la page d'observabilité des requêtes à la périphérie (edge request) et filtrer
00:24:24tout votre trafic par différentes catégories.
00:24:34Oui, et la page d'observabilité de Vercel propose de nombreuses analyses détaillées
00:24:44que vous pouvez explorer, donc n'hésitez pas à creuser de ce côté-là.
00:24:48Une autre question récurrente : le CDN gère-t-il les attaques DDoS ou quel type de sécurité
00:24:57est ajouté ou disponible avec le CDN ?
00:25:04Oui, excellente question.
00:25:06Vercel inclut par défaut des protections illimitées contre les attaques DDoS.
00:25:12Cela signifie que c'est gratuit et que ces mesures couvrent un large éventail de
00:25:19différents types d'attaques desquelles Vercel vous protège nativement.
00:25:23Nous avons un pare-feu d'application web (WAF) et des protections aux niveaux L3, L4 et L7 afin que
00:25:32les attaques, allant d'un simple pic de requêtes sur un chemin spécifique à des attaques plus sophistiquées
00:25:39utilisant des rotations d'adresses IP ou d'autres techniques, puissent être détectées
00:25:47pour vous protéger.
00:25:48Donc oui, c'est absolument inclus par défaut pour tous les projets.
00:25:52Vous pouvez également définir des règles personnalisées si vous le souhaitez.
00:25:57C'est disponible dans l'onglet pare-feu (firewall) du tableau de bord ; c'est d'ailleurs une session
00:26:02que nous devrions absolument organiser prochainement.
00:26:04Vous pourrez y définir des règles encore plus spécifiques à votre application s'il y a
00:26:09quelque chose de particulier que vous souhaitez bloquer.
00:26:13La sécurité est un sujet vaste, on pourrait y consacrer une session entière.
00:26:22Oui, j'adore tout ce que vous faites pour réduire les frictions dans
00:26:27tous ces différents flux de travail.
00:26:29D'ailleurs, question un peu au hasard, mais j'ai vu sur Twitter beaucoup d'engouement pour
00:26:34l'animation 2D vers 3D sur la page du CDN.
00:26:38Pouvez-vous nous montrer ça et peut-être en dire quelques mots ?
00:26:42Bien sûr, je peux repartager mon écran.
00:26:49Voyons ça, pour ceux qui ne l'auraient pas vu.
00:26:52Oui, sur la page d'aperçu du CDN, on affiche une carte en 2D et si on clique sur le globe, on obtient
00:27:00une carte en 3D.
00:27:01C'est assez interactif, vous pouvez le faire tourner comme vous voulez.
00:27:07On peut passer la souris dessus et revenir en arrière.
00:27:12Et voilà, c'est tout.
00:27:18Merci.
00:27:19J'adore ce visuel et la facilité avec laquelle il permet de plonger dans l'aspect observabilité :
00:27:24je visualise d'où vient le trafic et je peux ensuite
00:27:29creuser davantage.
00:27:30Exactement.
00:27:32Une autre question liée à des problèmes que j'ai vu passer avant l'ajout de
00:27:43ces fonctionnalités, et aussi quelque chose que je me demande car je n'ai pas
00:27:47encore exploré toutes les nouveautés.
00:27:50Tout cela est si récent.
00:27:51Quelles sont les garde-fous en place pour aider à prévenir ou détecter une erreur de configuration ou
00:27:58l'exposition accidentelle d'un service interne ou de données sensibles que l'on voudrait
00:28:03garder privées ?
00:28:04Oui, tout à fait.
00:28:07Il existe plusieurs types de protections pour masquer les routes internes.
00:28:15Par défaut, les projets disposent d'une protection de déploiement qui permet d'utiliser l'authentification Vercel
00:28:23ou des mots de passe pour protéger votre site contre les visiteurs indésirables, sécurisant ainsi tout le déploiement.
00:28:31Nous avons aussi la possibilité d'utiliser des cookies et des bibliothèques d'authentification sur des
00:28:43routes spécifiques pour les protéger.
00:28:46Il y a également les règles de pare-feu personnalisées si vous souhaitez protéger certains chemins.
00:28:54Il y a donc de nombreuses options.
00:28:56Dans le tableau de bord, vous avez une grande visibilité sur les routes servies.
00:29:04Pour chaque déploiement, vous avez un résumé qui détaille toutes les routes,
00:29:10ce qui vous permet d'inspecter les informations sur chacune d'elles et sur les fonctions.
00:29:15Essayez donc, et si vous avez des questions, je serai ravi d'y répondre plus en détail.
00:29:22Incroyable.
00:29:34Voyons, une autre question que j'ai vu passer et que vous avez peut-être déjà
00:29:41effleurée, mais pour avoir un peu plus de détails.
00:29:43Les routes au niveau du projet peuvent-elles servir à diriger le trafic vers des API externes ou des microservices ?
00:29:51Oui, absolument.
00:29:55Il y a un modèle pour ça, peut-être que Yash veut en parler puisqu'il a
00:30:04travaillé dessus ? Bien sûr, je t'en prie.
00:30:06Oui, on peut tout à fait réécrire toutes vos requêtes API vers des origines externes.
00:30:11J'en dirai plus dans les semaines à venir, mais vous pouvez configurer des règles de réécriture.
00:30:15Je peux d'ailleurs partager mon écran.
00:30:18Si je configure une règle, je peux par exemple définir une réécriture de mon API
00:30:35vers n'importe quelle origine externe, comme par exemple “[https://api-externe.com](https://www.google.com/search?q=https://api-externe.com)”.
00:30:44On peut faire cela pour utiliser son API comme un proxy vers une origine externe.
00:30:50C'est tout à fait supporté, et vous pouvez aussi le faire via le CLI
00:31:00ou toute autre méthode de votre choix.
00:31:04Génial, ça facilite tellement les choses lors d'une transition progressive. Je sais qu'on utilise
00:31:10un peu cela pour notre site communautaire afin d'ajouter des fonctionnalités supplémentaires.
00:31:16Tout ne fait pas partie de Discourse, mais on ne veut pas non plus quitter complètement Discourse,
00:31:21car c'est la base de notre site communautaire, donc avoir ce surplus par-dessus
00:31:25a été très pratique pour nous.
00:31:27Oui, c'était vraiment une avancée majeure.
00:31:31Je pense qu'il est vraiment utile de bénéficier de la couche de cache,
00:31:35du pare-feu et des règles de routage pour décider quoi faire avec cette syntaxe
00:31:42facile à utiliser, tout en pouvant exploiter différents backends où vous avez déjà du contenu.
00:31:48Super, je crois qu'on a fait le tour des questions du chat, mais j'aimerais savoir : quelle est la suite ?
00:31:56Pouvez-vous nous dire quelque chose ?
00:32:00Oh, bonne question.
00:32:02Eh bien, il y a plusieurs projets en cours, mais je pense que l'un des sujets que nous avons
00:32:09évoqués et que nous devrions approfondir est la sécurité ; attendez-vous à du nouveau bientôt.
00:32:15Génial, merci de nous avoir rejoints. Je sais que vous êtes très occupés, on vous laisse
00:32:22reprendre votre journée mais on apprécie vraiment que vous ayez pris le temps d'être là.
00:32:25Merci beaucoup de nous avoir invités.
00:32:28Oui, merci beaucoup.
00:32:30Merci à tous.
00:32:30Très bien, c'était super. Qu'avons-nous au programme ensuite, Maya ?
00:32:37Oh, nous avons la session “Sandbox : Posez-moi vos questions” ce jeudi.
00:32:45Alors restez connectés pour ça.
00:32:47Je veux aussi faire une petite annonce car il y a des événements vraiment passionnants ce
00:32:54week-end pour les événements “Zero to Agent Vercel”. On a aussi le “Ship” qui arrive en juin et si
00:33:03vous ne l'avez pas encore vu, allez sur [vercel.com/ship](https://vercel.com/ship) pour créer votre propre petite valise.
00:33:09L'équipe de design a vraiment assuré sur cette page, alors allez voir ça, notez bien la date
00:33:15pour les événements partout dans le monde et oui, d'autres sessions communautaires arrivent,
00:33:21vous pouvez toutes les retrouver sur [community.vercel.com/events](https://www.google.com/search?q=https://community.vercel.com/events).
00:33:26Merci tout le monde, c'était génial.
00:33:28Salut !