python - 在局域网中查看Django和webpack建站

Question

我正尝试在其他设备(例如手机或其他笔记本电脑)上查看本地服务的网站。在我目前的笔记本电脑上，网站运行良好，我看到了所有内容(前端)，当我访问该网站时，我得到了 200 秒。

但是，当我尝试使用我的 iPhone 和第二台笔记本电脑访问该站点时，我没有看到任何前端，但当我尝试访问该站点时确实出现了 200 秒。我工作机器上的终端也告诉我有请求进来。

我使用 Django 作为后端，我使用 webpack 捆绑/构建我的 Javascript 和 CSS，并使用 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 配置的要点:

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

Answer 1

我相信你的页面是空的，因为整个“应用程序”是由 javascript 生成的(至少在你的两个屏幕截图中看起来是这样，假设 <div id="app"></div> 的内容不是由 django View 生成的)但是 javascript 文件与您的开发机器不同的客户端无法访问。

如果没有您的 settings.py，很难猜出为什么会发生这种情况, urls.py和 view 的代码/模板生成您的主页，但我们有一些候选者可能会生成此问题:CORS、本地主机“中毒”以及最终的 STATIC_URL 配置错误。

1. CORS:请求被认为是跨域的，如果任何方案，主机名或端口 不匹配。您正在从 localhost:8000 请求文件(或 192.168.1.102:8000 )和来自 localhost:3000 .因此，如果您从外部设备/笔记本电脑请求文件，CORS 问题将会增加；
2. localhost是同一台机器作为 192.168.1.102 在你的“工作电脑”上，但它不在你的第二台电脑上笔记本电脑或您网络中的任何其他设备；
3. 您是否使用 {% url %} 为 css 和 js 文件生成 URL？或 {% static %}标签？似乎没有，但它们看起来仍然是动态生成的(即它们的 URL 中缺少的“public/”部分)。我不知道有什么方法可以使用 vanilla Django 和相同的设置来获取不同的路径，因此您至少应该提供 View 的源代码以获得准确的答案。

解决方案(或者至少是提示 :-)):

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/指南