DjangoとVue.jsの導入

前環境

自宅NASで格納済みファイルを閲覧する際、最近までは「MariaDB (MySQL) + php」を用いていた。

php内で自作した関数で情報を取得し、閲覧用ページの作成まで行っていた。
pureなphpやjs, htmlを手作業で書いているわけであり、非常に手間がかかっていた。

php手書き故に見た目が物足りないことを除けば、問題なく動作していた。ただ、お気に入り機能のためにphp側からDBに情報を追加しようとして、手作業での実装は割に合わないと感じた。

はじめはphpのままLaravelを導入しようとしたが、NASおよびentwareに含まれていなかったため、断念した。

代わりに選択したのがDjangoである。

• Djangoとは
• Vue.jsとは
• 簡単な導入手順
  • Django
  • Vue
• 補足
  • 補足1: データ追加
  • 補足2: Bulk操作
  • 補足3: 検索query
• まとめ

Djangoとは

DjangoはPythonで設計されるWebアプリケーションフレームワークである。

DBの構造 (models.py)、データの処理 (serializers.py)、受け渡し部分 (views.py) などをPythonで記述できる。あらかじめDjangoで用意されているクラスを継承することで、簡単に一貫性を持つ設計ができる。

Djangoの魅力

管理画面、アクセス制限、閲覧画面、http通信でのCRUD操作のすべてがそろうというのは、相当に魅力的だ

JWT Tokenを用いたheaderでの認証も簡単に追加できる。

views.py, serializers,py, models.pyの役割を理解するまでは一苦労だが、そこにさえたどり着けば、あとは自由だろう。

本物のAPIをまだ知らない

Djangoって、自由ですか?

Vue.jsとは

仕事でVue.jsに触れたこともあり、フロントエンドにはVue.jsを採用することにした。具体的にはVuetify3を用いる。

Vueではvueファイルにhtml, js, cssに関する記述を行うのだが、最終的にcompileを行うので、非常に効率的にコーディングできる。情報の伝搬に苦労する必要がない。もちろん、見た目もいい感じになる。

簡単な導入手順

詳細は割愛するが、以下の手順で導入を行った。なお、NASはAS5202Tを使用している。

Django

1. NASのApp StoreからあらかじめEntware, Apacheをinstallする。
2. Entware(/opt/bin/opkg)からRustをinstallする。
3. Ryeをinstallする。
4. 所定のディレクトリでRyeの初期化を行い、RyeでDjango関係, tzdata, ruff, gunicornをinstallする。

pyproject.toml

dependencies = [
    "django>=5.1.5",
    "djangorestframework>=3.15.2",
    "rest-framework-simplejwt>=0.0.2",
    "djangorestframework-simplejwt>=5.4.0",
    "django-cors-headers>=4.6.0",
    "tzdata>=2025.1",
    "gunicorn>=23.0.0",
    "django-extensions>=3.2.3",
    "django-sslserver>=0.22",
    "ruff>=0.9.5",
]

5. Djangoのファイルを作成する。以下参照:
   • DjangoでAPIをさくっと作っちゃう手順 - Qiita
   • Django Rest FrameworkでJWT認証を実装する方法について
6. python manage.py runserver 0.0.0.0:8000で開発サーバーを起動する。なお、SSL認証はできない。本番ではgnunicornを起動する。
7. NASの管理画面からリバースプロキシを設定して、たとえば:443/api/をlocalhost:8000/api/に転送するように設定する。通常のWebページを10443で起動しているとして:443/blog/をlocalhost:10443/blog/に転送するようにすれば共存できる。

JWT認証でのユーザー情報取得

views.py

def _get_user_by_access_token(access_token):
    jWTTokenUserAuthentication = JWTTokenUserAuthentication()
    return jWTTokenUserAuthentication.get_user(access_token)


def _get_user(request):
    user = request.user
    if user is None and "HTTP_AUTHORIZATION" in request.META:
        access_token = request.META["HTTP_AUTHORIZATION"].replace("Bearer ", "")
        user = _get_user_by_access_token(access_token)
        request.user = user
    return user

Vue

1. 手元のPCにあらかじめnode, npmをinstallする。
2. npm create vuetify@latestでVuetify3をinstallする。vite, piniaなどを用いる設定にする。
3. Vueのファイルを作成する。
4. npm run devで開発サーバーを起動する。
5. npm run buildでビルドする。
6. distディレクトリをNASのWebページディレクトリにrsyncでコピーする。(npm run build && rsync --delete -auve "ssh" dist/ YOURNAS:/YOURPATH/)

補足

補足1: データ追加

Djangoへの大量のデータ追加は、Pythonのrequestsで行っている。少量なら管理画面から手作業で行うこともできる。

補足2: Bulk操作

DjangoのデフォルトのCUD操作(Read, つまりget以外)は一回の操作(トランザクション)で一つのデータを操作する。
以下のようなViewsを作成すれば、複数のデータを一回の操作で操作できる。