Vercel macht Portnummern endlich überflüssig (Portless)

BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00Das ist Portless, ein CLI-Tool von Vercel Labs, demselben Team, das auch Agent Browser,
00:00:05JSON Render und Skills entwickelt hat. Es ersetzt localhost-Portnummern durch feste Namen,
00:00:10sodass Menschen und KI-Agenten immer am richtigen Ort landen und Konflikte vermieden werden.
00:00:15Aber wie funktioniert das eigentlich unter der Haube und bringt es mein System durcheinander?
00:00:20Abonniert den Kanal und lasst uns direkt loslegen.
00:00:21Schauen wir uns an einem einfachen Beispiel an, wie man Portless benutzt.
00:00:26Gerade läuft bei mir ein Projekt auf Port 3001.
00:00:30Wenn ich dieses Projekt im Hintergrund laufen hätte und es völlig vergessen würde,
00:00:33und dann ein anderes Projekt starten wollte, das einen ähnlichen Port nutzt,
00:00:37dann bekäme ich diese Fehlermeldung: “Address is already in use”.
00:00:40Genau für dieses Problem wurde Portless entwickelt.
00:00:44Stellt euch vor, ihr hättet verschiedene Agenten in unterschiedlichen Tabs für verschiedene Projekte laufen,
00:00:48und sie stießen auf dieses Problem.
00:00:50Sie könnten es natürlich beheben, aber es wäre besser, wenn immer ein Port verfügbar wäre,
00:00:55damit es erst gar nicht zu diesem Problem kommt.
00:00:58Wenn Portless installiert ist und der Portless-Proxy läuft,
00:01:01aber ihr könnt hier einen beliebigen Namen wählen.
00:01:06aber ihr könnt hier einen beliebigen Namen wählen.
00:01:08Dann folgt der Befehl, den ihr ausführen wollt, also “bun run devapi”.
00:01:12Wenn ich Enter drücke, wird eine zufällige freie Portnummer im 4000er-Bereich gesucht.
00:01:16Dieser Bereich wird eher selten von anderen Programmen belegt.
00:01:20Und meine App wird unter meinem Hostnamen auf .localhost:1355 bereitgestellt.
00:01:25Standardmäßig ist es 1355, was für “less” steht, weil es Portless ist. Versteht ihr?
00:01:30Wenn ich hier klicke, sieht man, dass die App einwandfrei funktioniert.
00:01:34Und wenn ich zu dieser anderen App gehe und genau dasselbe mache,
00:01:37wurde ein anderer freier Port gefunden, aber der Hostname wird verwendet.
00:01:40Die Nummer am Ende bleibt jedoch immer gleich.
00:01:42Tatsächlich könnten wir sie sogar ändern, wenn wir wollten.
00:01:44Wenn wir sie auf Port 80 ändern, könnten wir den Doppelpunkt und die Nummer ganz weglassen.
00:01:49Wenn ich also den Portless-Proxy auf Port 80 starte (mit sudo),
00:01:53und ebenfalls sudo verwende, um den Portless-Prozess zu starten,
00:01:55können wir einfach die Subdomain mit .localhost verwenden.
00:01:59Wir könnten zusätzlich zu Port 80 sogar HTTPS-Unterstützung erhalten,
00:02:03indem wir das HTTPS-Flag verwenden.
00:02:08Aber wenn ihr Vite nutzt, müsst ihr die Port-Variable im Port-Key setzen
00:02:13und den Host auf diesen Wert einstellen.
00:02:15Ich erkläre später im Video, warum das so ist.
00:02:17Es gibt noch viele andere Optionen bei Portless,
00:02:21wie zum Beispiel den Proxy zur Fehlersuche im Vordergrund laufen zu lassen,
00:02:25oder einen Befehl ohne Proxy auszuführen – ebenfalls zum Debuggen oder als Notlösung.
00:02:30Aber warum wird jedes Mal eine zufällige Portnummer verwendet?
00:02:33Und warum braucht es überhaupt einen Proxy? Schauen wir uns die Funktionsweise an.
00:02:35Wir gehen zwei Prozesse durch.
00:02:36Erstens: Was passiert, wenn der Hauptbefehl von Portless im Terminal ausgeführt wird?
00:02:39Und zweitens: Was passiert, wenn ein Browser eine Portless-URL aufruft?
00:02:42Wenn man hier einen Portless-Befehl ausführt, in diesem Fall
00:02:46werden zuerst der Host und der Befehl extrahiert.
00:02:49Portless my-app mit dem Befehl „bun start“,
00:02:52Als Nächstes wird geprüft, ob der Proxy läuft.
00:02:56Falls nicht, wird er gestartet.
00:02:59Es gibt jedoch eine Besonderheit, da man den Port für den Proxy selbst festlegen kann.
00:03:01Standardmäßig ist es 1355.
00:03:06Setzt man ihn jedoch auf einen Wert unter 1024,
00:03:08wird vor der Ausführung um eine Bestätigung gebeten.
00:03:12Liegt der Wert darüber, startet er automatisch.
00:03:15Danach wird ein freier Port zwischen 4000 und 4999 gesucht.
00:03:19Dieser Port wird zufällig gewählt, um den Suchvorgang zu beschleunigen.
00:03:25Wäre die Suche sequenziell, müssten alle Ports nacheinander geprüft werden,
00:03:29was bei vielen laufenden Prozessen lange dauern könnte.
00:03:33Sobald ein Port gefunden wurde, werden die Details in eine JSON-Datei im Root-Store geschrieben.
00:03:35Dann wird euer Befehl auf diesem Port ausgeführt und der Port zur Umgebungsvariable hinzugefügt,
00:03:40auf die die meisten JavaScript-Anwendungen zugreifen können.
00:03:47Konzentrieren wir uns nun auf diesen Teil.
00:03:50und wir beim Standard-Port bleiben, ist das 1355.
00:03:52Wenn ein Browser eine Portless-URL besucht, in diesem Fall „myapp“,
00:03:56Zuerst erfolgt die DNS-Auflösung, bevor eine TCP-Verbindung zum Proxy aufgebaut wird.
00:04:00und sucht damit in der Root-JSON-Datei nach dem Port eurer Anwendung.
00:04:06der einfach den Hostnamen extrahiert, also „myapp“,
00:04:09Sobald der richtige Port bekannt ist, leitet er die Anfrage an eure eigentliche App weiter.
00:04:15Die App sendet die Antwort zurück an den Proxy und dieser an den Browser,
00:04:21da der Browser eine Antwort von Port 1355 erwartet
00:04:26und nicht von der Nummer, die der Proxy in diesem Schritt zufällig zugewiesen hat.
00:04:30Das funktioniert praktischerweise auch mit WebSockets.
00:04:35Alles in allem sehr beeindruckend für ein Wochenendprojekt.
00:04:38Wenn ihr Portless jedoch für ein Projekt verwendet, das nicht auf Next.js basiert (wie Vite), gibt es Probleme.
00:04:40Da eine zufällige Portnummer zugewiesen wird und kein fest installierter Wert,
00:04:47müsst ihr sicherstellen, dass eure App über diesen Port laufen kann,
00:04:52damit der Proxy weiß, wohin der Datenverkehr umgeleitet werden soll.
00:04:56Bei Vite oder ähnlichen Bundlern müsst ihr eventuell diesen Host-Key auf diesen Wert setzen,
00:05:00da Anfragen von unbekannten Quellen sonst abgelehnt werden; dies deaktiviert die Prüfung.
00:05:06Ich habe versucht, den “allowed host”-Key mit verschiedenen Werten zu nutzen, aber ohne Erfolg.
00:05:10Auch wenn diese Lösung extrem scheint,
00:05:16muss man sich bei lokaler Ausführung keine Sorgen machen.
00:05:19Wie die meisten Projekte von Vercel Labs wird auch Portless ständig aktualisiert,
00:05:22sodass solche Details in Zukunft verbessert werden,
00:05:26ebenso wie die Unterstützung für Windows.
00:05:30Apropos Vercel Labs: Falls ihr Agent Browser noch nicht ausprobiert habt,
00:05:32die beste Methode für euren Agenten, mit einem Browser zu interagieren,
00:05:36erfahrt ihr alles darüber im nächsten Video.

