Visualizzazione di Django e sito Webpack installato su LAN

Question

Sto cercando di visualizzare il mio sito localmente servito su altri dispositivi come il mio telefono o un altro laptop. Sul mio portatile attuale il sito funziona bene, vedo tutto (frontend) e ottengo 200 secondi quando visito il sito.

Tuttavia, quando provo ad accedere al sito con il mio iphone e il secondo laptop, non vedo alcun frontend, ma ottengo 200 secondi quando provo ad accedere al sito. Il terminale sulla mia macchina di lavoro mi dice anche che ci sono le richieste che arrivano.

Io uso Django come backend e del pacco/costruire la mia Javascript e CSS con webpack e servire con webpack-dev-server.

Quando eseguo webpack vedo questo messaggio:

http://0.0.0.0:3000/ 
webpack result is served from http://localhost:3000/public/bundle/ 
content is served from ./public 

Quando carico mia pagina web sulla mia macchina di lavoro, gli strumenti di sviluppo mostra questo:

e tutto funziona.

Eseguo django con questo comando.

$ ./manage.py runserver 0.0.0.0:8000

mio ifconfig mi da:

inet 192.168.1.102

Con il mio secondo computer portatile, che visito 192.168.1.102:8000 e non vedo nulla sulla mia pagina. Ottengo un 200 sulla mia macchina con il sito funzionante che indica che le richieste sono passate attraverso. Nel mio secondo computer portatile che vedere questo negli strumenti di sviluppo:

Avviso doesnt devono /public/ nel src e href

Sulla mia seconda macchina, se visito 192.168.1.102:3000 vedo un interfaccia e sono in grado di fare clic su 192.168.1.102:3000/bundle/main.js e vedere il mio javascript webpack.

Sulla mia seconda macchina, ho provato a cambiare src e href nei miei strumenti di sviluppo su 192.168.1.102:3000/bundle/main.js. Tuttavia nulla sarebbe cambiato e ho ancora vedere una schermata vuota

Ecco una gist della mia webpack config:

https://gist.github.com/liondancer/7685b53dffa50d7d102d

Answer 1

credo che la pagina è vuota perché tutta la "app" è generato da javascript (sembra così nei tuoi due screenshot almeno, supponendo che il contenuto di <div id="app"></div> non sia generato da una vista di Django) ma il file javascript non è accessibile ai client che sono diversi dal tuo computer di sviluppo.

E 'difficile indovinare perché questo sta accadendo senza il tuo settings.py, urls.py e il codice/modello del view generare la pagina iniziale, ma abbiamo alcuni candidati che possano generare problemi di questo: CORS, localhost "avvelenamento" e, infine, STATIC_URL errori di configurazione.

1. CORS: Una richiesta è considerata tra domini se uno del regime, hostname, o porto non corrispondono. Si sta richiedendo il file sia da localhost:8000 (o 192.168.1.102:8000) sia da localhost:3000. Quindi i problemi CORS aumenteranno se richiedi i file da un dispositivo/laptop esterno;
2. localhost è la stessa macchina come 192.168.1.102 sul "computer di lavoro" ma non è sul tuo secondo computer portatile o su qualsiasi altro dispositivo nella rete;
3. Generate gli URL per i file css e js utilizzando i tag {% url %} o {% static %}? Sembra no, ma sembrano ancora generati dinamicamente (cioè la parte "pubblica /" mancante del loro URL). Non sono a conoscenza di un modo per ottenere percorsi diversi usando vanilla Django e le stesse impostazioni, quindi dovresti fornire il codice sorgente della tua vista, almeno, per ottenere una risposta precisa.

Solutions (o, almeno, suggerimenti :-)):

1. servire il pacco dalla stessa porta (aggiungerli al tuo STATIC path)
2. sostituire ogni localhost di riferimento nella vostra URL html (potrebbe essere necessario modificare il proprio sites - vedere sites framework)
3. Utilizzare tag/filtri modello standard ed evitare URL hard-coded nei modelli e nel codice.

o installare https://github.com/owais/django-webpack-loader/ (pip install django-webpack-loader) e seguire la loro README o http://owaislone.org/blog/webpack-plus-reactjs-and-django/ guida