9
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Django REST FrameworkとVue.jsの環境構築

Posted at

環境

  • 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

Screen Shot 2022-11-12 at 10.44.12.png

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です。
Screen Shot 2022-11-12 at 11.09.35.png

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です。

Screen Shot 2022-11-19 at 11.20.50.png

フロントエンドから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です。

Screen Shot 2022-11-19 at 11.57.58.png

本番環境用構築方法

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です。

Screen Shot 2022-11-30 at 20.12.14.png

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

9
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?