質問: Django + Vue.jsでwebアプリケーションを作りたいと考えています。 Vue.jsのベースはvue-cliで作ります。 pythonなどはすべて最新版(3.6系)を使います。 * webpackでbuildしたdistの中身でMVCにおけるviewの部分を描画したい * Djangoのviewの機能は使わない(DjangoはAPIサーバーおよび、開発時の一時的な表示確認用のwebサーバーとして利用します。APIのみの利用にするにはDjango REST Frameworkが必須なのかなどは調査中ですが、もしこちらもお詳しい方がいればご指摘いただければと思います) この構成にしたいのですが、 * root(http://URL/)にアクセスした時でも問題なく表示する設定方法 * webpackでのpackage.jsonのbuildのパスをどのようにすればいいのか * djangoにwebpackのdistの中身をどこにおけばいいのか この辺りの設定方法の鉄板の方法をお教えいただいてよろしいでしょうか? Django + Vue のキーワードで検索しておりますが、package.jsonの設定がなかったり(webpackで固めず、djangoのview機能を使っていると考えられます)、このような構成で作っている方があまりいないようで、情報が見当たりません。 また、そもそもこの方法がまずいなどあればお教えいただけると幸いです。 URLでも構いません。
回答: ### 1.Djangoでレンダリングを一切行わない場合 DjangoをAPIサーバーとしてのみ使用するということであれば viewのHTML部分をレンダリングするのは何なのか?ということを検討する必要があります。 Djangoで行わないのであればそれに代わるHTMLのレンダリングサーバーを別途立てる必要があるので まず考えられるのはvueで用いているnodeを使用したものになるでしょう。 その場合は、HTMKLの表示はDjangoの管理外なのでnode+vueで全てエンドポイントのルーティングなどを行うことになります。そのうえでDjangoはAPIとしてvue内から呼び出すことになるかと思います。 したがってDjangoでvueの出力フォルダをどのように見せるということは関係なくなります。 ### 2.Djangoのテンプレートエンジンを使用しない場合 もう一つ、HTMLの初期状態のレンダリングはDjangoで行って、テンプレート機能は使わずにデータの表示やUIに関してはvueで行うという方法もあるかと思います。 これが `Django REST Framework`ということになります。 この場合はDjangoが空のHTMLを出力することになり、そのHTML内からvueで出力したapp.jsを呼び出すことになります。 極端に言うとDjangoで出力するHTMLの要素は以下のようなものだけでも良いということです。 ``` ``` この場合はDjangoがリクエストに応じたルーティングを行い、app.jsもDjangoが配信することになるので webpackの出力先 dist/以下のapp.jsは ほかの cssやjsと同様に静的コンテンツとして表示可能なフォルダに出力することになるでしょう。 ``` static +---js +---css +---dist +---app.js ``` Djangoでの経験や理解があり nodeでサーバー立てる経験があまりないのであれば、`2.Djangoのテンプレートエンジンを使用しない場合`のほうがわかりやすいと思います。 私自身はDjangoの経験はないので以下の記事を紹介しておきます。 Qiita - Django REST framework with Vue.js