it-swarm.com.ru

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

Существует некоторая конфигурация сервера разработки веб-пакетов (это часть всей конфигурации):

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).

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

76
malcoauri

(Если у вас 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.

139
forresto

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

devServer: {
    Host: '0.0.0.0',//your ip address
    port: 8080,
    ...
}
39
Igor Alemasow

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

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

./ngrok http 8080

ngrok output here

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

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

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

12
WitVault

Для меня то, что помогло, в конечном счете, добавило это в конфигурацию 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, это решение также позволит вам использовать модуль горячей перезагрузки реагирования на мобильном устройстве.

5
Andrus Asumets

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

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

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

--Host 0.0.0.0

и

--public <your-Host>:<port>

где your-Host - это имя хоста (для меня это (имя) 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",
    ...
  },

1
Blitz