Come accedere a webpack-dev-server dai dispositivi nella rete locale?

C'è un po 'di configurazione del server webpack dev (fa parte dell'intera configurazione):

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

Eseguo webpack con il seguente 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

Posso accedere al server di sviluppo utilizzando http://localhost:8080sulla mia macchina locale, ma voglio anche accedere al mio server dal mio cellulare, tablet (sono nella stessa rete Wi-Fi).

Come posso abilitarlo? Grazie!

(Se sei su un Mac e una rete come la mia.)

Esegui webpack-dev-server con --host 0.0.0.0: questo consente al server di ascoltare le richieste dalla rete, non solo dall'host locale.

Trova l'indirizzo del tuo computer sulla rete. Nel terminale, digita ifconfige cerca la en1sezione o quella con qualcosa di simileinet 192.168.1.111

Nel tuo dispositivo mobile sulla stessa rete, visita http://192.168.1.111:8080e goditi la calda felicità degli sviluppatori.

Puoi impostare il tuo indirizzo IP direttamente nel file di configurazione del webpack:

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

Potrebbe non essere la soluzione perfetta, ma penso che tu possa usare ngrok per questo. Ngrok può aiutarti a esporre un server web locale a Internet. Puoi puntare ngrok al tuo server di sviluppo locale e quindi configurare la tua app per utilizzare l'URL di ngrok.

Ad esempio, supponiamo che il tuo server sia in esecuzione sulla porta 8080 . Puoi usare ngrok per esporlo al mondo esterno tramite la corsa

./ngrok http 8080

La cosa buona ngrokè che fornisce una versione https più sicura dell'URL esposto che fornisci a qualsiasi altra persona nel mondo per testare o mostrare il tuo lavoro.

Inoltre ha molte personalizzazioni disponibili nel comando come impostare un nome host user friendly invece di una stringa casuale nell'URL esposto e molte altre cose.

Se vuoi solo aprire il tuo sito web per controllare la reattività mobile, dovresti usare browersync .

Per me, ciò che ha aiutato alla fine è stato aggiungere questo alla configurazione di webpack-dev-server:

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

e poi cambiando anche il file webpack.config.js di babel:

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

Ora prendi il nome host del tuo computer ( hostnamesul terminale di OSX), aggiungi la porta che hai definito e sei a posto per andare sul cellulare.

Rispetto a ngrok.io, questa soluzione ti consentirà anche di utilizzare il modulo di ricarica a caldo di react su dispositivi mobili.

Non ho potuto commentare per aggiungere ulteriori informazioni alla risposta di forresto, ma qui in futuro (2019) dovrai aggiungere un --publicflag a causa di una vulnerabilità di sicurezza con --host 0.0.0.0solo. Dai un'occhiata a questo commento per maggiori dettagli.

Per evitare di "rispondere ad altre risposte" come risposta, ecco il consiglio di forresto più i dettagli aggiuntivi necessari per far funzionare questo:

Aggiungi entrambi:

--host 0.0.0.0

e

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

dove tuo-host è il nome host (per me è (nome) s-macbook-pro.local)) e la porta è qualunque porta a cui stai tentando di accedere (di nuovo, per me è 8081).

Quindi ecco come appare il mio package.json:

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