Windows＋DjangoでDocker入門【入門者向け】

こんにちは。sinyです。

最近Docker入門したばかりですが、知識定着のためDocker関連の記事をアウトプットしていきます。

本記事では、Windows環境＋DockerでDjangoアプリを構築する手順のまとめ記事です。

前提環境

本記事では、以下の環境を前提にしています。

項目	バージョン等
OS	Windows10(Home)
DB	Postgress
Django	2.x
Docker	DockerToolbox

DockerToolboxのインストール

まず最初にDockerToolboxをインストールします。

上記リンク先から「DockerToolbox-19.03.1.exe」をダウンロードしたらexeファイルをダブルクリックしてインストールします。

インストール自体は画面の指示に従うだけで簡単にできます。

インストールが完了すると、デスクトップに「Docker Quickstart Terminal」というアイコンが生成されるので、クリックするとDocker環境のターミナル画面が起動します。

Djangoコンテナ作成に必要なファイルの準備

Djangoのコンテナ環境構築に必要な3つのファイルを設定指定します。

Dockerfileの作成

任意のフォルダで以下を記述したDockerfileを作成します。
今回はC:\Users\django_dockerとします。

FROM python:3.6
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
ADD requirements.txt /code/
RUN pip install -r requirements.txt 

 

設定ファイルの意味は以下の通りです。

docker-compose.ymlの作成

つづいて、Dockerfileと同じディレクトリにdocker-compose.ymlという名称でファイルを作り以下の設定を記述します。

version: '3' 
services:
 db:
   image: postgres
 web: 
   build: . 
   command: python3 manage.py runserver 0.0.0.0:8000
   volumes:
     - .:/code
   ports:
     - "8000:8000"
   depends_on:
     - db 

 

requirements.txtの作成

続いて、インストールpythonモジュールの定義をrequirements.txtに記載します。
今回は、djangoとpostgresの連携に必要なpsycopg2をインストールします。

Django>=2.1,<2.2
psycopg2

 

Dockerコンテナの作成と起動

dockerのターミナル画面でC:\Users\django_dockerに移動してから以下のコマンドを実行します。

cd /c/Users/django_docker
docker-compose run --rm web django-admin.py startproject example . 

docker-compose runコマンドを使ってコンテナを作成&実行します。
これでDjangoのプロジェクトが生成されます。（プロジェクト名がexample)

コマンドが正常終了すると、以下の通りdjango-dockerフォルダ直下にexampleフォルダ（Djangoプロジェクト）が生成されます。
また、manage.pyも同じフォルダ内に生成されます。

 

Django初期設定

example\settings.pyを開いて以下の点を変更します。
1点目は、ALLOWED_HOSTS = ["*"]です。
2点目はpostgres用のdb接続設定を以下の通り設定します。

ALLOWED_HOSTS = ["*"]


DATABASES = {
     'default': { 'ENGINE': 'django.db.backends.postgresql',   
     'NAME': 
     'postgres',
     'USER':
     'postgres', 
     'HOST':
     'db',
     'PORT': 5432, 
     }
    } 

 

以下のコマンドを実行して変更内容をコンテナに反映させます。

docker-compose up -d

以下の表なメッセージが表示されればOKです。

http://192.168.99.100:8000/にアクセスして以下のようなDjango画面が表示されればOKです。

 

Djangoアプリの作成

続いて以下のコマンドを実行してDjangoのアプリケーションを作成します。
今回は家計簿アプリを作るのでアプリケーション名をkakeiboにしています。

docker-compose run --rm web python manage.py startapp kakeibo

コマンドが正常終了すると、以下の通りdjangoのアプリケーションフォルダ（kakeibo)が生成されます。

kakeiboフォルダの中身は以下の通り通常のDjangoで作ったときのアプリケーションのモジュールが生成されます。

 

Djangoモデルの作成

続いてkakeibo\models.pyに家計簿テーブルを定義します。
設定は以下の通りCategoryとKakeiboテーブルを定義します。

