초학자가 Docker+Django+gunicorn+nginx+PostgreSQL 환경에서 일기 앱을 만들어 보았다

요 전날 만든 환경 에 어플리케이션을 만들어 보는 기획의 제2탄입니다. 이번은 간단한 일기 앱입니다.

만든 것



이번에도 디자인은 두 번째입니다 .... 데이터베이스에 카테고리와 본문을 게시하고 목록으로 표시합니다.


컨테이너 시작



먼저 컨테이너를 시작합니다.
$ docker-compose up -d
$ docker-compose exec web bash

startapp



diary라는 새 앱을 만듭니다.
$ python manage.py startapp diary

settings.py의 INSTALL_APPS에 다이어리 앱 추가

conf/settings.py
INSTALLED_APPS = [
    'home.apps.HomeConfig',
    'diary.apps.DiaryConfig', # これを追加
    # 以下省略
]

데이터베이스 변경



djago 데이터베이스는 기본적으로 sqlite3이므로 PostgreSQL로 변경합니다.

conf/settings.py(변경 전)
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

사용자 이름 등은 요 전날 docker로 만든 환경 로 지정한 변수를 답습합니다.

conf/settings.py(변경 후)
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'postgres',
        'USER': 'postgres',
        'PASSWORD': '***',
        'HOST': 'db',
        'PORT': 5432,
    }
}

라우팅



마지막 홈 화면편 과 같이 라우팅을 합니다. 먼저 conf 폴더의 urls.py에서 작성합니다.

conf/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('home.urls')),
    path('diary/', include('diary.urls')) # これを追加
]

diary 폴더에 urls.py를 새로 만들고 다음과 같이 작성합니다.

diary/urls.py
from  django.urls import path
from . import views

app_name = 'diary'

urlpatterns = [
    path('', views.top, name='top')
]

views.py에 다음과 같이 설명합니다.

diary/views.py
from django.shortcuts import render
from .models import Diary


def top(request):
    context = {
        'diary_list': Diary.objects.all()
    }
    return render(request, 'diary/diary_list.html', context)

models.py에서 Diary 클래스를 가져오고 있지만 그런 클래스가 아직 없기 때문에 모델을 만듭니다.

모델링



diary/model.py를 열고 다음과 같이 작성하십시오.

diary/models.py
from django.db import models
from django.utils import timezone


class Diary(models.Model):
    category = models.CharField('カテゴリ', max_length=255)
    text = models.TextField('本文')
    created_at = models.DateTimeField('作成日', default=timezone.now)

    # 特殊メソッド
    def __str__(self):
        return 'カテゴリ:{} 本文:{}'.format(self.category, self.text[:10])

마이그레이션



작성한 모델을 데이터베이스에 반영합니다.
$ python manage.py makemigrations diary
$ python manage.py migrate

관리 사이트에 모델 등록



작성한 모델을 관리 사이트에서 처리할 수 있습니다.

diary/admin.py
from django.contrib import admin
from .models import Diary

admin.site.register(Diary)

수퍼유저 만들기



수퍼유저를 만듭니다. 다음 명령을 실행하면 사용자 이름, 이메일 주소, 비밀번호를 입력하라는 메시지가 표시됩니다.
$ python manage.py createsuperuser

장고 관리 사이트 방문



localhost:80/admin에 액세스하면 다음과 같은 화면이 표시됩니다.


…아, CSS가 전달되고 있지 않다…

음, 기능 자체는 문제 없다고 생각하므로, 이대로 진행합니다. 수퍼유저 생성 시 설정한 사용자 이름과 비밀번호를 입력하여 로그인합니다.


겉보기는 알레입니다만, Diary 모델이 등록되어 있습니다. Diary 추가를 클릭합니다.



적당히 2, 3개 정도 투고를 추가해 둡니다.

html 만들기



일기를 표시하는 html을 만듭니다. 이전과 마찬가지로 Bootstrap4의 스타터 템플릿을 사용했습니다 (완전히 보물이 썩었지만). 여러가지 쓰고 있습니다만, 일기를 표시하는 것은 {% for diary... 로부터 {% endfor %}까지의 부분입니다.

diary/diary_list.html
<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>django on docker</title>
  </head>
  <body>

    {% for diary in diary_list %}
      <article>
        <span class="category">{{ diary.category }}</span><br>
        <p>{{ diary.text }}</p>
      </article>
    {% endfor %}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

컨테이너 재시작



어쩌면 컨테이너를 다시 시작하지 않으면 앱이 반영되지 않는다고 생각하기 때문에하고 있습니다.
$ docker-compose stop
$ docker-compose up -d

일기 표시



localhost:80/diary에 액세스합니다. 잘하면 (또는이 기사가 맞으면 ......) 다음과 같은 페이지가 표시된다고 생각합니다.

좋은 웹페이지 즐겨찾기