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

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!

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

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

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

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 .

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.

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