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

webpack dev server open

Question

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:8080 en mi máquina local, pero también quiero obtener acceso a mi servidor desde mi tableta móvil (están en la misma red Wi-Fi).

¿Cómo puedo habilitarlo? ¡Gracias!

Answer 1

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

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

Encuentra la dirección de tu computadora en la red. En la terminal, escriba ifconfig y busque la sección en1 o la que en1 algo como inet 192.168.1.111

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

Answer 2

No pude comentar para agregar información adicional a la respuesta de forresto, pero aquí en el futuro (2019) deberá agregar una bandera --public debido a una vulnerabilidad de seguridad con --host 0.0.0.0 solo. Mira este comentario para 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 your-host es el nombre de host (para mí es (nombre) s-macbook-pro.local)) y port es cualquier puerto al que intente acceder (de nuevo, para mí es 8081).

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

Answer 3

Para mí, lo que finalmente ayudó 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 hostname su computadora ( hostname de hostname en la terminal de OSX), agregue el puerto que definió y estará listo para usar dispositivos móviles.

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.

Answer 4

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

Answer 5

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

Por ejemplo, supongamos que su servidor se ejecuta en el puerto 8080 . Puede usar ngrok para exponer eso al mundo exterior a través de la ejecución

./ngrok http 8080

Lo bueno de ngrok es que proporciona una versión https más segura de la URL expuesta que le das a cualquier otra persona en el mundo para que pruebe o muestre 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 browersync por browersync .