Как заставить сервер webpack dev работать на порте 80 и на 0.0.0.0, чтобы сделать его общедоступным?

180

Я новичок во всем мире nodejs / реагий, поэтому прошу прощения, если мой вопрос звучит глупо. Так что я играюсь с реагирующим.js .

Всякий раз, когда я делаю, npm startон всегда работает localhost:8080.

Как я могу изменить его, чтобы 0.0.0.0:8080он стал общедоступным? Я пытался прочитать исходный код в приведенном выше репозитории, но не смог найти файл, который выполняет эту настройку.

Кроме того, чтобы добавить к этому - как я могу заставить его работать на порту, 80если это вообще возможно?

90abyss
источник

Ответы:

233

Нечто подобное сработало для меня. Я предполагаю, что это должно работать для вас.

Запустите webpack-dev, используя это

webpack-dev-server --host 0.0.0.0 --port 80

И установите это в webpack.config.js

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
     config.paths.demo
 ]

Примечание. Если вы используете горячую загрузку, вам придется это сделать.

Запустите webpack-dev, используя это

webpack-dev-server --host 0.0.0.0 --port 80

И установите это в webpack.config.js

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
    'webpack/hot/only-dev-server',
     config.paths.demo
 ],

....
plugins:[new webpack.HotModuleReplacementPlugin()]
Бхаргав Поннапалли
источник
1
Привет, я новичок в этом, но хотел бы использовать избыточность для моего клиентского скрипта. Проблема заключается в том, что это приложение .net, которое обслуживает контент и конечные точки json. Таким образом, чтобы сделать это во время разработки, мне нужно добавить <script src="http://localhost:8080/webpack-dev-server.js"></script>на страницу и установить какой-нибудь междоменный плагин? Эти инструменты выглядят интересно, но, похоже, они предполагают, что ваш сервер также является узлом, или я что-то упустил?
HMR
1
Может быть, это поможет мне: webpack.github.io/docs/webpack-dev-server.html#proxy Я бы подумал использовать прокси-сервер для всего, кроме запросов файлов javascript и некоторых запросов, сделанных сервером webpack, hotloader и redux timetravel. так /data:image ..., ... .jsи/sockjs-node...
HMR
Если вы получили неверный заголовок хоста, вам может потребоваться установить для disableHostCheck значение true в webpack.serve.config.js. См. Github.com/webpack/webpack-dev-server/issues/882 . В зависимости от вашей ситуации, это может быть дыра в безопасности, поэтому будьте осторожны.
Брайан Детерлинг
131

Вот как я это сделал, и, кажется, работает довольно хорошо.

В вашем файле webpack.config.js добавьте следующее:

devServer: {
    inline:true,
    port: 8008
  },

Очевидно, что вы можете использовать любой порт, который не конфликтует с другим. Я упоминаю проблему конфликта только потому, что я провел около 4 часов. я столкнулся с проблемой только для того, чтобы обнаружить, что мои службы работали на одном и том же порту.

bkane56
источник
я так понимаю, это вместо указания хоста и порта в разделе ввода файла конфигурации?
JoeTidee
2
Не могли бы вы добавить ссылку на документацию ?
водянистое
1
Просто добавив в строку: правда работал для меня. Кстати, файл веб-пакета, который я редактировал, был 'webpack.dev.conf.js (по состоянию на март 2018 г.).
Шон О
68

Сконфигурируйте webpack (в webpack.config.js) с помощью:

devServer: {
  // ...
  host: '0.0.0.0',
  port: 80,
  // ...
}
Бедер Акоста Борхес
источник
2
это не работает для. devServer: {inline: true, хост: '0.0.0.0', порт: 8088},
NK Chaudhary
Это работает для меня, когда я использую (webpack.config): devServer: {хост: 'xx.xx.xx.xxx', порт: 8089},
Dijo
Это решило очень близкую для меня проблему, пытаясь следовать курсу Modern React с Redux на Udemy . Я работаю в среде разработки под Windows в виртуальной коробке Vagrant . Курс не содержит абсолютно никаких рекомендаций по настройке среды разработки.
Винс
Да, это решило проблему с запуском webpack на экземпляре Cloud9. Спасибо!
Маньяк
Я смог изменить номер порта с помощью приведенного выше фрагмента, но хост все равно не изменился. Я пытался сделать хост 0.0.0.0, чтобы я мог получить доступ к сайту с IP-адреса, но это не сработало. Любая помощь в том, как этого добиться?
Рито
26

