Django REST framework + Nuxt.js로 개발할 때의 노트

이 기사에는 Django REST 프레임워크와 Nuxt가 있습니다.조합 js의 개발 환경 정비에 힘쓰다.
도장고 측과 넥스트 측은 효율적으로 열중량을 실을 수 있는 환경을 정비하는 것이 목표다.
DB로서 이 기사에는 PostgreSQL이 사용됩니다.Django와 함께 Docker 환경에서 준비합니다.한편, 프론트 데스크의 넥스트가 컨테이너에서 이동하면 IO가 느릴 수 있어 호스트 측으로 직접 이동하기로 했다.

백엔드 설정

문건은 아래와 같다.

.
├── backend
│   ├── Dockerfile
│   └── requirements.txt
└── docker-compose.yml

backend/Dockerfile

FROM python:3.9
WORKDIR /usr/src/app
ENV PYTHONDONTWRITEBYTECODE=1
ENV PYTHONUNBUFFERED=1

COPY ./requirements.txt .
RUN pip install -r requirements.txt

COPY . .

backend/requirements.txt

django==3.2
djangorestframework
psycopg2>=2.8

docker-compose.yml

version: "3.9"
   
services:
  django:
    build: ./backend
    command: python manage.py runserver
    volumes:
      - ./backend:/usr/src/app/
    ports:
      - "8000:8000"
    environment:
      - POSTGRES_NAME=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
    depends_on:
      - db

  db:
    image: postgres
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres

volumes:
  postgres_data:

프로젝트를 작성합니다.

docker-compose run django django-admin startproject mainproject .

응용 프로그램을 만듭니다.

docker-compose run django django-admin startapp mainapp

Django 설정을 수정합니다.
backend/mainproject/settings.py

 from pathlib import Path
+import os
 
 # Build paths inside the project like this: BASE_DIR /  'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent

backend/mainproject/settings.py

 DATABASES = {
     'default': {
-        'ENGINE': 'django.db.backends.sqlite3',
-        'NAME': BASE_DIR / 'db.sqlite3',
+        'ENGINE': 'django.db.backends.postgresql',
+        'NAME': os.environ.get('POSTGRES_NAME'),
+        'USER': os.environ.get('POSTGRES_USER'),
+        'PASSWORD': os.environ.get('POSTGRES_PASSWORD'),
+        'HOST': 'db',
+        'PORT': 5432,
     }
 }

backend/mainproject/settings.py

-LANGUAGE_CODE = 'en-us'
+LANGUAGE_CODE = 'ja'

-TIME_ZONE = 'UTC'
+TIME_ZONE = 'Asia/Tokyo'

그런 다음 서버를 시작합니다.

docker-compose up --build

localhost:8000에서 아래 화면 표시 여부를 확인한다.

Ctrl+C를 사용하여 서버를 중지합니다.
DB의 초기 마이그레이션을 수행합니다.

docker-compose run django python manage.py migrate

Admin 사용자를 생성합니다.

docker-compose run django python manage.py createsuperuser --email [email protected] --username admin

이후 서버를 시작하여 관리 화면 액세스를 확인합니다http://localhost:8000/admin.
다음은 Django REST Framework의 기능을 살펴보겠습니다.
모델을 생성합니다.
backend/mainapp/models.py

from django.db import models


class Question(models.Model):
    question_text = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')


class Choice(models.Model):
    question = models.ForeignKey(Question, on_delete=models.CASCADE)
    choice_text = models.CharField(max_length=200)
    votes = models.IntegerField(default=0)

모델에 해당하는 Serializer, ViewSet을 구현합니다.
backend/mainapp/serializers.py

from mainapp.models import Question, Choice
from rest_framework import serializers


class QuestionSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Question
        fields = ['question_text', 'pub_date']


class ChoiceSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Choice
        fields = ['question', 'choice_text', 'votes']

backend/mainapp/views.py

from mainapp.models import Question, Choice
from rest_framework import viewsets
# from rest_framework import permissions
from mainapp.serializers import QuestionSerializer, ChoiceSerializer


