Как получить доступ к webpack-dev-серверу с устройств в локальной сети?

Есть некоторая конфигурация сервера 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);
  };
}

Я выполняю webpack с помощью следующей команды:

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-server с --host 0.0.0.0- это позволяет серверу прослушивать запросы из сети, а не только из localhost.

Найдите адрес своего компьютера в сети. В терминале введите ifconfigи найдите en1раздел или тот, в котором есть что-то вродеinet 192.168.1.111

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

Вы можете установить свой 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-server:

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

а затем также изменив файл webpack.config.js babel:

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

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

По сравнению с ngrok.io это решение также позволит вам использовать модуль горячей перезагрузки react на мобильных устройствах.

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

Чтобы избежать «ответа на другие ответы» в качестве ответа, вот совет forresto плюс дополнительные сведения, которые вам понадобятся для выполнения этой работы:

Добавьте оба:

--host 0.0.0.0

и

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

где your-host - это имя хоста (для меня это (name) s-macbook-pro.local)), а port - это любой порт, к которому вы пытаетесь получить доступ (опять же, для меня это 8081).

Итак, вот как выглядит мой package.json:

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