Порты в веб-разработке: от локальной разработки до продакшена

06ff8da6aab057be1a6e888ddf1c9857.png

Эта статья предназначена в первую очередь для веб-разработчиков. Я не являюсь экспертом в области сетей, администрирования или DevOps, поэтому представленный материал не углубляется в сетевые аспекты.

Из любопытства, я как то задался вопросом практического использования разных номеров портов: что они означают для разработчиков, почему используются определенные порты, и какие приложения чаще всего запускаются на них. Цель статьи — пролить немного света на эти «магические» циферки с точки зрения их прикладного применения веб-разработчиками.

Исторически приложения на Node.js (например, с использованием фреймворков Nest.js или Express) и Webpack по умолчанию запускаются на 3000 порту, если не вносить изменения в базовую конфигурацию. Vite, напротив, изначально использует порт 5173. Это может быть связано с отсылкой к названию «Vite» (если подключить немного воображения).

С технической точки зрения нет разницы, на каком порту запускать локальный сервер для разработки — это может быть 1050, 10900 или любой другой. Главное, чтобы порт был:

  1. Свободен и не занят другим приложением (например, веб-серверами вроде Apache или Nginx, базами данных, такими как MySQL или MongoDB, или другими службами).

  2. Открыт и доступен для подключения на вашей системе.

Для локальной разработки обычно используют порты из диапазона 1024–49151 (так называемые user ports), предназначенные для пользовательских приложений. Важно избегать конфликтов с популярными портами, которые могут быть зарезервированы системными службами:

— Linux/Mac: часто задействуют порты ниже 1024 для системных служб (например, SSH на 22, HTTP на 80, HTTPS на 443).

— Windows: некоторые системные процессы также могут занимать порты из диапазона user ports. Например, порт 135 используется для RPC, а 3389 для RDP.

Различия в выборе портов чаще связаны с административными правами и удобством. Например:

  1. Порты ниже 1024 требуют административных прав для их использования, что может быть неудобным в условиях разработки.

  2. На корпоративных сетях некоторые порты могут быть заблокированы или ограничены, особенно те, что используются для публичных сервисов (например, 80 для HTTP или 443 для HTTPS (про это в конце)).

  3. В целях безопасности часто избегают использования стандартных портов, поскольку они могут стать целью атак (например, попыток взлома через порт 22 для SSH).

Поэтому для разработки предпочтительно выбирать порты из диапазона user ports (1024–49151), чтобы избежать лишних ограничений и конфликтов. Это облегчает настройку и снижает вероятность проблем с доступом или безопасностью.


Часто используемые порты в веб-разработке

Некоторые порты стали стандартом в локальной разработке благодаря частому использованию популярными инструментами:

  • 8080: Альтернативный порт для HTTP, используемый, если порт 80 занят или для разработки. Часто применяется в веб-серверах, таких как Tomcat.

  • 4200: Порт по умолчанию для Angular CLI. Приложения, запущенные через ng serve, работают на этом порту.

  • 3000: Один из самых популярных портов. Используется в Node.js проектах (React с create-react-app, Nest.js) и других инструментах разработки.

  • 5173: Стандартный порт для Vite, выбранный для минимизации конфликтов с другими инструментами.

  • 8081, 8082: Используются как альтернативы 8080, если основной порт занят или для дополнительных сервисов.

  • 5000: Предпочитаемый порт для серверных приложений, таких как Flask (Python) или Express.js.

  • 1234: Порт по умолчанию для Parcel bundler.

  • 3001: Часто используется для прокси-серверов, например, для разделения фронтенда и бэкенда в проектах на create-react-app.

Порты в популярных решениях

  • Webpack Dev Server: 3000, 8080.

  • React (create-react-app): 3000.

  • Vue (Vue CLI): 8080.

  • Next.js и Nuxt.js: 3000.

  • Django: 8000 (встроенный development-сервер).

  • Ruby on Rails: 3000.

В веб-разработке чаще всего встречаются порты 3000, 8080, 4200, и 5000, но для избегания конфликтов всё чаще выбирают нестандартные значения, такие как 5173 для Vite.

Всё описанное выше касалось разработки на локальной машине. Порты 80 и 443 для публикации приложений в продакшен-среды в интернете.

  • 80 (HTTP): используется для незашифрованных соединений. Например, при вводе http://example.com запрос будет отправлен на порт 80. Такой трафик не защищён, и данные могут быть перехвачены.

  • 443 (HTTPS): используется для зашифрованных соединений через SSL/TLS. При вводе https://example.com браузер автоматически подключается к порту 443. Это безопасное соединение, которое защищает данные от перехвата. Чтобы использовать порт 443, необходимо настроить SSL-сертификат.

Хотя технически веб-приложение можно опубликовать на любом порту, обычно для тестовых или dev версий (production версий для разработчиков, чтобы посмотреть как приложение ведет себя на продовском сервере) используют нестандартные порты, например, http://example.com:2209. Доступ к таким версиям часто ограничивается по IP-адресам для безопасности, чтобы только сотрудники или определённые пользователи могли их увидеть.

Буду рад вашим комментариям и замечаниям если есть неточности или что добавить. Обнял, работяги!

© Habrahabr.ru