Key Takeaway

Portless von Vercel Labs eliminiert Port-Konflikte in der lokalen Entwicklung, indem es Anwendungen über feste Hostnamen statt wechselnder Portnummern zugänglich macht.

Highlights

Portless ist ein Open-Source-CLI-Tool von Vercel Labs

Timeline

Einführung in Portless und das Port-Problem

Das Video stellt Portless als neues CLI-Tool von Vercel Labs vor, das die lokale Entwicklung durch Namensgebung vereinfacht. Der Sprecher erklärt das klassische Problem der Fehlermeldung "Address is already in use", wenn mehrere Projekte denselben Port belegen wollen. Durch den Einsatz von festen Namen statt Nummern sollen Konflikte vermieden werden, was besonders für KI-Agenten hilfreich ist. Das Tool reiht sich in eine Serie von Innovationen wie JSON Render und Skills ein. Es wird die zentrale Frage aufgeworfen, wie das System technisch funktioniert, ohne die lokale Umgebung zu korrumpieren.

Praktische Anwendung und Befehlsstruktur

In diesem Abschnitt wird die praktische Nutzung von Portless demonstriert, wobei der Fokus auf der Vermeidung von Port-Überschneidungen liegt. Wenn der Portless-Proxy aktiv ist, kann ein Projekt mit einem frei wählbaren Namen und einem Startbefehl wie "bun run dev" initialisiert werden. Das System sucht daraufhin automatisch nach einem freien Port im Bereich von 4000 bis 4999, um Kollisionen zu minimieren. Standardmäßig wird die App dann unter dem Hostnamen mit dem Suffix ".localhost:1355" bereitgestellt. Der Sprecher scherzt, dass die Zahl 1355 für das Wort "less" steht, was den Namen Portless unterstreicht.

