Як отримати доступ до webpack-dev-сервера з пристроїв у локальній мережі?

Існує конфігурація сервера розробки веб-пакетів (це частина всієї конфігурації):

config.devServer = {
  contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
  stats: {
    modules: false,
    cached: false,
    colors: true,
    chunk: false
  },
  proxy: [{
    path: /^\/api\/(.*)/,
    target: options.proxyApiTarget,
    rewrite: rewriteUrl('/$1'),
    changeOrigin: true
  }]
};

function rewriteUrl(replacePath) {
  return function (req, opt) {  // gets called with request and proxy object
    var queryIndex = req.url.indexOf('?');
    var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
    req.url = req.path.replace(opt.path, replacePath) + query;
    console.log("rewriting ", req.originalUrl, req.url);
  };
}

Я виконую веб-пакет за допомогою наступної команди:

node node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --history-api-fallback --debug --inline --progress --config config/webpack.app.dev.js

Я можу отримати доступ до сервера розробників за допомогою http://localhost:8080своєї локальної машини, але я також хочу отримати доступ до свого сервера через мобільний планшетний ПК (вони знаходяться в тій же мережі Wi-Fi).

Як я можу це ввімкнути? Дякую!

(Якщо ви перебуваєте на Mac та таких мережах, як у мене.)

Запустіть webpack-dev-сервер за допомогою --host 0.0.0.0- це дозволяє серверу прослуховувати запити з мережі, а не лише localhost.

Знайдіть адресу комп’ютера в мережі. У терміналі введіть ifconfigі шукайте en1розділ чи розділ із чимось подібнимinet 192.168.1.111

На своєму мобільному пристрої в тій самій мережі завітайте http://192.168.1.111:8080та насолоджуйтесь гарячим завантаженням блаженства розробки.

Ви можете встановити ip-адресу безпосередньо у конфігураційному файлі webpack:

devServer: {
    host: '0.0.0.0',//your ip address
    port: 8080,
    disableHostCheck: true,
    ...
}

Це може бути не ідеальним рішенням, але я думаю, ви можете використовувати для цього ngrok . Ngrok може допомогти вам відкрити локальний веб-сервер в Інтернеті. Ви можете вказати ngrok на локальному сервері розробників, а потім налаштувати додаток для використання URL-адреси ngrok.

Наприклад, припустимо, ваш сервер працює на порту 8080 . Ви можете використовувати ngrok, щоб викрити це зовнішнім світом за допомогою бігу

./ngrok http 8080

Хороша річ у ngrokтому, що вона надає більш безпечну https- версію відкритого URL-адреси, яку ви надаєте будь-якій іншій людині світу, щоб перевірити або показати свою роботу.

Крім того, в цій команді є безліч налаштувань, таких як встановити зручне ім'я хоста замість випадкової рядки в відкритому URL-адресі та багато іншого.

Якщо ви просто хочете відкрити свій веб-сайт, щоб перевірити чутливість мобільних пристроїв, вам слід перейти до browersync .

Для мене, що допомогло врешті-решт, було додати це до конфігурації webpack-dev-сервера:

new webpackDev(webpack(config), {
    public: require('os').hostname().toLowerCase() + ':3000'
    ...
})

а потім також зміна файлу web-pack.config.js babel:

module.exports = {
    entry: [
        'webpack-dev-server/client?http://' + require('os').hostname().toLowerCase() + ':3000',
        ...
    ]
    ...
}

Тепер просто знайдіть ім’я хоста свого комп'ютера ( hostnameна терміналі OSX), додайте визначений вами порт, і ви зможете продовжувати мобільний телефон.

Порівняно з ngrok.io, це рішення також дозволить вам використовувати модуль гарячої перезавантаження реакції на мобільний телефон.

Я не міг прокоментувати, щоб додати додаткову інформацію до відповіді forresto, але тут у майбутньому (2019 р.) Вам потрібно буде додати --publicпрапор через вразливість безпеки із --host 0.0.0.0функцією поодинці. Перегляньте цей коментар для отримання більш детальної інформації.

Щоб уникнути "відповіді на інші відповіді" як відповіді, ось рада forresto плюс додаткові деталі, які вам знадобляться для цього:

Додати обидва:

--host 0.0.0.0

і

--public <your-host>:<port>

де ваш хост - ім'я хоста (для мене це (ім'я) s-macbook-pro.local)), а порт - це той порт, до якого ви намагаєтесь отримати доступ (знову ж таки, для мене це 8081).

Отже, ось як виглядає мій package.json:

  "scripts": {
    ...
    "start:webpack": "node_modules/.bin/webpack-dev-server --host 0.0.0.0 --public <name>s-macbook-pro.local:8081",
    ...
  },