from django.db import models
from datetime import datetime

class Category(models.Model):

    class Meta:
        #カテゴリ
        verbose_name ="カテゴリ"
        verbose_name_plural ="カテゴリ"
      
#カラム名の定義
    category_name = models.CharField(max_length=255,unique=True)

    def __str__(self):
        return self.category_name


class Kakeibo(models.Model):

    class Meta:
      
        verbose_name ="家計簿"
        verbose_name_plural ="家計簿"

    #カラムの定義
    date = models.DateField("日付",default=datetime.now)
    category = models.ForeignKey(Category, on_delete = models.PROTECT, verbose_name="カテゴリ")
    money = models.IntegerField("金額", help_text="単位は日本円")
    quantity = models.IntegerField(verbose_name="数量",default=0)
    memo = models.CharField(verbose_name="メモ", max_length=500)

    def __str__(self):
        return self.memo

 

次に、settings.pyに先ほど作成したアプリケーションを追加しておきます。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'kakeibo',#add
]

 

マイグレーションの実行

続いて、定義したモデルの内容をデータベースへ反映させるためにマイグレーションを実行します。

docker-compose run --rm web python manage.py makemigrations kakeibo

以下のようにエラーが表示されなければOKです。

続いて以下のコマンドでmigrateを実行してdbに反映させます。

docker-compose run --rm web python manage.py migrate

以下のようにエラーなしで正常終了すればOKです。

管理ユーザの作成

続いて、Djangoの管理サイトのアクセスするために管理者ユーザを作成しておきます。
コマンドは以下の通りです。

docker-compose run --rm web python manage.py createsuperuser

admin.pyの設定

管理画面上にCategoryとKakeiboテーブルが表示されるようにkakeibo\admin.pyの設定を以下の通り変更します。

from django.contrib import admin

from .models import Category, Kakeibo

class KakeiboAdmin(admin.ModelAdmin):
    list_display=('pk','date','category','money','quantity','memo')

class CategoryAdmin(admin.ModelAdmin):
    list_display=('pk','category_name')



admin.site.register(Category, CategoryAdmin)
admin.site.register(Kakeibo,KakeiboAdmin)

 

以下のコマンドを実行して変更を反映させます。

docker-compose up -d

http://192.168.99.100:8000/adminにアクセスして先ほど作成した管理者ユーザでログオンします。

以下のとおりKakeiboとCategoryテーブルが表示されればOKです。

以下のような感じでいくつかカテゴリと家計簿テーブルにデータを登録しておきましょう。

追加モジュールのインストール手順

ここで、以下の追加モジュールをインストールします。

django-bootstrap-form
django-extensions

後からコンテナに対してモジュールをインストールしたい場合はdocker container exec コマンドを使います。

docker container exec -it django_docker_web_1 pip install django-bootstrap-form
docker container exec -it django_docker_web_1 pip install django-extensions

以下の通りインストールが正常終了すればOKです。

なお、-itの次に指定している「django_docker_web_1」はdocker psコマンドで以下の通り確認できます。

新しく追加した2つのモジュールをsettings.pyに追加しておきましょう。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'kakeibo',
    'bootstrapform', #add
    'django_extensions', #add
]

 

構文エラーチェックの方法

ちなみに、djangoプロジェクトのエラーは以下のコマンドで確認できます。

docker container exec -it <コンテナID> python manage.py check

エラーがなければ以下のように表示されます。

家計簿一覧画面設定

最後に、家計簿一覧画面を定義するためにviews.py、urls.py,templatesを作成していきます。

まずはkakeibo\views.pyに以下の定義を設定します。

from django.shortcuts import render
from django.http import HttpResponse
from django.views.generic import ListView
from .models import Category, Kakeibo


#一覧表示用のDjango標準ビュー(ListView)を承継して一覧表示用のクラスを定義
class KakeiboListView(ListView):
   #利用するモデルを指定
   model = Kakeibo
   #データを渡すテンプレートファイルを指定
   template_name = 'kakeibo/kakeibo_list.html'

   #家計簿テーブルの全データを取得するメソッドを定義
   def queryset(self):
       return Kakeibo.objects.all()

 

