Xem trang web được xây dựng trên Django và webpack trên LAN

Question

Tôi đang cố gắng xem trang web được phân phối cục bộ của mình trên các thiết bị khác như điện thoại của tôi hoặc máy tính xách tay khác. Trên máy tính xách tay hiện tại của tôi trang web hoạt động tốt, tôi thấy mọi thứ (lối vào) và tôi nhận được 200 khi tôi truy cập trang web.

Tuy nhiên, khi tôi cố truy cập trang web bằng máy tính xách tay iphone và thứ hai của mình, tôi không thấy bất kỳ giao diện người dùng nào nhưng tôi nhận được 200 khi tôi cố gắng truy cập trang web. Thiết bị đầu cuối trên máy làm việc của tôi cũng cho tôi biết rằng có các yêu cầu sắp tới.

Tôi sử dụng Django làm phụ trợ và tôi tạo/Javascript và CSS với webpack và phục vụ với webpack-dev-server.

Khi tôi chạy webpack tôi thấy thông báo này:

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

Khi tôi tải trang web của tôi trên máy tính làm việc của tôi, các công cụ phát triển cho thấy điều này:

và tất cả mọi thứ đang làm việc.

Tôi chạy django bằng lệnh này.

$ ./manage.py runserver 0.0.0.0:8000

My ifconfig mang lại cho tôi:

inet 192.168.1.102

Với máy tính xách tay thứ hai của tôi, tôi ghé thăm 192.168.1.102:8000 và tôi thấy không có gì trên trang của mình. Tôi nhận được một 200 trên máy của tôi với trang web hoạt động có nghĩa là các yêu cầu đã trải qua. Trên máy tính xách tay thứ hai của tôi, tôi thấy điều này trong các công cụ phát triển:

Thông báo nó không có /public/ trong src và href

trên máy thứ hai của tôi nếu tôi truy cập 192.168.1.102:3000 tôi thấy một giao diện và tôi có thể nhấp vào xung quanh để 192.168.1.102:3000/bundle/main.js và xem webpack của tôi được xây dựng javascript.

Trên máy thứ hai của mình, tôi đã cố gắng thay đổi src và href trong công cụ nhà phát triển của mình thành 192.168.1.102:3000/bundle/main.js. Tuy nhiên sẽ không có gì thay đổi và tôi vẫn nhìn thấy một màn hình trống

Đây là một gist của webpack cấu hình của tôi:

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

Answer 1

Tôi tin rằng trang của bạn là trống rỗng, vì toàn bộ "ứng dụng" được tạo ra bằng javascript (nó có vẻ như vậy trong hai ảnh chụp màn hình của bạn ít nhất, giả sử rằng nội dung của <div id="app"></div> không được tạo ra bởi một cái nhìn django) nhưng tập tin javascript là không thể truy cập cho các khách hàng khác với máy phát triển của bạn.

Thật khó để đoán lý do tại sao điều này xảy ra mà không cần bạn settings.py, urls.py và mã/mẫu của view tạo trang chủ của bạn nhưng chúng tôi có một số ứng cử viên mà có thể tạo ra các vấn đề này: CORS, localhost "ngộ độc" và cuối cùng STATIC_URL cấu hình sai.

1. CORS: Một yêu cầu được coi cross-domain nếu có chính sách bảo hiểm, hostname, hoặc cổng không khớp. Bạn đang yêu cầu cả hai tập tin từ localhost:8000 (hoặc 192.168.1.102:8000) và từ localhost:3000. Vì vậy, vấn đề CORS sẽ tăng lên nếu bạn yêu cầu tệp từ thiết bị/máy tính xách tay bên ngoài;
2. localhost là cùng một máy dưới dạng 192.168.1.102 trên "máy tính đang hoạt động" nhưng không nằm trên máy tính xách tay thứ hai hoặc bất kỳ thiết bị nào khác trong mạng của bạn;
3. Bạn có tạo URL cho các tệp css và js bằng cách sử dụng các thẻ {% url %} hoặc {% static %} không? Có vẻ như không, nhưng họ vẫn trông được tạo động (tức là phần "công khai /" bị thiếu của URL của họ). Tôi không biết cách để có được các đường dẫn khác nhau bằng cách sử dụng vanilla Django và các cài đặt tương tự, vì vậy bạn nên cung cấp mã nguồn của chế độ xem của bạn, ít nhất, để có được câu trả lời chính xác.

Solutions (hoặc, ít nhất, gợi ý :-)):

1. Phục vụ gói từ cùng một cổng (thêm chúng vào bạn STATIC path)
2. Thay thế mỗi localhost tài liệu tham khảo trong bạn URL html (có thể yêu cầu thay đổi số sites của bạn - xem sites framework)
3. Sử dụng thẻ/bộ lọc mẫu tiêu chuẩn và tránh URL được mã hóa cứng trong mẫu và mã.

hoặc cài đặt https://github.com/owais/django-webpack-loader/ (pip install django-webpack-loader) và làm theo README hoặc http://owaislone.org/blog/webpack-plus-reactjs-and-django/ dẫn