27 Docker Djnago の方法で、インストールしている想定

プロジェクト名は、testproject で作成している形で説明

今回は、React-admin Django両方とも、25 Let's Encrypt リバースプロキシ でSSL化している想定で説明します。

rest_frameworkを追加と
後のCORS (オリジン間リソース共有、 Cross-Origin Resource Sharing) の為、corsheadersを追加。

INSTALLED_APPS = [
    ...
    ...
    ...
    'rest_framework',
    'corsheaders',
    'testproject',
]

from django.db import models
class Product(models.Model):

    name = models.CharField(max_length=200)
    price = models.IntegerField()
    def __str__(self):
        return self.name

$ docker-compose exec django python manage.py makemigrations testproject

このマイグレーションファイルが出来上がります。

# Generated by Django 5.0 on 2023-12-14 13:01

from django.db import migrations, models


class Migration(migrations.Migration):

    initial = True

    dependencies = [
    ]

    operations = [
        migrations.CreateModel(
            name='Product',
            fields=[
                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
                ('name', models.CharField(max_length=200)),
                ('price', models.IntegerField()),
            ],
        ),
    ]

マイグレーション実行すると、テーブルが作成されます。

$ docker-compose exec django python manage.py migrate

docker-compose exec db mysql -u root -p db

mysql> show tables;
+----------------------------+
| Tables_in_db               |
+----------------------------+
| auth_group                 |
| auth_group_permissions     |
| auth_permission            |
| auth_user                  |
| auth_user_groups           |
| auth_user_user_permissions |
| django_admin_log           |
| django_content_type        |
| django_migrations          |
| django_session             |
| testproject_product        |
+----------------------------+
11 rows in set (0.00 sec)

mysql> desc testproject_product;
+-------+--------------+------+-----+---------+----------------+
| Field | Type         | Null | Key | Default | Extra          |
+-------+--------------+------+-----+---------+----------------+
| id    | bigint       | NO   | PRI | NULL    | auto_increment |
| name  | varchar(200) | NO   |     | NULL    |                |
| price | int          | NO   |     | NULL    |                |
+-------+--------------+------+-----+---------+----------------+
3 rows in set (0.01 sec)

$ docker-compose exec django python manage.py createsuperuser
Username (leave blank to use 'root'): root
Email address: hogehoge@hogehoge.com
Password: 
Password (again): 
Superuser created successfully.

先程作成した管理ユーザでアクセス。

https://django.fl8.jp/admin/

この画面になる場合

CSRF_TRUSTED_ORIGINSにURLを追加してあげる

CSRF_TRUSTED_ORIGINS = ['https://django.fl8.jp']

今度は正しく表示される。

from django.contrib import admin

# Register your models here.

from .models import Product

admin.site.register(Product)

編集すると、管理画面に追加したテーブルが表示されるので、テスト用にいくつかレコードを追加しておく。

mysql> select * from newgen_product;
+----+--------------------+--------+
| id | name               | price  |
+----+--------------------+--------+
|  1 | みかん          |    200 |
|  2 | すいか          |    300 |
|  3 | おにぎり       |     50 |
|  4 | さんま          |     30 |
|  5 | ケーキ          |    100 |
+----+--------------------+--------+
5 rows in set (0.01 sec)

APIでデータのやり取りを行うためのSerializersクラスを作成

from rest_framework import serializers
from .models import Product


class ProductSerializer(serializers.ModelSerializer):
    class Meta:
        model = Product
        fields = ['id', 'name', 'price']

APIの処理を、ViewSetを使用して実装
一覧取得、登録、更新、削除などの処理が使えるようになります。

from rest_framework import viewsets
from .models import Product
from .serializers import ProductSerializer


class ProductViewSet(viewsets.ModelViewSet):

    queryset = Product.objects.all()
    serializer_class = ProductSerializer

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

router = DefaultRouter(trailing_slash=False)
router.register('products', ProductViewSet)

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

https://django.fl8.jp/api/

# curl -s https://django.fl8.jp/api/products| jq
[
  {
    "id": 1,
    "name": "みかん",
    "price": 200
  },
  {
    "id": 2,
    "name": "すいか",
    "price": 300
  },
  {
    "id": 3,
    "name": "おにぎり",
    "price": 50
  },
  {
    "id": 4,
    "name": "さんま",
    "price": 30
  },
  {
    "id": 5,
    "name": "ケーキ",
    "price": 100
  }
]

# curl -s https://django.fl8.jp/api/products/3| jq
{
  "id": 3,
  "name": "おにぎり",
  "price": 50
}

React-adminで、dataProductsとして利用する場合に、Content-Rangeを求められるので、Middlewareに追加しておく。

class ContentRangeMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)
        if '/api/products' in request.path:
            response['Content-Range'] = 'items 0-9/20'  # 実際の値を指定
        return response