質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.60%

  • Python 3.x

    5900questions

    Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

  • Django

    984questions

    DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

  • Vue.js

    653questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • webpack

    226questions

Django + Vue.js(webpack使用)でView機能はVueのみを使う場合の環境設定について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 578

KoukoMatsumoto

score 41

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でも構いません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • euledge

    2018/06/02 11:39

    diangoのview機能を使わないと言うのは、diangoはAPIサーバーとしてのみ使いたいと言う意図でHTMLのレンダリングはvueでやりたいと言う意味でしょうか?

    キャンセル

  • KoukoMatsumoto

    2018/06/02 11:50

    非常に知見のある方の少ない中で、諦めておりましたが、反応いただきましてありがとうございます。はい、enledgeさんのおっしゃる通りです。そもそもdjangoをAPIサーバーとして使う場合はDjango REST Frameworkなどのモジュールが必須なのかなど、そのあたりも含めて色々模索しております。

    キャンセル

回答 1

checkベストアンサー

+2

 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の要素は以下のようなものだけでも良いということです。

<body id="app">

<script src="dist/app.js"></script>
</body>

この場合は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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/03 13:01

    enledge様、とても詳しいご回答ありがとうございます。
    なるほど・・・!確かにおっしゃる通りでした。djangoのテンプレートを使わない=nodeで表示と言う意味合いにもなってしまいますね。
    その意味ですと、2.Djangoのテンプレートエンジンを使用しない場合 こちらになりそうです。
    static以下にdistの中身を設置し、ルーティングを適切に設定、あとはDjango REST Framework にてAPI部分をになってもらうことでできるのですね。
    Djangoのご経験がない中でありがとうございます・・・!
    やはり、VueとDjangoという組み合わせは記事が実験系の物が多いだけに、とても少ないのでしょうね(涙)
    週明けに色々対応したいと思います。お忙しい中、本当にありがとうございました。

    キャンセル

  • 2018/06/03 13:09

    私も今の開発ではJava Springboot+vue.jsという環境です。最近のwebフレームワークは言語を問わず大体似たような構成になるので、その経験を役立てる事ができて良かったです。

    キャンセル

  • 2018/06/04 10:14

    euledge様、python以外のフレームワークだったのですか・・・!自分もrailsなどは使っていたのですが、vueなど最新js系の知識がなさすぎて横に知識を広げられませんでした。
    今回でちゃんと学んで理解したいと思います。本当にありがとうございます。

    キャンセル

  • 2018/06/04 15:35

    いただいたやり方で苦戦しつつも設置して見ました。
    静的なhtmlを返却するような処理はされているようです。
    問題は、npm buildしたdistの中身でのパスがdjangoで設置した時に読み込めない階層になっているようで、こちらの設定が必要のようです。
    webpackの設定の問題になりそうですので、引き続きこちら調査したいと思います。
    1つの壁は超えましたので、本当にありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Python 3.x

    5900questions

    Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

  • Django

    984questions

    DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

  • Vue.js

    653questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • webpack

    226questions