javascript - content - ¿Cómo obtener acceso a webpack-dev-server desde dispositivos en la red local?
webpack dev server open (5)
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!
(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.
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",
...
},
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.
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,
...
}
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 .