Как изменить порт в Create React App: Полное руководство

Вы можете задать пользовательский порт для вашего проекта на Create React App несколькими способами. Наиболее распространённые подходы включают изменение скрипта запуска в package.json, использование переменных окружения или прямое указание порта при запуске приложения.

• Изменение порта в package.json
• Использование переменных окружения
• Подход через командную строку
• Запуск нескольких экземпляров
• Лучшие практики

Изменение порта в package.json

Самый простой способ — изменить скрипт "start" в файле package.json, чтобы он включал переменную окружения PORT. Этот подход является постоянным и будет использоваться каждый раз, когда вы запускаете npm start или yarn start.

Для Windows:

"scripts": {
  "start": "set PORT=3005 && react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Для macOS и Linux:

"scripts": {
  "start": "PORT=3005 react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Для кроссплатформенной совместимости:

Если вам нужно, чтобы проект работал на всех операционных системах, вы можете использовать пакет cross-env:

npm install cross-env --save-dev

Затем измените ваш package.json:

"scripts": {
  "start": "cross-env PORT=3005 react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Использование переменных окружения

Create React App поддерживает переменные окружения через файлы .env. Это чистый подход, поскольку он отделяет конфигурацию от скриптов.

Метод 1: Создайте файл .env

Создайте файл с именем .env в корневом каталоге вашего проекта (на том же уровне, что и package.json):

PORT=3005

Метод 2: Файлы, специфичные для окружения

Вы можете создать файлы, специфичные для окружения, такие как .env.development или .env.production:

.env.development
PORT=3005

.env.production
PORT=3006

Согласно официальной документации Create React App, вы можете настроить различные параметры разработки и продакшена, задавая переменные окружения в вашей оболочке или через файлы .env.

Важно: Пользовательские переменные окружения должны начинаться с REACT_APP_, чтобы быть доступными в коде вашего приложения. Однако для переменной PORT это не требуется, так как она используется внутренне Create React App.

Подход через командную строку

Для временных изменений порта без модификации файлов конфигурации вы можете задать переменную PORT напрямую в терминале:

Для Windows (Command Prompt):

set PORT=3005 && npm start

Для Windows (PowerShell):

$env:PORT=3005; npm start

Для macOS и Linux:

PORT=3005 npm start

Этот подход полезен для быстрой проверки, но не сохраняется между сессиями.

Запуск нескольких экземпляров

Чтобы запустить два экземпляра вашего React‑приложения одновременно на разных портах (3005 и 3006), вам понадобится слегка изменить структуру проекта:

Метод 1: Клонирование проекта

Создайте копию каталога проекта и настройте каждый экземпляр с разными портами.

Метод 2: Использование разных файлов окружения

Создайте два разных .env файла и используйте их с разными командами сборки:

# Запуск первого экземпляра
PORT=3005 npm start

# В другом терминале запустите второй экземпляр
PORT=3006 npm start

Метод 3: Изменение package.json с разными скриптами

"scripts": {
  "start": "react-scripts start",
  "start:3005": "PORT=3005 react-scripts start",
  "start:3006": "PORT=3006 react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Вы можете затем запустить:

npm run start:3005
npm run start:3006

Лучшие практики

1. Выберите подходящий метод для вашего случая

• package.json: Лучший вариант для стабильной среды разработки
• .env файлы: Лучший вариант для конфигураций, специфичных для окружения
• Командная строка: Лучший вариант для временного тестирования

2. Избегайте конфликтов портов

Всегда проверяйте, что выбранные порты не заняты:

# Проверка доступности порта
netstat -an | grep :3005

3. Документируйте вашу конфигурацию

Добавьте комментарии в package.json или создайте файл PORT.md, описывающий конфигурацию портов:

/*
  Port Configuration:
  - Development: PORT=3005 (default)
  - Testing: PORT=3006
  - Production: Uses server configuration
*/

4. Рассмотрите возможность использования прокси для API‑запросов

Если вы запускаете несколько экземпляров, возможно, понадобится использовать разные конечные точки API. Настройте прокси в package.json:

"proxy": {
  "development": "http://localhost:3001",
  "testing": "http://localhost:3002"
}

5. Используйте переменные окружения в коде приложения

Если вам нужно получить порт в вашем React‑приложении, используйте process.env.PORT:

console.log(`App running on port: ${process.env.PORT}`);

Помните, что переменная PORT автоматически внедряется Create React App и не требует префикса REACT_APP_, как другие пользовательские переменные окружения.

Источники

1. Официальная документация Create React App – Advanced Configuration
2. Как задать порт для проекта на Create React App – Stack Overflow
3. Изменение порта по умолчанию для проекта на Create React App – bobbyhadz
4. React/ReactJS: Изменение номера порта 3000 – ScriptVerse Academy
5. Добавление пользовательских переменных окружения – Create React App

Заключение

Чтобы задать пользовательский порт для вашего проекта на Create React App, у вас есть несколько эффективных вариантов:

1. Измените скрипты в package.json – самый постоянный метод, который работает во всех средах разработки.
2. Используйте файлы .env – чистое разделение конфигурации от кода, с поддержкой разных окружений.
3. Установите PORT через командную строку – быстрый и временный способ для тестирования.

Для вашего конкретного случая запуска двух экземпляров одновременно на портах 3005 и 3006 я рекомендую использовать либо разные файлы .env, либо отдельные npm‑скрипты в package.json. Такой подход позволит легко запускать каждый экземпляр с правильной конфигурацией порта.

Помните, что Create React App автоматически использует переменную окружения PORT, поэтому вам не нужно добавлять к ней префикс REACT_APP_, как для других пользовательских переменных. Выберите метод, который лучше всего подходит вашему рабочему процессу и предпочтениям команды, и убедитесь, что ваши порты не конфликтуют с другими сервисами, работающими на вашей системе.