Как закрепить порт за проектом и избежать коллизий

Если у вас несколько фронтенд-проектов (особенно на Vue или других SPA-фреймворках), почти наверняка они по умолчанию используют один и тот же dev-порт — чаще всего 3000 или 5173. Использование проектами одного порта рано или поздно приводит к ошибкам, так как для браузера это одна и та же среда: общий localStorage, общие cookie, общие service workers.

Проблема
В итоге можно получить:
- перезапись данных (например, токенов)
- неожиданные авторизации
- сломанные страницы без видимых причин
- кэш от другого проекта

Особенно проблемным станет service worker — он может начать обслуживать вообще другой проект.

Ручное решение
Можно задать порт вручную:
// vite.config.ts
export default defineConfig({
server: {
port: 7000
}
});

Но с ростом числа проектов появляется новая проблема — требуется запоминать, какие порты заняты и следить за коллизиями.

Автоматическое решение
Решение — использовать пакет named-port.

named-port решает проблему иначе: он детерминированно вычисляет порт на основе переданной строки. Таким образом, каждый проект получает свой стабильный порт на основе его имени или произвольной строки.

Использование
npm install --save-dev named-port
// vite.config.ts
import process from "node:process";
import namedPort from "named-port";
import { defineConfig } from "vite";

export default defineConfig({
server: {
port: namedPort(process.env.npm_package_name)
}
});

Теперь порт зависит от поля name из package.json. Главное отличие — предсказуемость: порт не случайный, его не нужно запоминать, и он одинаковый на всех машинах.

Настройка
// передать в качестве аргумента произвольную строку
namedPort("custom-key");
// изменить диапазон портов (по умолчанию 1024..65535)
namedPort("my-app", { min: 3000, max: 3999 });

Итог
named-port — маленькая утилита, которая помогает избежать коллизий при работе с несколькими проектами и убирает целый класс неочевидных багов. Порт становится стабильным и уникальным свойством проекта.

#npm