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

Если у вас несколько фронтенд-проектов (особенно на 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 — маленькая утилита, которая помогает избежать коллизий при работе с несколькими проектами и убирает целый класс неочевидных багов. Порт становится стабильным и уникальным свойством проекта.