초학자가 Docker+Django+gunicorn+nginx+PostgreSQL 환경에 애플리케이션을 만들어 간다.

마지막으로 만든 환경 에서 응용 프로그램을 만들어갑니다. 우선 홈 화면을 만듭니다.

만드는 것



localhost:80에 액세스하면 다음과 같은 화면이 나오게 하고 싶습니다. 디자인은 두 번째입니다 ....


컨테이너 시작


$ docker-compose up -d

컨테이너의 상태가 Up인지 확인한 후 장고 컨테이너로 들어갑니다.
$ docker-compose exec web bash

Startapp



여기에서 Django의 조작이 메인이됩니다. home이라는 앱을 만듭니다.
$ python manage.py startapp home

settings.py를 열고 앱을 등록합니다.

conf/settings.py
INSTALLED_APPS = [
    'home.apps.HomeConfig', # これを追加
    'django.contrib.admin',
    # 以下省略

템플릿 파일의 위치를 ​​지정합니다. 프로젝트 폴더 바로 아래에 놓을 templates 폴더를 살펴보도록 합니다.

conf/settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], # ここを修正
        # 以下省略
    },
]

라우팅



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')), # 追加
]

이제 localhost : 80에 액세스하면 home 앱의 urls.py를 참조하게 되었으므로 home 폴더 내에 urls.py를 만들고 다음과 같이 작성합니다.

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

app_name = 'home'

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

이제 다음은 views.py의 top을 보러 가게되었습니다. views.py를 다시 작성합니다.

home/views.py
from django.shortcuts import render


def top(request):
    return render(request, 'home/top.html')

위에서 템플릿 파일을 넣을 위치를 지정했으므로 templates 폴더 안의 home 폴더에서 top.html을 찾으러갑니다. 그래서 top.html을 만듭니다.

templates/home/top.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>
    <h1>Homeだよ!</h1>

    <!-- 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>

나중에 디자인을 정돈하는 것을 생각하고 Bootstrap4의 스타터 템플릿을 사용했습니다.

컨테이너 재시작


$ docker-compose stop
$ docker-compose up -d

브라우저를 열고 localhost:80으로 이동합니다. 잘하면 다음과 같은 화면이 나올 것입니다.


정적 페이지이기 때문에, 거기까지 복잡한 조작은 없었을지도 모릅니다.

좋은 웹페이지 즐겨찾기