🕌

djangoとreactを組み合わせた例を記す

2025/03/20に公開

django

React

tech

Lalavelはとてもよくできたフレームワークで、単体でも使えるし、apiだけとしても使えるし、react/vueをtemplateに組み込むこともでき、如何様にも使える

python界隈でもやりたい、ということで
djangoを利用して、reactと共存させることにする

昨今では client と api を分けるのはあたりまえ
デプロイ先もクラウドを使用するのがあたりまえ

ただ個人開発や、金銭的事情から1つのサーバーにデプロイしたいなど、モノレポ的な要望は少なくない

django

先ずはdjangoのセットアップから
djangoの思想は１つのプロジェクトの中に、複数のアプリケーションだが、私はそれが嫌いだ
１つのプロジェクトに１つのアプリケーションを構築するなら、同じ名前か汎用的な名前をディレクトリにつけたい

尚、コマンド内の[slag]は任意の値に変更されたし

mkdir [django-react]
cd django-react/
django-admin startproject config

ここではアプリケーション全体を管理しているという意味でconfigとつける

config/config/*

というディレクトリが出来上がるので、1つ階層を削除する
（ここで例えば、foxというプロジェクト名をつけたらfox/foxとなり、さらにアプリケーション名をfoxとしたいがディレクトリがかぶってしまうので、泣く泣く意味不明な違う名前をつけざるを得ない。例えばkitsuneというアプリ名をつけたら、本来foxだったものが、別の名前のアプリになっており、意味も似通っているので何がしたかったのか分からなくなる。この辺がdjangoはナンセンスだと思う）

さて、この状態で

python manage.py runserver

とすると通常にサーバーが立ち上がるはず。
立ち上がらない場合は何かがおかしいので、コードないのディレクトリ構成を見直すこと。

python manage.py startapp app

次に、上記でバックエンド用のファイル群を作成する
ここにはMVT(MVC)が表現されてくる

次は適当なファイル変更を行う

from django.http import HttpResponse
def index(request):
    return HttpResponse("Hello, world.")

from django.urls import path
from . import views
urlpatterns = [
    path("", views.index, name="index"),
]

from django.contrib import admin
from django.urls import path
from app.views import index

urlpatterns = [
    path("", index),
    path("admin/", admin.site.urls),
]

上記のコードで再度サーバーを立ち上げると Hello world が表示されていたら、正常である
次に、config/settings.py の INSTALLED_APP に app を追加する

python manage.py migrate
python manage.py createsuperuser

これを行うことで、初期のuserテーブルなどが作成される
２行目はスーパーユーザーの作成で、対話型形式に沿ってアカウントを作成する

https://localhost:8000/admin で管理画面にアクセスできる

react

npm create vite@latest client -- --template react-ts

reactは現在 next.js や remix などのフレームワークを使用することを推奨している。
しかし上記の2点を使うような開発では、そもそもこんな変な構成を採用しないと思うので、今回は SPA で簡単にセットアップする

勘所

def index(request):

    # 開発はReact開発サーバーを使用
    # 本番時はビルド済みのファイルを参照するため、npm run buildしておく
    if settings.DEBUG:
        return HttpResponseRedirect("http://localhost:3000/")
    else:
        return render(request, "build/index.html")

この構成では、client側のコードを全てreactに任せるということなので、url は react に全振りする
開発時はnpm run devとpython mange.py runserverで django と react を両方起動して開発する
本番環境では build したファイルを読ませる
上記のようにpython側で制御することによって共存させることを可能にした

django

react

勘所

Discussion