00:00:00Voici Portless, un outil CLI de Versil Labs, l'équipe derrière Agent Browser,
00:00:05JSON Render et Skills, qui remplace les numéros de port localhost par des noms stables,
00:00:10facilitant ainsi l'accès pour les humains et les agents IA tout en évitant les conflits.
00:00:15Mais comment cela fonctionne-t-il vraiment et est-ce que ça va dérégler mon système ?
00:00:20Abonnez-vous et découvrons cela ensemble.
00:00:21Voyons comment utiliser Portless avec un exemple simple.
00:00:26Actuellement, j'ai un projet qui tourne sur le port 3001.
00:00:30Si je le laissais tourner en arrière-plan et que je l'oubliais complètement,
00:00:33et que je voulais lancer un autre projet utilisant un port similaire,
00:00:37j'obtiendrais cette erreur indiquant que l'adresse est déjà utilisée.
00:00:40C'est précisément le problème que Portless est censé résoudre.
00:00:44Imaginez si vous aviez différents agents tournant dans divers onglets pour plusieurs projets
00:00:48et qu'ils rencontraient ce problème.
00:00:50Ils pourraient certes le corriger, mais il vaudrait mieux qu'un port soit toujours disponible
00:00:55pour éviter que cela ne se produise dès le départ.
00:00:58Maintenant, avec Portless installé et le proxy Portless en cours d'exécution,
00:01:01mais vous pouvez choisir celui que vous voulez.
00:01:06mais cela peut être tout ce que vous voulez.
00:01:08Ensuite, la commande à exécuter, qui est “bun run devapi”.
00:01:12En appuyant sur Entrée, il trouve un numéro de port libre aléatoire dans la plage des 4000.
00:01:16C'est une plage moins susceptible d'être utilisée par d'autres programmes.
00:01:20Et il expose mon application avec mon nom d'hôte sur .localhost:1355.
00:01:25Par défaut, ce sera 1355, ce qui évoque “less” car c'est Portless. Vous l'avez ?
00:01:30Si je clique ici, vous voyez que l'application fonctionne parfaitement.
00:01:34Et si je faisais exactement la même chose pour cette autre application,
00:01:37elle trouverait un autre port libre tout en utilisant le nom d'hôte.
00:01:40Cependant, ce numéro à la fin restera toujours le même.
00:01:42En fait, nous pourrions même le changer si nous le souhaitions.
00:01:44En passant au port 80, on pourrait carrément supprimer les deux-points et le numéro.
00:01:49et en utilisant aussi “sudo” pour lancer le processus Portless,
00:01:53et en utilisant aussi sudo pour lancer le processus Portless,
00:01:55alors nous pouvons simplement utiliser le sous-domaine avec .localhost.
00:01:59On pourrait même obtenir le support HTTPS en plus d'utiliser le port 80
00:02:03grâce au flag HTTPS, ce qui nous permet d'utiliser le protocole sécurisé.
00:02:08Mais si vous utilisez Vite, vous devrez configurer la variable de port dans la clé port,
00:02:13ainsi que l'hôte sur cette valeur précise.
00:02:15J'expliquerai pourquoi un peu plus tard dans la vidéo.
00:02:17Portless offre de nombreuses autres options,
00:02:21comme la possibilité de lancer le proxy au premier plan pour le débogage,
00:02:25ou d'exécuter une commande sans le proxy, soit pour déboguer, soit comme solution de secours.
00:02:30Mais pourquoi utilise-t-il un port aléatoire à chaque fois ?
00:02:33Et pourquoi a-t-il besoin d'un proxy ? Voyons comment ça marche.
00:02:35Nous allons examiner deux processus distincts.
00:02:36D'abord, que se passe-t-il quand la commande Portless est lancée dans un terminal ?
00:02:39Ensuite, que se passe-t-il quand un navigateur consulte une URL Portless ?
00:02:42Ici, quand vous lancez une commande Portless, par exemple :
00:02:46l'hôte et la commande sont d'abord extraits.
00:02:49Portless my app avec la commande bun start,
00:02:52Ensuite, l'outil vérifie si le proxy est en cours d'exécution.
00:02:56S'il ne l'est pas, il le lancera automatiquement.
00:02:59Il y a un bémol : vous pouvez choisir le port sur lequel le proxy s'exécute.
00:03:01Par défaut, c'est le 1355.
00:03:06Mais si vous choisissez une valeur inférieure à 1024,
00:03:08il demandera une confirmation avant de se lancer.
00:03:12Si le numéro est supérieur, il se lancera automatiquement.
00:03:15Ensuite, il cherche un port libre entre 4000 et 4999.
00:03:19Ce port est choisi au hasard pour accélérer le processus de recherche.
00:03:25S'il était séquentiel, il devrait tester tous les ports un par un,
00:03:29ce qui pourrait être long si de nombreux processus sont déjà actifs.
00:03:33Une fois le port trouvé, il ajoute les détails dans un fichier JSON de stockage racine.
00:03:35Puis, il lance votre commande sur ce port et l'ajoute à la variable d'environnement PORT,
00:03:40qui est accessible à la plupart des applications JavaScript.
00:03:47Concentrons-nous maintenant sur cette partie.
00:03:50Quand un navigateur visite une URL Portless, dans ce cas, ce sera “myapp”.
00:03:52Et si nous gardons le port par défaut, ce sera le 1355.
00:03:56Ensuite, il effectue toute la résolution DNS avant de créer une connexion TCP vers le proxy,
00:04:00et s'en sert pour chercher le port de votre application dans le fichier JSON racine.
00:04:06qui extrait simplement le nom d'hôte, donc myapp,
00:04:09Une fois qu'il a le bon numéro de port, il redirige la requête vers votre application réelle,
00:04:15qui renvoie une réponse au proxy avant qu'elle n'atteigne le navigateur,
00:04:21car le navigateur attend une réponse provenant du port 1355
00:04:26et non du numéro aléatoire assigné par le proxy à cette étape du processus.
00:04:30Cela fonctionne aussi magiquement avec les WebSockets.
00:04:35Tout cela est très impressionnant pour un projet réalisé en un week-end.
00:04:38Cependant, si vous utilisez Portless sur un projet hors Next.js, comme Vite, des problèmes peuvent surgir.
00:04:40D'abord, comme il utilise un port aléatoire assigné à la variable PORT
00:04:47et non un numéro fixe, vous devez vous assurer que votre application peut tourner sur ce port
00:04:52pour que le proxy sache où rediriger le trafic.
00:04:56Pour Vite ou un bundler équivalent, vous devrez peut-être ajouter cette clé d'hôte et cette valeur,
00:05:00car il rejette les requêtes d'origines inconnues, et cela désactive cette vérification.
00:05:06J'ai essayé d'utiliser la clé des hôtes autorisés avec différentes valeurs, sans succès.
00:05:10Même si cette solution semble radicale,
00:05:16il n'y a vraiment rien à craindre si vous travaillez en local.
00:05:19Mais comme la plupart des projets de Vercel Labs, Portless continuera d'évoluer,
00:05:22ce qui signifie que ces fonctionnalités seront peaufinées à l'avenir,
00:05:26tout comme le support pour Windows.
00:05:30En parlant de Vercel Labs, si vous n'avez pas encore testé Agent Browser,
00:05:32le meilleur moyen pour votre agent d'interagir avec un navigateur,
00:05:36vous pouvez tout apprendre à ce sujet dans la prochaine vidéo.
00:05:39Merci d'avoir regardé.