class QuestionViewSet(viewsets.ModelViewSet):
    queryset = Question.objects.all()
    serializer_class = QuestionSerializer
    # permission_classes = [permissions.IsAuthenticated]


class ChoiceViewSet(viewsets.ModelViewSet):
    queryset = Choice.objects.all()
    serializer_class = ChoiceSerializer
    # permission_classes = [permissions.IsAuthenticated]

구현된 REST API가 URI에 포함됩니다.
backend/mainproject/urls.py

from django.urls import include, path
from rest_framework import routers
from mainapp import views

router = routers.DefaultRouter()
router.register(r'questions', views.QuestionViewSet)
router.register(r'choices', views.ChoiceViewSet)

# Wire up our API using automatic URL routing.
# Additionally, we include login URLs for the browsable API.
urlpatterns = [
    path('', include(router.urls)),
    path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

Django 설정을 수정합니다.
backend/mainproject/settings.py

 INSTALLED_APPS = [
+    'mainapp.apps.MainappConfig',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'rest_framework',
 ]

모델을 새로 추가했기 때문에 이전이 필요하다.

docker-compose run django python manage.py makemigrations
docker-compose run django python manage.py migrate

그리고 서버를 시작하고 http://localhost:8000/questions와 http://localhost:8000/choices 등을 방문하여 데이터를 조작할 수 있는 내용을 확인한다.


백엔드와 프런트엔드는 서로 다른 Origin(호스트 포트 프로토콜의 조합)이므로 나중에 프런트엔드에서 API를 시작할 수 있도록 CORS를 설정합니다.
backend/requirements.txt

 django==3.2
 djangorestframework
+django-cors-headers
 psycopg2>=2.8

backend/mainproject/settings.py

 INSTALLED_APPS = [
     'mainapp.apps.MainappConfig',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'rest_framework',
+    "corsheaders",
 ]
 
 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",
 ]
+
+CORS_ALLOWED_ORIGINS = [
+    "http://localhost:3000",
+    "http://127.0.0.1:3000",
+]

프런트엔드 설정

공사를 시작하다.

yarn create nuxt-app frontend

먼저 다음과 같이 해 봅시다.

Project name: frontend
Programming language: TypeScript
Package manager: Yarn
UI framework: Tailwind CSS
Nuxt.js modules: Axios - Promise based HTTP client
Linting tools: ESLint, Prettier
Testing framework: Jest
Rendering mode: Universal (SSR / SSG)
Deployment target: Static (Static/Jamstack hosting)
Development tools: None
Continuous integration: None
Version control system: None

설치 완료 후

cd frontend
yarn dev

서버를 시작하여 localhost:3000에 액세스할 수 있는지 확인합니다.

API의 baseURL로 사용http://localhost:8000.
frontend/nuxt.config.js

 axios: {
-  baseURL: '/',
+  baseURL: 'http://localhost:8000/',
 },

방금 API/questions를 준비했는데, 나는 그것을 찍어서 내용을 얻는 페이지로 만들고 싶다.
frontend/pages/questions.vue

<template>
  <div>
    <h1 text-4xl>質問一覧</h1>
    <ul>
      <li v-for="(question, key) in questions" :key="key">{{ question }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        questions: []
      }
    },
    async asyncData({ $axios }) {
      const questions = await $axios.$get('questions/')
      return {
        questions
      }
    },
    head() {
      return {
        title: '質問一覧'
      }
    }
  }
</script>

이렇게 열면http://localhost:3000/questions/ 다음과 같이 데이터를 순조롭게 얻을 수 있음을 확인할 수 있습니다.

결국 많이 썼어요...

아래 템플릿을 사용하는 것이 좋습니다()
https://github.com/naritotakizawa/docker-drf-and-nuxt-template
이 템플릿을 다시 수정하면 최종 버전의 템플릿을 완성할 수 있다.
https://github.com/HelloRusk/docker-django-nuxt-nginx-template

References

https://docs.docker.com/samples/django/

https://www.django-rest-framework.org/tutorial/quickstart/

https://docs.djangoproject.com/ja/3.2/intro/tutorial02/