在局域網上查看Django和webpack構建的站點

Question

我正在嘗試在其他設備（如我的電話或其他筆記本電腦）上查看我本地提供的站點。在我目前的筆記本電腦上，該網站運行良好，我看到了一切（前端），當我訪問該網站時，我獲得了200s。

但是，當我嘗試使用我的iphone和第二臺筆記本電腦訪問該網站時，我沒有看到任何前端，但是當我嘗試訪問該網站時，我確實得到了200s。我的工作機器上的終端還告訴我，有進來的請求。

我用Django作爲後端和我捆綁/建立我的Javascript和CSS與webpack與webpack-dev-server爲它服務。

當我運行的WebPack我看到這條消息：

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

當我打開我的我的工作機上的網頁，開發人員工具顯示了這個：

和一切工作。

我用這個命令運行django。

$ ./manage.py runserver 0.0.0.0:8000

我ifconfig給我：

inet 192.168.1.102

我的第二個筆記本電腦，我訪問192.168.1.102:8000，我看到我的網頁上什麼都沒有。我在我的機器上獲得了一個200，該網站的工作意味着請求已經完成。我的第二個筆記本電腦，我看到這個開發工具：

注意它沒有在src和href

/public/在我的第二臺機器，如果我訪問192.168.1.102:3000我看到一個界面，我能夠點擊到192.168.1.102:3000/bundle/main.js並看到我的webpack構建的JavaScript。

在我的第二臺機器上，我嘗試將我的開發人員工具中的src和href更改爲192.168.1.102:3000/bundle/main.js。但是什麼都不會改變，我仍然看到空白屏幕

這裏是我的WebPack配置的gist：

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

Answer 1

我相信你的網頁是空的，因爲是由JavaScript生成整個「應用程序」（至少在你的兩個截圖中看起來如此，假設<div id="app"></div>的內容不是由django視圖生成的），但是JavaScript文件對於不同於開發機器的客戶端是不可訪問的。

很難猜到這是爲什麼沒有view生成您的主頁您settings.py，urls.py和代碼/模板發生，但我們有一些考生可能產生這樣的問題：CORS，本地主機「中毒」，並最終STATIC_URL配置錯誤。

1. CORS：請求被認爲是跨域如果任何方案， 主機名，或端口不匹配的。您正在申請localhost:8000（或192.168.1.102:8000）和localhost:3000的文件。因此，如果您從外部設備/筆記本電腦請求文件，CORS問題將會增加;
2. localhost與您的「工作計算機」上的機器 是192.168.1.102相同，但它不在您的第二臺筆記本電腦或網絡中的任何其他設備上;
3. 你生成使用{% url %}或{% static %}標籤的CSS的URL和js文件？看起來不是，但它們看起來仍然是動態生成的（即URL的缺失「公開/」部分）。我不知道使用vanilla Django和相同設置獲取不同路徑的方法，所以您應該至少提供您的視圖的源代碼，以獲得準確的答案。

解決方案（或者，至少，提示:-)）：

1. 爲來自同一個端口（它們添加到您的STATIC path）
2. 捆在更換每localhost您參考html網址（可能需要更改您的sites - 請參閱sites framework）
3. 使用標準模板標記/過濾器並避免模板和代碼中的硬編碼URL。

或安裝https://github.com/owais/django-webpack-loader/（pip install django-webpack-loader），並按照他們的自述或http://owaislone.org/blog/webpack-plus-reactjs-and-django/引導