Як зробити так, щоб веб-пакет Dev-сервера запускався на порт 80 і на 0.0.0.0, щоб зробити його загальнодоступним?

Я новачок у цілому світі nodejs / reactjs, тож вибачтесь, якщо моє запитання звучить нерозумно. Тому я граю з reactabular.js .

Щоразу, коли я це роблю, npm startце завжди працює localhost:8080.

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

Крім того, додати до цього - як змусити його працювати на порту, 80якщо це взагалі можливо?

Щось подібне працювало на мене. Я здогадуюсь, це має працювати для вас.

Запустити 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()]

Ось як я це зробив, і, здається, працює досить добре.

У файл webpack.config.js додайте наступне:

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

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

Налаштуйте веб-пакет (у webpack.config.js) за допомогою:

devServer: {
  // ...
  host: '0.0.0.0',
  port: 80,
  // ...
}

Я новачок у розробці JavaScript та ReactJS. Мені не вдалося знайти відповідь, яка працює для мене, доки не з'ясував її, переглянувши код реакції-скриптів. Використовуючи ReactJS 15.4.1+ з використанням реакційних скриптів, ви можете почати зі спеціального хоста та / або порту, використовуючи змінні середовища:

HOST='0.0.0.0' PORT=8080 npm start

Сподіваємось, це допомагає новачкам, як я.

Слідом працював для мене -

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було моє ім'я комп’ютера, тому замініть тим, що є на вашій машині.

Якщо ви знаходитесь у програмі React, створеній за допомогою "create-react-app", перейдіть до свого package.jsonі змініть

"start": "react-scripts start",

до ... ( unix )

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

або до ... ( виграти )

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

Після мене працював у файлі конфігурації JSON:

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},

Я боровся з деякими іншими відповідями. (Моя установка: Я працюю npm run dev, з webpack 3.12.0, після створення свого проекту за vue init webpackдопомогою віртуальної скриньки Ubuntu 18.04 під Windows. У мене настроєний бродячий, щоб переслати порт 3000 хосту.)

• На жаль кладемо npm run dev --host 0.0.0.0 --port 3000 не спрацювало --- воно все ще працювало на localhost: 8080.
• Крім того, файл webpack.config.jsне існував, і його створення також не допомогло.
• Тоді я знайшов, що файли конфігурації тепер знаходяться в build/webpack.dev.conf.js(і build/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.

Для мене: зміна хоста прослуховування працювала:

.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

Я спробував рішення вище, але не пощастило. Я помітив цей рядок у пакеті мого проекту.json:

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

},

Я подивився bin/webpack-dev-server.jsі знайшов цю лінію:

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

Я змінив порт на 3000. Трохи жорстокий підхід, але це працювало на мене.

У package.json змініть значення "start" наступним чином

Примітка: запустіть $ sudo npm start , вам потрібно використовувати sudo для запуску сценаріїв реакції на порт 80

Для мене цей код спрацював. Просто додайте його у свій package.jsonфайл:

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

І запустіть сценарій «побудувати», запустивши npm run build

Я спробував це легко використовувати інший порт:

PORT=80 npm run dev