環境

MacOS Monterey Version12.4
Chip: Apple M1 Max

使用技術

Python 3.10
Django
Django REST Framework
Vue.js
Vue CLI 5.0.1

全体のディレクトリ構成

django-vue-env/
 ├app/
 ├frontend/ 
 ├project/
 ├static/     
 ├templates/　
 ├venv/
 ├db.sqlite3
 └manage.py

GitHubリンク

手順

Python仮想環境を用意

プロジェクトを作成したいディレクトリを用意し、下記コマンドで仮想環境を用意する

% python -m venv venv

アクティベートする

(venv)% source venv/bin/activate

Djangoプロジェクトを作成

pipをアップデートする

(venv)% pip install --upgrade pip

DjangoとDjango REST Frameworkをインストールする

(venv)% pip install Django==4.1.3 djangorestframework==3.14.0

djangoプロジェクトを作成する

(venv)% django-admin startproject project .

Djangoのデフォルト画面が表示されるか確認する

(venv)% python manage.py runserver

OK!

Djangoアプリケーション作成

続いて、アプリケーションの作成を行います。

下記コマンドでappというアプリを作成します

(venv)% python manage.py startapp app

project/settings.pyのINSTALLED_APPSにrest_frameworkとappを追加します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'app'
]

app/views.pyを以下の内容に編集します。

from rest_framework import status
from rest_framework.views import APIView
from rest_framework.response import Response

class SampleAPIView(APIView):

    def get(self, request):
        return Response("OK", status=status.HTTP_200_OK)

GETリクエストが来たら単に”OK”をするだけのviewです。

project/urls.pyのurlpatternsを編集します。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include('app.urls')) # 追加
]

app/urls.pyを作成し、下記内容を記述します。

from django.urls import path
from app.views import SampleAPIView

urlpatterns = [
    path("sample/", SampleAPIView.as_view(), name="sample"),
]

一度、APIが動作するか確認します。

開発サーバーを立ち上げ、ブラウザでhttp://127.0.0.1:8000/api/v1/sample/を開きます。

以下の画面が表示されればOKです。

Vue.jsプロジェクトを作成

Vue CLIをインストールします。

※ 公式HP
https://cli.vuejs.org/guide/installation.htmlhttps://cli.vuejs.org/guide/installation.html

% npm install -g @vue/cli

インストールされたことを確認します。

% vue --version
@vue/cli 5.0.1

frontendというVueプロジェクトを作成します。

% vue create frontend

今回は、Default ([Vue 3] babel, eslint) を選択します。

Vue CLI v5.0.1
┌─────────────────────────────────────────┐
│                                         │
│   New version available 5.0.1 → 5.0.8   │
│                                         │
└─────────────────────────────────────────┘

? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features

以下のメッセージが表示されればOK。

Vue CLI v5.0.1
✨  Creating project in /Users/ryosukemaeda/Programming/Issues/django-vue-env/frontend.
⚙️  Installing CLI plugins. This might take a while...

added 848 packages in 12s
🚀  Invoking generators...
📦  Installing additional dependencies...

added 96 packages in 3s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project frontend.
👉  Get started with the following commands:

 $ cd frontend
 $ npm run serve

Vue.jsの開発サーバーを起動します。

まず、frontendディレクトリにチェンジディレクトリします。

% cd frontend

開発サーバーを起動します。

% npm run serve

以下のメッセージが表示されればOK。

DONE  Compiled successfully in 16996ms                 11:18:49 AM

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.20.10.9:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Vue.jsのデフォルト画面が表示されるか確認します。

ブラウザでhttp://localhost:8080/にアクセスします。

以下の画面が表示されればOKです。

フロントエンドからAPIを実行する処理を実装

axiosをinstallします。

axiosとは、HTTP通信を簡単に行うことができる、JavaScriptのライブラリです。

frontendディレクトリ内で、以下のコマンドを実行します。

% npm install axios

APIを実行する処理を実装します。

frontend/src/components/HelloWorld.vueの<script>タグの中を以下の様に編集します。

<script>
import axios from "axios";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      text: null,
    };
  },
  mounted() {
    axios
      .get("/api/v1/sample")
      .then((response) => (this.text = response.data))
      .catch((e) => console.log(e));
  },
};
</script>

APIの結果をUIに表示するようにします。

frontend/src/components/HelloWorld.vueのタグの中を整理します。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>
      {{ text }}
    </div>
  </div>
</template>

frontend/vue.config.jsファイルを以下の内容に修正します。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: "localhost",
    hot: "only",
    proxy: {
      "^/api": {
        target: "http://localhost:8000",
        changeOrigin: true,
      },
    },
  },
})

開発環境の動作確認

Djangoの開発サーバーとVue.jsの開発サーバーを起動します。

(venv)% python manage.py runserver

frontend% npm run serve

ブラウザでhttp://localhost:8080/にアクセスします。

以下の画面になっていればOKです。

本番環境用構築方法

DjangoでエントリーポイントとなるViewを作成します。

app/views.pyにIndexViewを作成します。

IndexViewは単に、index.htmlテンプレートを表示するだけのビューとします。

from django.views.generic.base import TemplateView
from rest_framework import status
from rest_framework.views import APIView
from rest_framework.response import Response

class SampleAPIView(APIView):

    def get(self, request):
        return Response("OK", status=status.HTTP_200_OK)

class IndexView(TemplateView):

    template_name = "index.html"

IndexViewをproject/urls.pyに設定します。

from django.contrib import admin
from django.urls import path, include, re_path

from app.views import IndexView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include('app.urls')),
    re_path(r"^.*$", IndexView.as_view())
]

ここで重要なのは、re_path(r"^.*$", IndexView.as_view())を最後に記述することです。

これにより、admin/とapi/v1/以外のパスをIndexViewでキャッチできます。

続いて、index.htmlを作成したいのですが、これはVue.jsで作成したUIを使用したいので、その手順に移ります。

まず、django-vue-env/以下にstaticとtemplatesのディレクトリを作成します。

django-vue-env/
 ├app/
 ├frontend/ 
 ├project/
 ├static/     # 追加
 ├templates/　# 追加
 ├venv/
 ├db.sqlite3
 └manage.py

frontend/vue.config.jsにビルド用の設定を追加します。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: "/",
  outputDir: "../static",
  assetsDir:  "../static",
  indexPath: "../templates/index.html",
  transpileDependencies: true,
  devServer: {
    host: "localhost",
    hot: "only",
    proxy: {
      "^/api": {
        target: "http://localhost:8000",
        changeOrigin: true,
      },
    },
  },
})

※Vue CLIの公式ドキュメント

https://cli.vuejs.org/config/

上記ファイルの編集ができたら、ビルドを実行します。

frontend% npm run build

templates/index.htmlが生成されており、staticディレクトリ以下にcss, jsファイルが生成されていればOK。

Djangoの開発サーバーを起動します。

(venv)% python manage.py runserver

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

以下の画面になっていればOKです。

ありがとうございました。