Просмотр сайта Django и webpack в локальной сети

Я пытаюсь просмотреть мой локально обслуживаемый сайт на других устройствах, таких как мой телефон или другой ноутбук. На моем нынешнем ноутбуке сайт работает отлично, я вижу все (интерфейс), и я получаю 200-е, когда я посещаю сайт.

Однако, когда я пытаюсь получить доступ к сайту с помощью своего iphone и второго ноутбука, я не вижу никакого интерфейса, но получаю 200 секунд, когда пытаюсь получить доступ к сайту. Терминал на моей рабочей машине также сообщает мне, что есть запросы.

Я использую 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 на моей машине с рабочим сайтом, означающим, что запросы прошли. На моем втором ноутбуке я вижу это в инструментах разработчика:

Обратите внимание, что у него нет /public/ в src и href

На моей второй машине, если я нахожусь в 192.168.1.102:3000, я вижу интерфейс, и я могу щелкнуть по нему до 192.168.1.102:3000/bundle/main.js и увидеть мой встроенный javascript в webpack.

На моей второй машине я попытался изменить src и href в моих инструментах разработчика на 192.168.1.102:3000/bundle/main.js. Однако ничего не изменилось, и я все еще вижу пустой экран

Вот gist моей конфигурации webpack:

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

Ответ 1

Я полагаю, что ваша страница пуста, потому что все "приложение" генерируется javascript (по-видимому, это выглядит как минимум на ваших двух скриншотах, предполагая, что содержимое <div id="app"></div> не генерируется представлением django), но файл javascript недоступен для клиентов, которые отличаются от вашей машины разработки.

Трудно догадаться, почему это происходит без settings.py, urls.py и кода/шаблона view, генерирующего вашу домашнюю страницу, но у нас есть некоторые кандидаты, которые могут генерировать эти проблемы: CORS, localhost "отравления" и, в конечном счете, STATIC_URL неправильной конфигурации.

CORS: запрос считается междоменным, если любая из схем, имя хоста или порт не совпадают. Вы запрашиваете файл как от localhost:8000 (или 192.168.1.102:8000), так и от localhost:3000. Поэтому проблемы с CORS будут возрастать, если вы запрашиваете файлы с внешнего устройства/ноутбука;
localhost - это та же машина как 192.168.1.102 на вашем "рабочем компьютере", но это не на второй ноутбук или любое другое устройство в вашей сети;
Вы создаете URL-адреса для файлов css и js с помощью тегов {% url %} или {% static %}? Кажется, нет, но все же они выглядят динамически сгенерированными (т.е. Отсутствующая "общественная/" часть их URL-адреса). Я не знаю, как получить разные пути, используя vanilla Django и те же настройки, поэтому вы должны предоставить исходный код своего представления, по крайней мере, для получения точного ответа.

Решения (или, по крайней мере, подсказки:-)):

Служите связку из того же порта (добавьте их в STATIC путь)
Замените каждую ссылку localhost в ваших URL-адресах html (может потребоваться изменить вашу sites - см. рамки сайтов)
Используйте стандартные теги/фильтры шаблонов и избегайте жестко закодированных URL-адресов в шаблонах и коде.

или установите https://github.com/owais/django-webpack-loader/ (pip install django-webpack-loader) и следуйте их README или http://owaislone.org/blog/webpack-plus-reactjs-and-django/ руководство