Vercel наконец-то убили номера портов (Portless)

BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00Это Portless — CLI-инструмент от Versil Labs, той же команды, которая создала Agent Browser,
00:00:05JSON Render и Skills. Он заменяет номера портов localhost на стабильные именованные хосты,
00:00:10упрощая людям и ИИ-агентам поиск нужного ресурса и предотвращая конфликты портов.
00:00:15Но как это устроено внутри и не «сломает» ли это мою систему?
00:00:20Подписывайтесь, и давайте во всем разберемся.
00:00:21Разберем использование Portless на простом примере.
00:00:26Сейчас у меня запущен проект на порту 3001.
00:00:30И если бы он работал в фоне, а я совершенно об этом забыл,
00:00:33и захотел запустить другой проект на том же самом порту,
00:00:37то получил бы ошибку: «address is already in use» (адрес уже используется).
00:00:40Именно эту проблему и призван решить Portless.
00:00:44Представьте, что у вас разные агенты работают в разных вкладках над разными проектами,
00:00:48и они сталкиваются с такой ошибкой.
00:00:50Они, конечно, могут это исправить, но лучше, если бы порт всегда был свободен
00:00:55для их работы, чтобы такая проблема вообще не возникала.
00:00:58Теперь, когда Portless установлен и запущен прокси-сервер Portless,
00:01:01я могу выполнить команду «portless», указав имя хоста (в данном случае xdlapi),
00:01:06но вы можете выбрать любое имя на свой вкус.
00:01:08Затем идет команда запуска: «bun run devapi».
00:01:12Нажимаю Enter, и программа находит случайный свободный порт в диапазоне 4000,
00:01:16так как этот диапазон реже используется другими программами.
00:01:20И приложение становится доступно по адресу xdlapi.localhost:1355.
00:01:25По умолчанию порт будет 1355, что созвучно с «less», ведь это Port-less. Понимаете?
00:01:30Если я кликну сюда, вы увидите, что приложение работает.
00:01:34И если я перейду к другому приложению и проделаю то же самое,
00:01:37оно найдет другой свободный порт и будет использовать свое имя хоста.
00:01:40Но номер порта в конце (1355) всегда остается неизменным.
00:01:42На самом деле, при желании его можно изменить.
00:01:44Если мы сменим его на порт 80, то двоеточие и номер можно будет вообще не писать.
00:01:49Запущу прокси Portless на 80-м порту, не забывая про sudo,
00:01:53и также через sudo запущу сам процесс Portless,
00:01:55после чего мы сможем использовать просто поддомен с .localhost.
00:01:59Более того, поверх 80-го порта можно добавить поддержку HTTPS,
00:02:03используя флаг --https, что позволит нам работать по защищенному протоколу.
00:02:08Но если вы используете Vite, вам придется вручную указать переменную порта,
00:02:13а также задать значение для параметра host.
00:02:15Чуть позже я объясню, почему это необходимо.
00:02:17У Portless есть и масса других опций,
00:02:21например, запуск прокси на переднем плане для отладки
00:02:25или выполнение команды без прокси в качестве запасного варианта.
00:02:30Но почему каждый раз используется случайный номер порта?
00:02:33И зачем вообще нужен прокси-сервер?
00:02:35Давайте разберемся в принципах работы.
00:02:36Мы рассмотрим два основных процесса.
00:02:39Что происходит при запуске основной команды Portless в терминале?
00:02:42И что происходит, когда браузер открывает URL-адрес Portless?
00:02:46Итак, когда вы запускаете команду Portless, например:
00:02:49«portless myapp -- bun start»,
00:02:52первым делом извлекаются имя хоста и сама команда.
00:02:56Затем проверяется, запущен ли прокси-сервер.
00:02:59Если нет — он запускается автоматически.
00:03:01Но есть нюанс: вы можете сами назначить порт для прокси.
00:03:06По умолчанию это 1355.
00:03:08Но если вы укажете значение ниже 1024,
00:03:12система запросит подтверждение перед запуском.
00:03:15Если же номер выше, запуск пройдет автоматически.
00:03:19Далее программа ищет свободный порт в диапазоне от 4000 до 4999.
00:03:25Порт выбирается случайно, чтобы ускорить процесс поиска.
00:03:29Если бы поиск был последовательным, пришлось бы проверять каждый порт,
00:03:33что долго, если у вас запущено много процессов.
00:03:35Найдя порт, программа записывает данные в JSON-файл корневого хранилища.
00:03:40Затем она запускает вашу команду на этом порту и передает его в переменную окружения PORT,
00:03:47которая доступна большинству JavaScript-приложений.
00:03:50А теперь сосредоточимся на этом этапе.
00:03:52Когда браузер переходит по URL Portless, в нашем случае это myapp,
00:03:56и если мы используем стандартный порт, то это 1355.
00:04:00Сначала происходит DNS-резолвинг, затем создается TCP-соединение с прокси,
00:04:06который просто извлекает имя хоста (myapp)
00:04:09и по нему ищет номер порта вашего приложения в том самом JSON-файле.
00:04:15Получив нужный номер, он перенаправляет запрос вашему реальному приложению,
00:04:21которое возвращает ответ прокси-серверу, а тот — браузеру.
00:04:26Это нужно потому, что браузер ожидает ответ именно от порта 1355,
00:04:30а не от того случайного номера, который был назначен на первом этапе.
00:04:35Кстати, эта схема магическим образом работает и с WebSockets.
00:04:38Все это выглядит впечатляюще для проекта, созданного за выходные.
00:04:40Однако при использовании Portless не с Next.js, а, скажем, с Vite, могут возникнуть сложности.
00:04:47Во-первых, из-за использования случайного порта вместо жестко заданного,
00:04:52нужно убедиться, что ваше приложение умеет запускаться на этом порту,
00:04:56чтобы прокси знал, куда именно перенаправлять трафик.
00:05:00Для Vite или аналогов может потребоваться добавить ключ host с определенным значением,
00:05:06так как он по умолчанию отклоняет запросы из неизвестных источников.
00:05:10Я пробовал использовать разрешенные хосты с разными значениями, но это не сработало.
00:05:16Хотя такое решение кажется радикальным,
00:05:19при локальной разработке беспокоиться абсолютно не о чем.
00:05:22Как и другие проекты Vercel Labs, Portless продолжит обновляться,
00:05:26а значит, большинство этих шероховатостей со временем сгладится,
00:05:30включая полноценную поддержку Windows.
00:05:32К слову о Vercel Labs: если вы еще не пробовали Agent Browser —
00:05:36лучший способ взаимодействия вашего агента с браузером,
00:05:39то вы можете узнать о нем всё в следующем видео.

