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

112

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!

malcoauri
fuente
Parece que eso ya debería funcionar, dado que el host está configurado en 0.0.0.0.
Felix Kling
@FelixKling, pero ¿qué dirección IP debo usar en Safari de mi iPhone?
malcoauri
La IP de la máquina donde se ejecuta el servidor.
Felix Kling
2
Solo pude hacerlo funcionar con webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIpver github.com/webpack/webpack-dev-server/issues/882
Nickofthyme

Respuestas:

199

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

forresto
fuente
4
Para mí también está funcionando, pero tengo una página en blanco. Puedo desplazarme y tener un título de sitio cuando navego por las pestañas. ¿Quizás tienes una idea de cómo solucionar este problema?
moesphemie
2
También funciona en Ubuntu 17.10. Si ifconfigno se instala, la dirección IP se puede encontrar a través deip addr show
TitanFighter
1
Para ejecutar el servidor de desarrollo --host 0.0.0.0, ¿deberíamos actualizar algún archivo de configuración o simplemente puedo ejecutarlo npm run dev --host 0.0.0.0? Porque actualmente, cuando ejecuto el comando sin cambiar nada, arroja un error. Si tenemos que actualizar algún archivo de configuración, ¿podría indicarnos el nombre del archivo / directorio?
PrintlnParams
npm run dev --host 0.0.0.0 arroja el error que indica que el programa está buscando "0.0.0.0" como nombre de módulo. Cuando cambié el valor dentro del archivo index.js de mi proyecto a "0.0.0.0" de "localhost", funcionó.
Vasily Hall
1
todavía trabajando en diciembre del 18 para mí. Para su información, en lugar de buscar la dirección IP en la terminal, hago lo siguiente: cmd + [espacio]> Utilidad de red, mi dirección IP es el segundo elemento hacia abajo. Eso parece funcionar cada vez que lo intento.
jared
90

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,
    ...
}
Igor Alemasow
fuente
1
Esto funcionó para mí, el valor es 0.0.0.0 que funcionó.
Vasily Hall
2
En Windows funcionó para mí con wifi escribí el host enipconfig > IPv4 Address
URL87
1
Esta, de lejos, es la mejor, me atrevo a decir, la única respuesta. ¿Por qué no se ha marcado como tal?
Kamal
Si también desea usar la open: truebandera, también puede configurar openPage: 'http://localhost:8080'y su navegador se iniciará correctamente nuevamente, en lugar de intentar cargar automáticamente 0.0.0.0:8080 y fallar.
Marcos
Funciona, pero tenga en cuenta la vinculación 0.0.0.0 en lugares públicos donde otra persona puede conectarse a su dispositivo. Puede provocar el robo de sus datos. Es posible que necesite un firewall para el servidor de desarrollo, como este: github.com/funbox/webpack-dev-server-firewall
Igor Adamenko
16

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

salida ngrok aquí

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 .

WitVault
fuente
8

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.

Andrus Asumets
fuente
7

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",
    ...
  },
Bombardeo aéreo
fuente
Desafortunadamente, eso no funcionó para mí. Estoy en Windows 10 y no puedo acceder a mi aplicación web de desarrollo con mi teléfono móvil. El navegador móvil solo me da un error de tiempo de espera. Cuando inicio una aplicación web en la misma computadora portátil con Windows 10, pero la sirvo a través de un Tomcat, puedo acceder a esa aplicación web local escribiendo la dirección IP de mi computadora portátil con Windows seguida del número de puerto. Realmente no sé por qué es posible, pero no puedo abrir una aplicación web local que se esté ejecutando en un servidor de desarrollo de paquetes web. ¿Alguien tiene alguna idea sobre qué más podría intentar hacer que mi aplicación web local acceda a mi teléfono móvil?
ampersand83