Zenn
Open14

DIV(Django-Inertia-Vue)

django
Vue.js
inertia
gzgz

ということで、今日はInertiaを使って、DjangoとVueを繋がることを検証していきたいと思います。

gzgz

環境はWSL2/Ubuntu 22.04.1

gz@zeus:~$ cat /etc/os-release
PRETTY_NAME="Ubuntu 22.04.1 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04.1 LTS (Jammy Jellyfish)"
VERSION_CODENAME=jammy
ID=ubuntu
ID_LIKE=debian
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
UBUNTU_CODENAME=jammy
gzgz

バージョンを確認

gz@zeus:~$ python --version
Python 3.10.12
gz@zeus:~$ node --version
v18.12.1
gz@zeus:~$ npm --version
8.19.2
gzgz

まず、プロジェクトフォルダとVirtualEnv環境を作成

gz@zeus:~$ cd tmp
gz@zeus:~$ mkdir test_div
gz@zeus:~$ cd test_div
gz@zeus:~$ python -m venv venv
gz@zeus:~$ venv/bin/activate
(venv) gz@zeus:~/tmp/test_div$
gzgz

次、Djangoのパッケージをインストール

(venv) gz@zeus:~/tmp/test_div$ python -m pip install Django
Collecting Django
  Downloading Django-4.2.4-py3-none-any.whl (8.0 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 8.0/8.0 MB 25.0 MB/s eta 0:00:00
Collecting asgiref<4,>=3.6.0
  Using cached asgiref-3.7.2-py3-none-any.whl (24 kB)
Collecting sqlparse>=0.3.1
  Using cached sqlparse-0.4.4-py3-none-any.whl (41 kB)
Collecting typing-extensions>=4
  Using cached typing_extensions-4.7.1-py3-none-any.whl (33 kB)
Installing collected packages: typing-extensions, sqlparse, asgiref, Django
Successfully installed Django-4.2.4 asgiref-3.7.2 sqlparse-0.4.4 typing-extensions-4.7.1

バージョンを確認

(venv) gz@zeus:~/tmp/test_div$ python -m django --version
4.2.4
gzgz

プロジェクトの作成

django-admin startproject test_div .

フォルダ構成はこうなります。

(venv) gz@zeus:~/tmp/test_div$ tree -L 2
.
├── manage.py
├── test_div
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── venv
    ├── bin
    ├── include
    ├── lib
    ├── lib64 -> lib
    └── pyvenv.cfg

6 directories, 7 files
gzgz

とりあえず、djangoの動作確認

$ python manage.py runserver

ブラウザでlocalhost:8000を開いて、以下の画面が表示されたら、ＯＫ

gzgz

まず、バックエンド

inertia-djangoのインストール

(venv) gz@zeus:~/tmp/test_div$ pip install inertia-django
Collecting inertia-django
  Using cached inertia_django-0.5.2-py3-none-any.whl (16 kB)
Requirement already satisfied: django<5.0,>=4.0 in ./venv/lib/python3.10/site-packages (from inertia-django) (4.2.4)
Collecting requests<3,>=2
  Using cached requests-2.31.0-py3-none-any.whl (62 kB)
Requirement already satisfied: sqlparse>=0.3.1 in ./venv/lib/python3.10/site-packages (from django<5.0,>=4.0->inertia-django) (0.4.4)
Requirement already satisfied: asgiref<4,>=3.6.0 in ./venv/lib/python3.10/site-packages (from django<5.0,>=4.0->inertia-django) (3.7.2)
Collecting certifi>=2017.4.17
  Using cached certifi-2023.7.22-py3-none-any.whl (158 kB)
Collecting urllib3<3,>=1.21.1
  Using cached urllib3-2.0.4-py3-none-any.whl (123 kB)
Collecting idna<4,>=2.5
  Using cached idna-3.4-py3-none-any.whl (61 kB)
Collecting charset-normalizer<4,>=2
  Using cached charset_normalizer-3.2.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl (201 kB)
Requirement already satisfied: typing-extensions>=4 in ./venv/lib/python3.10/site-packages (from asgiref<4,>=3.6.0->django<5.0,>=4.0->inertia-django) (4.7.1)
Installing collected packages: urllib3, idna, charset-normalizer, certifi, requests, inertia-django
Successfully installed certifi-2023.7.22 charset-normalizer-3.2.0 idna-3.4 inertia-django-0.5.2 requests-2.31.0 urllib3-2.0.4
gzgz

設定を諸々入れてきます。

settings.pyのINSTALLED_APPSにinertiaを追加

INSTALLED_APPS = [
  # django apps,
  'inertia',
  # your project's apps,
]
gzgz

InertiaのMiddlewareも追加

MIDDLEWARE = [
  # django middleware,
  'inertia.middleware.InertiaMiddleware',
  # your project's middleware,
]
gzgz

my_appを作成

python manage.py startapp test_app

index.htmlの作成

mkdir test_app/templates -p
touch test_app/templates/index.html

中身：

<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Layout Template</title>
</head>

<body>
    {% block inertia %}{% endblock %}
</body>

</html>

レイアウトテンプレート（INERTIA_LAYOUT）の設定

INERTIA_LAYOUT = BASE_DIR / "test_app" / "templates/index.html"

これでバックエンドの設定が終わりました。

gzgz

次、フロントの設定を行きます。

まず、dajngo-viteのインストール

(venv) gz@zeus:~/tmp/test_div$ pip install django-vite
Collecting django-vite
  Downloading django_vite-2.1.3-py3-none-any.whl (13 kB)
Requirement already satisfied: Django>=1.11 in ./venv/lib/python3.10/site-packages (from django-vite) (4.2.4)
Requirement already satisfied: asgiref<4,>=3.6.0 in ./venv/lib/python3.10/site-packages (from Django>=1.11->django-vite) (3.7.2)
Requirement already satisfied: sqlparse>=0.3.1 in ./venv/lib/python3.10/site-packages (from Django>=1.11->django-vite) (0.4.4)
Requirement already satisfied: typing-extensions>=4 in ./venv/lib/python3.10/site-packages (from asgiref<4,>=3.6.0->Django>=1.11->django-vite) (4.7.1)
Installing collected packages: django-vite
Successfully installed django-vite-2.1.3
gzgz

settings.pyのINSTALLED_APPSにdjango_viteを追加

INSTALLED_APPS = [
    ...
    'django_vite',
    ...
]