Q&A
diangoのview機能を使わないと言うのは、diangoはAPIサーバーとしてのみ使いたいと言う意図でHTMLのレンダリングはvueでやりたいと言う意味でしょうか?
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でも構いません。
非常に知見のある方の少ない中で、諦めておりましたが、反応いただきましてありがとうございます。はい、enledgeさんのおっしゃる通りです。そもそもdjangoをAPIサーバーとして使う場合はDjango REST Frameworkなどのモジュールが必須なのかなど、そのあたりも含めて色々模索しております。
回答1件
0
ベストアンサー
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の要素は以下のようなものだけでも良いということです。
html
1<body id="app"> 2 3<script src="dist/app.js"></script> 4</body>
この場合はDjangoがリクエストに応じたルーティングを行い、app.jsもDjangoが配信することになるので
webpackの出力先 dist/以下のapp.jsは ほかの cssやjsと同様に静的コンテンツとして表示可能なフォルダに出力することになるでしょう。
text
1static 2 +---js 3 +---css 4 +---dist 5 +---app.js
Djangoでの経験や理解があり nodeでサーバー立てる経験があまりないのであれば、2.Djangoのテンプレートエンジンを使用しない場合のほうがわかりやすいと思います。
私自身はDjangoの経験はないので以下の記事を紹介しておきます。
投稿2018/06/02 04:28
総合スコア2404
enledge様、とても詳しいご回答ありがとうございます。
なるほど・・・！確かにおっしゃる通りでした。djangoのテンプレートを使わない＝nodeで表示と言う意味合いにもなってしまいますね。
その意味ですと、2.Djangoのテンプレートエンジンを使用しない場合 こちらになりそうです。
static以下にdistの中身を設置し、ルーティングを適切に設定、あとはDjango REST Framework にてAPI部分をになってもらうことでできるのですね。
Djangoのご経験がない中でありがとうございます・・・！
やはり、VueとDjangoという組み合わせは記事が実験系の物が多いだけに、とても少ないのでしょうね（涙）
週明けに色々対応したいと思います。お忙しい中、本当にありがとうございました。
私も今の開発ではJava Springboot+vue.jsという環境です。最近のwebフレームワークは言語を問わず大体似たような構成になるので、その経験を役立てる事ができて良かったです。
euledge様、python以外のフレームワークだったのですか・・・！自分もrailsなどは使っていたのですが、vueなど最新js系の知識がなさすぎて横に知識を広げられませんでした。
今回でちゃんと学んで理解したいと思います。本当にありがとうございます。
いただいたやり方で苦戦しつつも設置して見ました。
静的なhtmlを返却するような処理はされているようです。
問題は、npm buildしたdistの中身でのパスがdjangoで設置した時に読み込めない階層になっているようで、こちらの設定が必要のようです。
webpackの設定の問題になりそうですので、引き続きこちら調査したいと思います。
１つの壁は超えましたので、本当にありがとうございます。
あなたの回答
tips
プレビュー
