web-dev-qa-db-fra.com

Comment accéder à webpack-dev-server à partir de périphériques d'un réseau local?

Il y a une config de serveur de webpack dev (elle fait partie de la config complète):

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 à l'aide de http://localhost:8080 sur mon ordinateur local, mais je souhaite également accéder à mon serveur à partir de mon téléphone portable, ma tablette (ils sont sur le même réseau Wi-Fi).

Comment puis-je l'activer? Merci!

javascriptnode.jsnetworkingwebpackweb-development-server
84
malcoauri

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

Exécutez webpack-dev-server avec --Host 0.0.0.0 - cela permet au serveur d'écouter les demandes du réseau, pas seulement localhost.

Recherchez l'adresse de votre ordinateur sur le réseau. Dans le terminal, tapez ifconfig et cherchez la section en1 ou celle contenant quelque chose comme inet 192.168.1.111

Sur votre appareil mobile sur le même réseau, visitez http://192.168.1.111:8080 et appréciez le rechargement à chaud.

153
forresto

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,
    ...
}
42
Igor Alemasow

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 sur votre serveur de développement local, puis configurer votre application pour utiliser l'URL de 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 output here

La bonne chose à propos de ngrok est qu’elle fournit une version plus sécurisée https de l’URL exposée que vous donnez à toute autre personne du monde à tester. ou montrez votre travail.

En outre, il comporte 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 encore.

Si vous souhaitez simplement ouvrir votre site Web pour vérifier la réactivité de votre appareil mobile, vous devez choisir browersync .

14
WitVault

Pour moi, ce qui a finalement aidé à ajouter cela à 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 le nom d’hôte de votre ordinateur (hostname sur le terminal d’OSX), ajoutez le port que vous avez défini et vous voilà prêt à partir pour le mobile.

Comparée à ngrok.io, cette solution vous permettra également d’utiliser le module de rechargement à chaud de react sur mobile.

6
Andrus Asumets

Je ne pouvais pas commenter pour ajouter des informations supplémentaires à la réponse de forresto, mais ici, à l'avenir (2019), vous devrez ajouter un drapeau --public en raison d'une faille de sécurité liée à --Host 0.0.0.0 seul. Départ 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 ainsi que 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ù your-Host est le nom d'hôte (pour moi, il s'agit de (nom) s-macbook-pro.local)) et port est le port que vous essayez d'accéder (encore une fois, pour moi, il s'agit de 8081).

Alors, voici à 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",
    ...
  },
3
Blitz