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

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

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

Я использую Django в качестве backend, и я webpack / создаю свой 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

One Solution collect form web for “Просмотр сайта Django и webpack в локальной сети”

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

Трудно догадаться, почему это происходит без settings.py , urls.py и кода / шаблона view генерирующего вашу домашнюю страницу, но у нас есть некоторые кандидаты, которые могут генерировать эти проблемы: CORS, localhost «отравление» и, в конечном счете, 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-адреса). Я не знаю, как получить разные пути, используя vanilla Django и те же настройки, поэтому вы должны предоставить исходный код своего представления, по крайней мере, для получения точного ответа.

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

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

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

Python - лучший язык программирования в мире.