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

Question

C'è qualche server di webpack dev config (è parte del tutto config):

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 ottenere l'accesso al server dev utilizzando http://localhost:8080 su la mia macchina locale, ma voglio anche avere accesso al mio server dal mio cellulare, tablet (sono nella stessa rete Wi-Fi). Come posso abilitarlo? Grazie!

Answer 1

Potrebbe non essere la soluzione perfetta ma penso che sia possibile utilizzare ngrok per questo. Ngrok può aiutare esporre un server Web locale a Internet. È possibile puntare ngrok sul proprio server di sviluppo locale e quindi configurare l'app per utilizzare l'URL ngrok.

ad esempio, supponiamo che il server sia in esecuzione sulla porta . È possibile utilizzare ngrok di esporre che al mondo esterno tramite l'esecuzione

./ngrok http 8080 

buona cosa ngrok è che fornisce una più sicura https versione di url esposti, che si dà a qualsiasi altra persona in il mondo per testare o mostrare il tuo lavoro.

Inoltre ha un sacco di personalizzazione disponibile nel comando come impostare un nome utente hostable invece di una stringa casuale nell'URL esposto e molte altre cose.

Se si desidera semplicemente aprire il sito Web per verificare la reattività dei dispositivi mobili, è necessario rivolgersi al numero browersync.

Answer 2

(Se siete su un Mac e di rete come il mio.) Webpack-dev-server di

Run con --host 0.0.0.0 - questo permette al server di ascoltare le richieste provenienti dalla rete, non solo localhost.

Trova l'indirizzo del computer sulla rete. Nel terminale digitare ifconfig e cercare la sezione en1 o quello con qualcosa come inet 192.168.1.111

nel vostro dispositivo mobile sulla stessa rete, visitare e godere http://192.168.1.111:8080 caldo beatitudine ricarico dev.

Answer 3

Per me, ciò che ha contribuito alla fine è stato l'aggiunta di questo al webpack-dev-config server:

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

e quindi anche cambiando il file webpack.config.js di babele:

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

Ora basta Ottieni il tuo computer hostname (hostname sul terminale OSX), aggiungi la porta che hai definito e sei a posto sul cellulare.

Rispetto a ngrok.io, questa soluzione consente anche di utilizzare il modulo di ricarica Hot di Reagire su dispositivo mobile.