¿Cómo obtener acceso a webpack-dev-server desde dispositivos en la red local?

Hay alguna configuración del servidor de desarrollo webpack (es parte de toda la configuración):

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);
  };
}

Ejecuto webpack con el siguiente comando:

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

Puedo obtener acceso al servidor de desarrollo usando http://localhost:8080mi máquina local, pero también quiero tener acceso a mi servidor desde mi teléfono móvil, tableta (están en la misma red Wi-Fi).

¿Cómo puedo habilitarlo? ¡Gracias!

(Si está en una Mac y una red como la mía).

Ejecute webpack-dev-server con --host 0.0.0.0: esto permite que el servidor escuche solicitudes de la red, no solo localhost.

Busque la dirección de su computadora en la red. En la terminal, escriba ifconfigy busque la en1sección o la que tiene algo comoinet 192.168.1.111

En su dispositivo móvil en la misma red, visite http://192.168.1.111:8080y disfrute de la felicidad del desarrollador de recarga en caliente.

Puede configurar su dirección IP directamente en el archivo de configuración del paquete web:

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

Puede que no sea la solución perfecta, pero creo que puede usar ngrok para esto. Ngrok puede ayudarlo a exponer un servidor web local a Internet. Puede apuntar ngrok a su servidor de desarrollo local y luego configurar su aplicación para usar la URL de ngrok.

Por ejemplo, suponga que su servidor se ejecuta en el puerto 8080 . Puede usar ngrok para exponer eso al mundo exterior mediante la ejecución

./ngrok http 8080

Lo bueno ngrokes que proporciona una versión https más segura de la URL expuesta que le das a cualquier otra persona en el mundo para probar o mostrar tu trabajo.

También tiene mucha personalización disponible en el comando, como establecer un nombre de host fácil de usar en lugar de una cadena aleatoria en la URL expuesta y muchas otras cosas.

Si solo desea abrir su sitio web para verificar la capacidad de respuesta móvil, debe optar por Browersync .

Para mí, lo que me ayudó finalmente fue agregar esto a la configuración de webpack-dev-server:

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

y luego también cambiando el archivo webpack.config.js de babel:

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

Ahora solo obtenga el nombre de host de su computadora ( hostnameen el terminal de OSX), agregue el puerto que definió y estará listo para usar el dispositivo móvil.

En comparación con ngrok.io, esta solución también le permitirá usar el módulo de recarga en caliente de react en dispositivos móviles.

No pude comentar para agregar información adicional a la respuesta de forresto, pero aquí, en el futuro (2019), deberá agregar una --publicbandera debido a una vulnerabilidad de seguridad con --host 0.0.0.0solo. Consulte este comentario para obtener más detalles.

Para evitar "responder a otras respuestas" como respuesta, aquí está el consejo de forresto más los detalles adicionales que necesitará para que esto funcione:

Agregue ambos:

--host 0.0.0.0

y

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

donde su-host es el nombre de host (para mí es (nombre) s-macbook-pro.local)) y el puerto es el puerto al que está intentando acceder (de nuevo, para mí es 8081).

Así que así es como se ve mi package.json:

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