Key Takeaway

Portless от Vercel Labs избавляет разработчиков от конфликтов портов и путаницы с номерами, заменяя их на удобные именованные локальные домены с автоматической проксизацией.

Highlights

Portless — это новый CLI-инструмент от Vercel Labs для замены портов localhost на именованные хосты

Инструмент предотвращает конфликты портов, автоматически находя свободные адреса в диапазоне 4000-4999

Прокси-сервер позволяет использовать поддомены .localhost и поддерживает протоколы HTTP/HTTPS

Portless упрощает работу ИИ-агентов, обеспечивая стабильные адреса для различных ресурсов

Для работы с Vite и аналогичными инструментами требуются дополнительные настройки хоста и переменных окружения

Внутренняя архитектура базируется на сопоставлении имен хостов и реальных портов через JSON-конфигурацию

Timeline

Введение в Portless и проблема конфликтов портов

Спикер представляет Portless как новый инструмент от команды Vercel Labs, известной своими ИИ-решениями. Основная цель утилиты заключается в замене стандартных номеров портов localhost на стабильные и понятные именованные хосты. Это критически важно для предотвращения классической ошибки «address is already in use», когда несколько проектов пытаются занять один и тот же порт. Автор подчеркивает, что такая автоматизация особенно полезна для ИИ-агентов, работающих одновременно над разными задачами. Решение позволяет сделать процесс локальной разработки более предсказуемым и организованным.

Практическое использование и настройка прокси

В этом разделе демонстрируется запуск приложения через команду «portless» с использованием кастомного имени хоста. Система автоматически выбирает свободный порт в диапазоне 4000, чтобы избежать пересечений с популярным софтом. По умолчанию прокси работает на порту 1355, который обыгрывает название инструмента (less). Спикер показывает, как запустить прокси на 80-м порту через sudo, чтобы полностью избавиться от номеров портов в URL. Также рассматривается возможность включения HTTPS с помощью специального флага для защищенного соединения.

Механика работы: CLI и архитектура запросов

Автор детально разбирает внутренние процессы, происходящие при вводе команды в терминал и открытии ссылки в браузере. Сначала инструмент извлекает имя хоста, проверяет статус прокси-сервера и записывает данные о сопоставлении в специальный JSON-файл. Когда браузер делает запрос, прокси-сервер считывает имя из заголовка хоста и перенаправляет трафик на нужный внутренний порт. Этот механизм обеспечивает прозрачную передачу данных, сохраняя при этом исходный URL в адресной строке. Примечательно, что данная схема корректно функционирует даже с протоколом WebSockets, что важно для современных веб-приложений.

Особенности работы с Vite и планы на будущее

Заключительная часть посвящена нюансам совместимости Portless с популярными сборщиками, такими как Vite. Из-за строгих проверок безопасности в Vite разработчикам приходится вручную настраивать параметры хоста и порты в конфигурационных файлах. Спикер отмечает, что, несмотря на статус экспериментального проекта, созданного «за выходные», утилита обладает огромным потенциалом. В ближайшем будущем ожидаются обновления, направленные на сглаживание углов и добавление полноценной поддержки Windows. Видео завершается рекомендацией ознакомиться с другими инструментами Vercel Labs, в частности с Agent Browser.

Community Posts

View all posts