Django + Vue 最小構成開発メモ #Vue.js

基本的な構成

Django (バックエンド)
Vue (フロントエンド)

Django + Vueはただバラバラに作るだけではうまく連携できないので、こういう構成にする必要がある（ざっくり）

注意事項

文中でDjango REST frameworkをインストールしますが、この記事では特に触れません。
Django + Vueで開発を行う際にはおそらく必要となるので最小構成としてインストールしています。

詰まったところ

それぞれのパッケージのバージョンの互換性
フォルダ構成

環境構築

※この記事での開発環境OSはWindows 10です

最初に直接Windowsにインストールするもの

（必須）Python 3.8.3
- pipを使う
（必須）node.js 12.18.0
- npmを使う
（必須）PyCharm Community
- Python用のIDEなので本来は必須ではないが、仮想環境も立ち上げてくれるし便利。いつもありがとう
- このチュートリアルではターミナルを含め、積極的に使っています
（任意）git
- いれたほうがベター

それぞれのパッケージマネージャからインストールしたもの
※インストールするタイミングは追々手順の中で示します

Python(pip)
- Django 3.0.8
- djangorestframework 3.11.0
- django-webpack-loader 0.7.0
node.js(npm)
- @vue/cli @4.4.6
- webpack-bundle-tracker @0.4.3

手順はここから

1．PyCharm上で仮想環境を作る

PyCharm上の[File→New Project]から新規プロジェクトを立ち上げる

新規プロジェクト立ち上げ画面

ターミナルを立ち上げて、仮想環境(venv)に入ってることを確認する

新しいフォルダを作ってその階層にターミナルで移動する

今回はdjango_vueフォルダを作った
cd django_vueで移動する
これはvenvフォルダをgitに含ませたくないから(.gitignoreで直接指定でもOKのはず)

Gitリポジトリにしておく

git initで空のGitリポジトリを作る
この先は適宜好きなタイミングでcommitしてね

2. Pythonの仮想環境上に必要なものをインストールする

この先pipでインストールする際にpipのバージョンが古いと怒られた時はこんなコマンドも使えます

python -m pip install --upgrade pip --force-reinstall
- PyCharmの仮想環境（venv）にデフォルトで入っているpipのバージョンが古いのでこのメッセージが出る

まずDjango

pip install django

次にdjangorestframework

pip install djangorestframework

最後にdjango-webpack-loader

pip install django-webpack-loader

この時点でpip freezeコマンドでインストールされたPythonパッケージを見てみる

インストールした３つ以外にも関連するパッケージがインストールされているのが見えるはず

ちなみに今はこんなフォルダ構成

3. Djangoプロジェクトを立ち上げて、ちょっと設定をする

Djangoプロジェクトを立ち上げる

django-admin startproject django_project
プロジェクト名がdjango_projectのプロジェクトが立ち上がる

django_projectフォルダに移動する

cd django_project

Django上でアプリを立ち上げる

python manage.py startapp myapp
アプリ名がmyappのアプリが作成される

今のところのフォルダ構成はこんな感じ

さらに一階層下のdjango_projectフォルダ内にあるsettings.pyを開き、編集する

INSTALLED_APPS
- どのアプリが使われるかを指定してあげる
  - rest_framework
  - myapp.apps.MyappConfig
  - webpack_loader

django_vue/django_project/django_project/settings.py

...

INSTALLED_APPS = [
    'rest_framework',
    'myapp.apps.MyappConfig',
    'webpack_loader',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

...

WEBPACK_LOADER
- こんな感じのものをsettings.pyの最後に追加してあげる
- これから後に作るfrontendフォルダ内のwebpack-stats.jsonというファイルを使ってwebpackをロードするよ、という話

django_vue/django_project/django_project/settings.py

...

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'

# ↑ここまではDjangoプロジェクト作成時にもともと記述されているところ
# ↓追加

# Webpack loader
WEBPACK_LOADER = {
    'DEFAULT': {
        'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),
    }
}

settings.py保存してね

ここでDjangoのWebサーバーを立ち上げてみる
まずはDjangoプロジェクトを立ち上げた際の初期設定がDBに反映されていないのでマイグレートする

python manage.py migrate

マイグレーションが終わったら開発用Webサーバーを立ち上げる

python manage.py runserver

ブラウザで http://127.0.0.1:8000/ にアクセスすると、こんな画面が出るはず

Djangoプロジェクトが立ち上がりました！やったね！

次の作業に進むためにWebサーバーを止めましょう

Webサーバーを止める時はターミナルでCtrl + Cを押す

4. npmで基本的なものをインストールする

frontendという名前のフォルダをmanage.pyと同階層に作る

フォルダ構成はこんな感じ

ターミナルでfrontendに移動する

cd frontend

@vue/cliをインストールする

npm i -g @vue/cli
iはインストールの意味
-gはグローバルでインストールするという意味で、cliが関わるものは-gでインストールしよう

Vueのプロジェクトを作成する

vue create .
.が大事で、現在のディレクトリにプロジェクトを作成できる

現在のディレクトリにインストールするか聞かれるので、Yと答える

プリセットを選べと言われるのでdefault (babel, eslint)を選ぶ
- ここでは矢印キーで移動する

インストールが終わるのを待つ

インストールが終わったらVueの開発用Webサーバーを立ち上げてみる
- npm run serve

ブラウザで表示されているURL（今回は http://localhost:8081 、つまり http://127.0.0.1:8081 と同義）にアクセスすると、こんな画面になる

これでVue.jsアプリが立ち上がりました！やったね！
- 終了させる時はターミナルでCtrl + C
- バッチジョブを終了しますか (Y/N)?と聞かれた場合はYと入力してEnterでOK

5. npmで今回必要なものをインストールする

インストールするもの

webpack-bundle-tracker
- さっきDjangoのsettings.pyで設定したwebpack-stats.jsonを吐いてくれるやつ
- webpack自体は@vue/cli内部で使われている

バージョンを指定してwebpack-bundle-trackerをインストールする
- npm i -D webpack-bundle-tracker@0.4.3
- webpack-bundle-trackerのバージョン0.4.3をインストールしろ、という意味
- -Dは開発用のdevDependenciesとして登録される
- -Dは--save-devでも良い
- バージョン指定しないと最新のバージョン1.0.0alpha.1が入ってしまい、これを使うとDjango側でTypeError: string indices must be integersのようなエラーが出てしまう

ここまででこんなファイル構成になるはず

frontendフォルダ内にたくさんのファイルができました

6. Vueプロジェクトの設定ファイルを作る

frontendフォルダ直下（package.jsonと同じ階層）にvue.config.jsというファイルを作る

vue.config.jsに以下のように書く

django_vue/django_project/frontend/vue.config.js

const BundleTracker = require('webpack-bundle-tracker')

// Change this to match the path to your files in production (could be S3, CloudFront, etc.)
const DEPLOYMENT_PATH = '/static/dist/'

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? DEPLOYMENT_PATH : 'http://localhost:8080/',
    outputDir: '../myapp/static/dist',

    devServer: {
        public: 'localhost:8080',
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },

    configureWebpack: {
        plugins: [
            new BundleTracker({ path: __dirname, filename: 'webpack-stats.json' }),
        ],
    },
}