続いてプロジェクト直下のexample\urls.pyを以下の設定にします。

from django.contrib import admin
from django.urls import path, include

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

 

次はアプリケーション配下のkakeibo\urls.pyを新規に作成し以下の通り設定します。

from django.urls import path
from . import views

urlpatterns = [
    path('kakeibo_list/', views.KakeiboListView.as_view(), name='kakeibo_list'),
]

 

最後にテンプレートファイルを作成します。
テンプレートはkakeibo\templates\kakeiboフォルダを作成し、base.htmlとkakeibo_list.htmlを以下の通り作成します。

base.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  {# Bootstrap4を使う #}
  <!-- linkタグでbootstrapのcssファイルを読み込む -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <!-- linkタグでDataTableのcssファイルを読み込む -->
  <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 

  <!-- タイトルの設定-->
  <title>Tutorial</title>

<body>

  {% block content %}

   <!-- block content ～ endblockの間に子テンプレートの内容が差し込まれる -->

  {% endblock %}

  <!-- bootstrapのjavascrit読み込み-->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
  <!-- DataTablesのjavascrit読み込み-->
  <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
  <!-- chart.jsの読み込み -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

  <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/plug-ins/1.10.6/sorting/currency.js"></script>
  
  <!-- Databableの定義-->
  <script>
  jQuery(function($){
    // デフォルトの設定を変更
    $.extend( $.fn.dataTable.defaults, {
        language: {
            url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
            }
            });

    $("#kakeibo_list").DataTable({
        "searching": true,     //検索機能
        "paging":   true,      //ページング機能
        "ordering": true,      //ソート機能
        "lengthChange": true,  //件数切り替え機能

        }).columns.adjust().draw();

        });

  </script>
  
</body>
</html>

 

kakeibo_list.html

<!-- 親テンプレートを読み込む-->
{% extends './base.html' %}

{% block content %}

  <div class="content-wrapper">
    <div class="container-fluid">
      <!-- パンくずリストの設定-->
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="{% url 'kakeibo_list' %}">TOP</a>
        </li>
        <li class="breadcrumb-item active">一覧表示</li>


      </ol>
      <!--ページタイトル-->
      <div class="card mb-3">
        <div class="card-header">
           <h3><b>家計簿アプリ</b></h3></div>
        <div class="card-body">

          <!-- テーブル表の定義 -->
          <table id=kakeibo_list width="100%" class="table table-striped table-bordered table-hover">
            　<!-- 表の列の定義-->
              <thead>
                <tr>
                  <th class="text-center">日付</th>
                  <th class="text-center">カテゴリ</th>
                  <th class="text-center">金額</th>
                  <th class="text-center">数量</th>
 
                  <th class="text-center">メモ</th>
  
                </tr>
              </thead>
            　<!-- ここまでが表の列の定義-->

            　<!-- 表のデータ部分の表示-->
              <tbody>
                {% for item in object_list %}
                
                  <tr class="odd gradeX text-center">
                    <td class="text-center" width="100">{{ item.date}}</td>
                    <td class="text-center" width="100">{{ item.category }}</td>
                    <td class="text-center" width="140">{{ item.money}}円</td>
                    <td class="text-center" width="140">{{ item.quantity}}</td>
                    <td class="text-center" width="140">{{ item.memo }}</td>

                  </td>
                  </tr>
         
              {% endfor %}
            
              </tbody>
            　<!-- ここまでが表のデータ部分の表示-->

            </table>
            <!-- ここまでがテーブル表の定義 -->
       </div>
       </div>
    </div>
   </div>
{% endblock content %}

 

http://192.168.99.100:8000/kakeibo/kakeibo_list/にアクセスして以下の通り家計簿一覧画面が表示されればOKです。

以上、Windows＋DjangoでDocker入門【入門者向け】でした。