Как получить доступ к 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

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

Как я могу включить это? Спасибо!

Ответ 1

(Если вы находитесь в Mac и сети, как моя.)

Запустите webpack-dev-сервер с --host 0.0.0.0 - это позволяет серверу слушать запросы из сети, а не только локальные.

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

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

Ответ 2

Вы можете установить свой IP-адрес прямо в конфигурационном файле webpack:

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

Ответ 3

Возможно, это не идеальное решение, но я думаю, что вы можете использовать ngrok для этого. Ngrok может помочь вам подключить локальный веб-сервер к Интернету. Вы можете указать ngrok на своем локальном сервере разработчика, а затем настроить приложение на использование URL-адреса ngrok.

Например, предположим, что ваш сервер работает через порт 8080. Вы можете использовать ngrok, чтобы показать это внешнему миру, запустив

./ngrok http 8080

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

Кроме того, в команде доступно множество настроек, таких как установка удобного имени хоста вместо случайной строки в отображаемом URL и многое другое.

Если вы просто хотите открыть свой веб-сайт, чтобы проверить мобильность, вам нужно перейти на browersync.

Ответ 4

Для меня, что помогло в конечном итоге добавить это в конфигурацию webpack-dev-server:

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

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

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

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

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

Ответ 5

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

Чтобы не "отвечать на другие ответы" в качестве ответа здесь для получения советов и дополнительных деталей, вам необходимо выполнить эту работу:

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

--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",
    ...
  },