Erweiterte Funktionen: Port 80, HTTPS und Proxy-Optionen

Der Sprecher zeigt auf, wie man durch die Nutzung von Port 80 und sudo-Rechten die Portnummer in der URL komplett eliminieren kann. Zusätzlich bietet Portless eine native HTTPS-Unterstützung über ein einfaches Flag an, was die lokale Entwicklungsumgebung näher an die Produktionsbedingungen bringt. Es wird jedoch gewarnt, dass bei der Nutzung von Bundlern wie Vite zusätzliche Konfigurationen für den Host-Key notwendig sind. Weitere Optionen umfangen das Ausführen des Proxys im Vordergrund zur Fehlersuche oder das Starten von Befehlen ohne Proxy als Notlösung. Diese Flexibilität macht das Tool für verschiedene Workflow-Szenarien attraktiv.

Technische Funktionsweise und DNS-Auflösung

In diesem technischen Deep-Dive wird erklärt, was im Hintergrund passiert, wenn ein Portless-Befehl ausgeführt wird. Zuerst werden Hostname und Befehl extrahiert, bevor geprüft wird, ob der Hintergrund-Proxy bereits aktiv ist. Ein freier Port wird durch eine Zufallssuche im 4000er-Bereich ermittelt, was laut Sprecher deutlich schneller ist als eine sequenzielle Suche. Die Details zur Zuordnung zwischen Hostname und Port werden in einer zentralen JSON-Datei im Root-Store gespeichert. Schließlich wird der zugewiesene Port als Umgebungsvariable injiziert, damit die Anwendung weiß, auf welcher Schnittstelle sie lauschen muss.

Proxy-Routing, WebSockets und Einschränkungen

Der letzte Teil erläutert den Weg einer Browser-Anfrage über die DNS-Auflösung bis hin zum Proxy-Server auf Port 1355. Der Proxy liest den Hostnamen aus der Anfrage, sucht den zugehörigen Port in der JSON-Datei und leitet den Datenverkehr transparent weiter. Bemerkenswert ist, dass dieses System auch WebSockets unterstützt, was für moderne Echtzeit-Apps essenziell ist. Der Sprecher geht auf Herausforderungen bei der Nutzung mit Vite ein, wo Sicherheitsmechanismen durch das Setzen von "allowed hosts" angepasst werden müssen. Abschließend wird erwähnt, dass Portless als experimentelles Projekt von Vercel Labs stetig verbessert wird, inklusive zukünftigem Windows-Support.

Community Posts

View all posts