outputDirのところが重要で、ここで一階層上のmyappフォルダ内、その中のstaticフォルダ内、さらにはその中のdistフォルダの中にVueアプリで作成したjsなどを吐くことを指定する
configureWebpackのところは、webpackの情報を保存しておくファイルのファイル名とディレクトリを指定している（先にDjangoのsettings.pyで指定したwebpack-stats.jsonというファイル）

7. Vueプロジェクトをビルドする

ビルドするとwebpackの情報が入ったwebpack-stats.jsonや、Vueプロジェクトファイルなどがバンドルされたファイルが生成される

そのままfrontendフォルダ内でnpm run buildコマンドを実行する

ファイル構成はこんな感じになる
- frontendフォルダ内にwebpack-stats.jsonが生成される
- myappフォルダ内にstatic、その中のdist内にバンドルされたファイルが生成される

8. Djangoに戻り、表示するためのHTMLファイルを作る

Djangoに表示させるためのHTMLファイルを作る

1. myappフォルダ内にtemplatesフォルダを作る
2. templatesフォルダ内に再度myappフォルダを作る
3. このmyappフォルダ内にindex.htmlを作る
- Djangoはtemplates/<Djangoアプリ名>という名前のフォルダからHTMLを探します

階層はこうなる

index.htmlを以下の内容に編集する

django_vue/django_project/myapp/templates/myapp/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Vue.js + Django</title>
    </head>
    <body>
        {% load render_bundle from webpack_loader %}
        <div id="app">
            <app></app>
        </div>
        {% render_bundle "chunk-vendors" %}
        {% render_bundle "app" %}
    </body>
</html>

webpack_loaderの中のrender_bundleをロードし、"chunk-vendors"と"app"を呼び出させるHTML
{% load render_bundle from webpack_loader %}のロードがうまくいかないとDjangoからOSErrorで怒られる
- その場合はwebpack-stats.jsonの正しいパスが指定できていなかったりする

9. 指定したURLに表示する項目をDjangoで指定する

一番奥のdjango_projectフォルダにあるurls.pyを編集する

以下のスクリーンショットでハイライトされているurls.pyを開く

もともと入っているコードもあるが、それを以下のように追記する

django_vue/django_project/django_project/urls.py

"""django_project URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='myapp/index.html'), name='myapp_index'),
]

path('', ...というのはURLのrootを叩いた時の表示の設定をしてますよ、という意味
- 開発環境の場合 http://127.0.0.1:8000 がrootになる
template_name='myapp/index.html'と指定してあげることで「myapp/templates/myapp/index.htmlを開く」とDjangoが理解してくれる
本来はこのようなURLの設定方法は行わない
- 本来は各アプリに対してurls.pyを作成し、そこで表示させるURLなどを指定する
- 今回は簡便に済ませるために指定したディレクトリにあるindex.htmlを直接開くようにしている

10. Djangoの開発用Webサーバーを立ち上げる

ターミナルに戻り、現在はfrontendディレクトリに入っているはずなので一階層上（manage.pyがある階層）まで出る

cd ../

Webサーバーを立ち上げる

python manage.py runserver

ブラウザで http://127.0.0.1:8000/ にアクセスする

Vue.jsを使ったHTMLがDjangoで表示されました！やったね！

最後に

自分で環境構築する時にうまくいかない時も結構あったので、この記事が誰かの参考になれば幸いです！