Я новичок в разработке JavaScript и ReactJS. Я не смог найти ответ, который мне подходит, пока не понял его, просмотрев код реагирующих сценариев. Используя ReactJS 15.4.1+ с помощьюact-скриптов, вы можете начать с собственного хоста и / или порта, используя переменные окружения:

HOST='0.0.0.0' PORT=8080 npm start

Надеюсь, это поможет таким новичкам, как я.

анонимное
источник
16

Следующее сработало для меня -

1) В Package.jsonдобавление это:

"scripts": {
    "dev": "webpack-dev-server --progress --colors"
}

2) В webpack.config.jsдобавьте это в config объект, который вы экспортируете:

devServer: {
    host: "GACDTL001SS369k", // Your Computer Name
    port: 8080
}

3) Теперь по типу терминала: npm run dev

4) После того, как # 3 скомпилируется и будет готово, просто зайдите в браузер и введите адрес как http://GACDTL001SS369k:8080/

Надеемся, что ваше приложение теперь должно работать с внешним URL-адресом, к которому другие могут получить доступ в той же сети.

PS: GACDTL001SS369kбыло имя моего компьютера, поэтому замените его на то, что у вас на компьютере.

Sumeet
источник
4

Если вы находитесь в приложении React, созданном с помощью команды «create-реакции-приложение», перейдите к своему package.jsonи измените

"start": "react-scripts start",

к ... ( unix )

"start": "PORT=80 react-scripts start",

или ... ( победа )

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

R01010010
источник
или отредактируйте node_modules / реагировать-scripts / script / start.js и измените DEFAULT_PORT и HOST. Просто защитите файл от перезаписи, когда новые версии обновляют файлы при обновлении npm.
Рохелио Тривиньо
1

Следующее работает для меня в файле конфигурации JSON:

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},
Римский
источник
1

Я боролся с некоторыми другими ответами. (Моя настройка: я работаю npm run devс веб-пакетом 3.12.0, после создания своего проекта с использованием виртуальной коробки vue init webpackUbuntu 18.04 под Windows. Я настроил vagrant для перенаправления порта 3000 на хост.)

  • К сожалению выкладываю npm run dev --host 0.0.0.0 --port 3000 не сработала - она ​​все еще работала на localhost: 8080.
  • Кроме того, файл webpack.config.jsне существует, и его создание тоже не помогло.
  • Тогда я обнаружил, что файлы конфигурации теперь находятся в build/webpack.dev.conf.jsbuild/webpack.base.conf.jsи build/webpack.prod.conf.js). Тем не менее, изменение этих файлов не выглядело хорошей идеей, поскольку они фактически считывали HOST и PORT из process.env.

Поэтому я искал, как установить переменные process.env и добился успеха, выполнив команду:

HOST=0.0.0.0 PORT=3000 npm run dev

После этого я, наконец, получаю «Ваше приложение запущено здесь: http://0.0.0.0:3000 », и, наконец, я могу увидеть его, просматривая localhost:3000с хост-машины.

РЕДАКТИРОВАТЬ: нашел другой способ сделать это, отредактировав хост и порт разработчика config/index.js.

krubo
источник
1

Для меня: изменение прослушивания хоста сработало:

.listen(3000, 'localhost', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

был изменен на:

.listen(3000, '0.0.0.0', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

и сервер начал слушать на 0.0.0.0

Ankush
источник
0

Я попробовал решения выше, но не повезло. Я заметил эту строку в package.json моего проекта:

 "bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"

},

Я посмотрел bin/webpack-dev-server.jsи нашел эту строку:

.describe("port", "The port").default("port", 8080)

Я изменил порт на 3000. Немного грубой силы, но у меня это сработало.

Sparky1
источник
0

В package.json измените значение «start» следующим образом

Примечание. Запустите $ sudo npm start. Для запуска сценариев реагирования на порту 80 необходимо использовать sudo.

введите описание изображения здесь

Мокеш Моха
источник
0

Для меня этот код работал. Просто добавьте это в свой package.jsonфайл:

"scripts": {
    "dev-server": "encore dev-server",
    "dev": "webpack-dev-server --progress --colors",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
},

И запустить скрипт «build», запустив npm run build

phrozion
источник
-1

Я попытался это легко использовать другой порт:

PORT=80 npm run dev
Kyrre
источник