在局域网上查看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/引导