Comment accéder au serveur webpack-dev-server à partir d'appareils du réseau local?


112

Il existe une configuration de serveur de développement Webpack (elle fait partie de l'ensemble de la configuration):

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

J'exécute webpack avec la commande suivante:

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

Je peux accéder au serveur de développement en utilisant http://localhost:8080sur ma machine locale, mais je souhaite également accéder à mon serveur depuis mon mobile, ma tablette (ils sont dans le même réseau Wi-Fi).

Comment puis-je l'activer? Merci!


On dirait que cela devrait déjà fonctionner, étant donné que l'hôte est défini sur 0.0.0.0.
Felix Kling

@FelixKling mais quelle adresse IP dois-je utiliser dans Safari de mon iPhone pour cela?
malcoauri

L'adresse IP de la machine sur laquelle le serveur s'exécute.
Felix Kling

2
Je n'ai pu que le faire fonctionner avec webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIpvoir github.com/webpack/webpack-dev-server/issues/882
Nickofthyme

Réponses:


199

(Si vous êtes sur un Mac et un réseau comme le mien.)

Exécutez webpack-dev-server avec --host 0.0.0.0- cela permet au serveur d'écouter les requêtes du réseau, pas seulement de l'hôte local.

Recherchez l'adresse de votre ordinateur sur le réseau. Dans le terminal, tapez ifconfiget recherchez la en1section ou celle avec quelque chose commeinet 192.168.1.111

Dans votre appareil mobile sur le même réseau, visitez http://192.168.1.111:8080et profitez du bonheur des développeurs de rechargement à chaud.


4
Pour moi, ça marche aussi mais je reçois une page blanche. Je peux faire défiler et avoir un titre de site lorsque je navigue dans les onglets. Avez-vous peut-être une idée de comment résoudre ce problème?
moesphemie

2
Fonctionne également sur Ubuntu 17.10. Si elle ifconfign'est pas installée, l'adresse IP peut être trouvée viaip addr show
TitanFighter

1
Pour exécuter le serveur de développement avec --host 0.0.0.0, devons-nous toujours mettre à jour un fichier de configuration ou puis-je simplement exécuter npm run dev --host 0.0.0.0? Car actuellement, lorsque j'exécute la commande sans rien changer, cela génère une erreur. Si nous devons mettre à jour un fichier de configuration, pourriez-vous nous envoyer le nom de fichier / répertoire?
PrintlnParams

npm run dev --host 0.0.0.0 renvoie l'erreur qui indique que le programme recherche le "0.0.0.0" comme nom de module. Lorsque j'ai changé la valeur dans le fichier index.js de mon projet en "0.0.0.0" de "localhost", cela a fonctionné.
Vasily Hall

1
travaille toujours en décembre 18 pour moi. FYI plutôt que de chercher l'adresse IP dans le terminal, je fais ce qui suit: cmd + [espace]> Utilitaire réseau, mon adresse IP est le deuxième élément vers le bas. Cela semble fonctionner à chaque fois que je l'essaie.
jared

90

Vous pouvez définir votre adresse IP directement dans le fichier de configuration webpack:

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

1
Cela a fonctionné pour moi, la valeur est 0.0.0.0 qui a fonctionné.
Vasily Hall

2
Sur Windows, cela a fonctionné pour moi avec le wifi, j'ai écrit l'hôte dansipconfig > IPv4 Address
URL87

1
C'est de loin la meilleure réponse, oserais-je dire. Pourquoi n'a-t-il pas été marqué comme tel?!
Kamal le

Si vous souhaitez également utiliser l' open: trueindicateur, vous pouvez également définir openPage: 'http://localhost:8080'et votre navigateur se relancera correctement, au lieu d'essayer de charger automatiquement 0.0.0.0:8080 et d'échouer.
Mark le

Cela fonctionne, mais sachez que la liaison 0.0.0.0 dans les lieux publics où quelqu'un d'autre peut se connecter à votre appareil. Cela peut entraîner le vol de vos données. Vous aurez peut-être besoin d'un pare-feu pour le serveur de développement, comme celui-ci: github.com/funbox/webpack-dev-server-firewall
Igor Adamenko

16

Ce n'est peut-être pas la solution parfaite, mais je pense que vous pouvez utiliser ngrok pour cela. Ngrok peut vous aider à exposer un serveur Web local à Internet. Vous pouvez pointer ngrok vers votre serveur de développement local, puis configurer votre application pour utiliser l'URL ngrok.

Par exemple, supposons que votre serveur fonctionne sur le port 8080 . Vous pouvez utiliser ngrok pour exposer cela au monde extérieur en exécutant

./ngrok http 8080

ngrok sortie ici

L' ngrokavantage est qu'il fournit une version https plus sécurisée de l'url exposée que vous donnez à toute autre personne dans le monde pour tester ou montrer votre travail.

En outre, il dispose de nombreuses personnalisations disponibles dans la commande, telles que définir un nom d'hôte convivial au lieu d'une chaîne aléatoire dans l'url exposée et bien d'autres choses.

Si vous souhaitez simplement ouvrir votre site Web pour vérifier la réactivité mobile, vous devriez opter pour browersync .


8

Pour moi, ce qui a finalement aidé a été d'ajouter ceci à la configuration de webpack-dev-server:

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

puis en changeant également le fichier webpack.config.js de babel:

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

Maintenant, récupérez simplement le nom d'hôte de votre ordinateur ( hostnamesur le terminal OSX), ajoutez le port que vous avez défini et vous êtes prêt à partir sur mobile.

Par rapport à ngrok.io, cette solution vous permettra également d'utiliser le module de rechargement à chaud de react sur mobile.


7

Je ne pourrais pas commenter afin d'ajouter des informations supplémentaires à la réponse de forresto, mais ici à l'avenir (2019), vous devrez ajouter un --publicindicateur en raison d'une vulnérabilité de sécurité avec --host 0.0.0.0seul. Consultez ce commentaire pour plus de détails.

Afin d'éviter de «répondre à d'autres réponses» comme réponse, voici les conseils de Forresto et les détails supplémentaires dont vous aurez besoin pour que cela fonctionne:

Ajoutez les deux:

--host 0.0.0.0

et

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

où votre-hôte est le nom d'hôte (pour moi, c'est (nom) s-macbook-pro.local)) et le port est le port auquel vous essayez d'accéder (encore une fois, pour moi, c'est 8081).

Voici donc à quoi ressemble mon package.json:

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

Malheureusement, cela n'a pas fonctionné pour moi. Je suis sous Windows 10 et je ne peux tout simplement pas accéder à mon application Web de développement avec mon téléphone portable. Le navigateur mobile me donne juste une erreur de temporisation. Lorsque je lance une application Web sur le même ordinateur portable Windows 10, mais que je la sers via un tomcat, je peux accéder à cette application Web locale en tapant l'adresse IP de mon ordinateur portable Windows suivi du numéro de port. Je ne sais vraiment pas pourquoi c'est possible, mais je ne peux pas ouvrir une application Web locale qui s'exécute sur un serveur de développement Webpack. Quelqu'un a-t-il des idées sur ce que je pourrais essayer d'autre pour rendre mon accès Webapp local pour mon téléphone mobile?
ampersand83
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.