Как указать порт для запуска проекта на основе приложения create-react?

мой проект основан на create-react-app. npm start или yarn start по умолчанию будет работать приложение на порт 3000 и там нет возможности указать порт в пакете.формат JSON.

как я могу указать порт по моему выбору в этом случае? Я хочу запустить два проекта одновременно (для тестирования), один в port 3005 и 3006

11 ответов


если вы не хотите устанавливать переменные среды, другой вариант-изменить scripts часть пакета.json from:

"start": "react-scripts start"

to

Linux (проверено на Ubuntu 14.04/16.04) и в macOS (проверено @aswin - s на MacOS Sierra 10.12.4):

"start": "PORT=3006 react-scripts start"

или (может быть) более общее решение @IsaacPak

"start": "export PORT=3006 react-scripts start"

окна @JacobEnsor решение

"start": "set PORT=3006 && react-scripts start"

обновление из-за популярности моего ответа: в настоящее время я предпочитаю использовать переменные среды, сохраненные в .env file (полезно хранить наборы переменных для разных deploy конфигурации в удобной и читаемой форме). Не забудьте добавить *.env на .gitignore если вы все еще храните свои секреты в .env файлы. здесь объяснение того, почему использование переменных среды лучше всего случаи. здесь - это объяснение того, почему хранить секреты в окружающей среде-это плохая идея.


вот еще один способ выполнить эту задачу.

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

порт=3005


Вы можете указать переменную окружения с именем PORT чтобы указать порт, на котором будет работать сервер.

$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell

можно использовать кросс-ОКР установить порт, и он будет работать на Windows, Linux и Mac.

yarn add -D cross-env

потом в пакет.JSON начальная ссылка может быть такой:

"start": "cross-env PORT=3006 react-scripts start",

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

node_modules/react-scripts/scripts/start.js

в нем найдите строку ниже и измените номер порта на нужный порт

var DEFAULT_PORT = process.env.PORT || *4000*;

и вы хорошо идти.


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

прямо сейчас, процесс довольно сложный:

  1. Run npm run eject
  2. ждать, что отделка
  3. редактировать scripts/start.js найти/заменить 3000 с любым портом, который вы хотите использовать
  4. редактировать config/webpack.config.dev.js и сделать то же самое
  5. npm start

изменение в моем пакете.файл json "start": "export PORT=3001 && react-scripts start" работал для меня тоже, и я на macOS 10.13.4


настройки порта по умолчанию при запуске приложения, вы можете найти в

yourapp/scripts/start.js

прокрутите вниз и измените порт, как вы хотите

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 4000;

надежда может помочь вам ;)


просто обновите немного в webpack.config.js:

devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
  }
выполнить npm start снова

подводя итог, у нас есть три подхода для достижения этого:

  1. установите переменную среды с именем "PORT"
  2. измените ключ " пуск "в разделе" скрипты " части пакета.в JSON
  3. создать .env-файл и поместите в него конфигурацию порта

самый портативный будет последним подходом. Но, как упоминалось в другом плакате, добавьте .env into .gitignore, чтобы не загружать конфигурацию в открытый источник хранилище.

Подробнее: в этой статье


это работает как на Windows, так и на Linux

пакета.в JSON

"scripts": {
    "start": "set PORT=3006 && PORT=3006 react-scripts start || react-scripts start"
    ...
}

но вы, вероятно, предпочитают создавать .env с портом=3006, написанным внутри него