LANでDjangoとWebpackで構築したサイトを表示

Question

自分の電話や別のラップトップなどの他のデバイスでローカルに配信されたサイトを表示しようとしています。私の現在のラップトップでは、サイトは正常に動作し、私はすべて（フロントエンド）を参照し、私がサイトを訪問すると私は200を取得します。

しかし、自分のiPhoneと2台目のノートパソコンでサイトにアクセスしようとすると、フロントエンドは表示されませんが、サイトにアクセスしようとすると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 

私は私の作業機に私のWebページをロードすると、開発者向けツールは、これを示しています。

このコマンドでdjangoを実行します。マイifconfig

$ ./manage.py runserver 0.0.0.0:8000

は私を与える：

私の第二のラップトップで

inet 192.168.1.102

、私は192.168.1.102:8000を訪問し、私は自分のページに何も表示されません。私は200を私のマシン上で取得し、要求が完了したことを意味するサイトを稼動させます。私の第二のラップトップ上で、私は、開発者向けツールでこれを参照してください。私はインターフェイスを見て私は192.168.1.102:3000を訪問する場合

お知らせが、それは私の第二のマシンでsrcとhref

で/public/を持っているdoesntの192.168.1.102:3000/bundle/main.jsにクリックして、私のwebpackがjavascriptをビルドするのを見ることができます。

私の2台目のマシンでは、開発ツールの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ビューによって生成されないと仮定して、あなたの2つのスクリーンショットではそうだと思われますが、javascriptファイルは開発マシンとは異なるクライアントからアクセスできません。

それは、これはあなたのホームページを作成viewのごsettings.py、urls.pyおよびコード/テンプレートなしで起こっている理由を推測するのは難しいが、我々はこの問題を生成することができるいくつかの候補があります：CORS、localhostの「中毒」を、最終的にSTATIC_URL設定ミス。

1. CORS：スキーム、 ホスト名、または一致しないポートのいずれかの場合には要求がクロスドメインと考えられています。あなたはlocalhost:8000（または192.168.1.102:8000）からとlocalhost:3000から両方のファイルを要求しています。したがって、外部デバイス/ラップトップからファイルを要求するとCORSの問題が発生します。
2. localhostは、同じ「 」という192.168.1.102の「作業用コンピュータ」ですが、ご使用のネットワーク内の別のデバイスである にはありません。
3. あなたは{% url %}や{% static %}タグを使用して、CSSやJSファイルのURLを生成しますか？それは何のようだが、それでも彼らは、動的に（そのURLのすなわち欠落している「公共/」の部分）が生成見えます。私はバニラジャンゴと同じ設定を使用して別のパスを取得する方法を認識していないよ、あなたは正確な答えを得るために、少なくとも、あなたのビューのソースコードを提供する必要があります。

ソリューション（あるいは、少なくとも、:-)ヒント）：

1. あなたの内のすべてのlocalhost参照を交換し
2. （あなたSTATIC pathに追加）と同じポートからバンドルをサーブテンプレートやコードにハードコードされたURLを
3. 使用する標準テンプレートタグ/フィルタと避ける - HTMLのURL（参照sites frameworkそれはあなたのsitesを変更する必要があります）。

またはhttps://github.com/owais/django-webpack-loader/（pip install django-webpack-loader）をインストールして、ここではそのREADMEまたはhttp://owaislone.org/blog/webpack-plus-reactjs-and-django/ガイド