📝

[ Docker compose] Django+React Todoアプリ作成①

2023/05/31に公開

django

docker-compose

tech

はじめに

参考記事を元にDocker composeで動作するDjango+ReactのTodoアプリを作成します。
環境構築はこちら

Todoアプリの参考記事

環境

・macOS Ventura13.4

ディレクトリ構成

必要最低限のファイルに省略しています。

todo
├── backend_Project
│   ├── backend
│   │   ├── backend
│   │   │   ├── settings.py
│   │   │   ├── urls.py
│   │   │   └── wsgi.py
│   │   ├── db.sqlite3
│   │   └── manage.py
│   ├── docker
│   │   └── python
│   │       └── Dockerfile
│   └── requirements.txt
└── frontend_Project
│   ├── docker
│   │  └── node
│   │      └── Dockerfile
│   ├── node
│   │  └── frontend
│   │ 
└──  docker-compose.yml

Step1 Djangoアプリ作成

カレントディレクトリをbackend_Projectに移動してDjangoアプリを作成します。
今回アプリ名はtodoとします。

アプリ作成

$ cd backend_Project
$ docker-compose run backend django-admin startapp todo

settings.py編集

backend/settings.pyに下記の内容を追記します。
環境構築時にrequirements.txtファイル内に"djangorestframework"、"django-cors-headers"を記載し先にインストールしているので、ここでsettings.pyにも追記します。

# Application definition

ALLOWED_HOSTS = ['*'] #ここ

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders', #ここ
    'rest_framework', #ここ
    'todo', #ここ
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware', #ここ
]

migrate

migrateしてINSTALLED_APPSの設定を参照し、データベース設定に従って必要なすべてのデータベースのテーブルを作成します。

$ docker-compose run backend sh -c "python manage.py migrate todo"

モデルの定義

migrateが無事完了した事を確認したらtodo/models.pyにDBに保持される項目を記載します。

from django.db import models

# Create your models here.

class Todo(models.Model):
    title = models.CharField(max_length=120)
    description = models.TextField()
    completed = models.BooleanField(default=False)

    def _str_(self):
        return self.title

モデルファイルに変更をかけたためmigrationとmigrateを実行します。

$ docker-compose run backend sh -c "python manage.py makemigrations todo"
$ docker-compose run backend sh -c "python manage.py migrate todo"

admin.pyを編集

次にDjnagoの管理画面で先ほど作成したモデルに対応したテーブルのレコード操作を行うため
todo/admin.pyに下記の内容を記載します。

from django.contrib import admin
from .models import Todo

class TodoAdmin(admin.ModelAdmin):
    list_display = ('title', 'description', 'completed')

# Register your models here.

admin.site.register(Todo, TodoAdmin)

保存して、管理画面にログインするためのアカウントを作成します。

コンテナ内のシェルに入りmigrateとcreatesuperuserを実行します。

$ docker-compose run backend sh
 python manage.py migrate
 python manage.py createsuperuser

管理画面の表示

コンテナを起動させます。

$docker-compose up -d

起動後http://localhost:8000/adminにアクセスし先ほど作成したアカウント情報でログインします。
ログイン画面

管理画面からTodoアプリの追加・編集・削除ができます。

Step2 Django REST framework API設定

続いてDjango REST frameworkを使用してAPIの設定を行なっていきます。
API設定に必要なフレームワークはDockerでの環境構築時にインストール済みです。

フロントエンドのURLを記載

backend/settings.pyファイルを開いて一番下に下記を追加します。
Reactのデフォルトのポートの http://localhost:3000 を設定しています。

CORS_ORIGIN_WHITELIST = [
     'http://localhost:3000'
]

APIエンドポイントをフロントエンドから叩く場合にはCORSの設定が必要となります。
CORS_ORIGIN_WHITELISTにはフロントエンドで通信したいURLを記入してください。

シリアライザファイルの作成

モデルのインスタンスをJSONに変換するためにシリアライザが必要となります。
todo/serializers.pyを作成し下記の内容を記載してください。

from rest_framework import serializers
from .models import Todo

class TodoSerializer(serializers.ModelSerializer):
    class Meta:
        model = Todo
        fields = ('id', 'title', 'description', 'completed')

このコードは扱うモデルと、JSONに変換するフィールドを指定しています。

Viewの作成

todo/views.pyファイルでViewを定義していきます。

from django.shortcuts import render
from rest_framework import viewsets
from .serializers import TodoSerializer
from .models import Todo

# Create your views here.

class TodoView(viewsets.ModelViewSet):
    serializer_class = TodoSerializer
    queryset = Todo.objects.all()

URLパターンの定義

backend/urls.pyファイルを開いて下記のコードに書き換えてください

from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from todo import views

router = routers.DefaultRouter()
router.register(r'todos', views.TodoView, 'todo')

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include(router.urls)),
]

ルーティングを設定することで、APIエンドポイントへのアクセスを管理し、異なるHTTPメソッドに基づいたCRUD操作が可能となります。

ではサーバーを再起動してブラウザでhttp://localhost:8000/api/todosにアクセスしましょう。

$ docker-compose down
$ docker-compose up -d

以下のような画面に遷移できばルーティング成功です！