DockerでDjango+Postgres開発環境構築して簡単なページを表示する方法

Python+DjangoコンテナとPostgresデータベースコンテナをDocker Composeで起動して開発環境を構築して、簡単なサンプルページをローカルサーバーで表示してみました。

Djangoは、HTML、CSS、イメージファイルを使って表示する設定をまとめました。

前提
Docker環境設定
Djangoプロジェクト作成
Djangoでサンプルページをつくる

前提

macOS
Docker for Macインストール済み
webフレームワーク：Django3系
データベース：Postgres※（サンプルページでは使っていない）
複数コンテナ実行：Docker Compose

※サンプルページでは使用していない。デフォルトでsqlite3が設定されるので、Postgresコンテナを追加して、Docker Composeを使わなくてもできるが、今後の応用のために。

Docker環境設定

プロジェクトフォルダ作成

プロジェクトフォルダmyprojectを作成し、移動する。

$ mkdir myproject
$ cd myproject

Docker Imageを定義

プロジェクトフォルダ内に、Dockerfileを作成する。

FROM python:3
ENV PYTHONUUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
COPY requirements.txt /code/
RUN pip install -r requirements.txt
COPY . /code/

必要なPythonモジュールを定義

プロジェクトフォルダ内に、requirements.txtを作成する。Dockerfileに記述したpip install -r requirements.txtでインストールされる。

Django
psycopg2

アプリ構成とDocker起動を定義

プロジェクトフォルダ内に、docker-compose.ymlを作成する。

version: '3'

services:
  db:
    image: postgres
    environment:
      - 'POSTGRES_USER=postgres'
      - 'POSTGRES_PASSWORD=postgres'

  web:
    build: .
    command: python3 manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    depends_on:
      - db

データベース(db)は、Postgresのコンテナイメージを使用。

アプリ(web)は、Dockerファイルからイメージを作成する。docker runするときは、python3 manage.py runserver 0.0.0.0:8000コマンドを実行する。カレントディレクトリを、dockerの/codeフォルダにマウント。

Djangoプロジェクト作成

$ docker-compose run --rm web django-admin.py startproject mysite .

Docker Composeのwebをrunして、django-admin.py startproject first_project .を実行する。後で、データベースと合わせて、コンテナを作成するので、–rmオプションをつけて、run後コンテナを削除。

myproject直下にmysiteフォルダ、manage.pyなど、設定に必要なファイルが作成される。

データベース設定

project/setting.pyファイルを編集。データベースをsqlite3からpostgresを使用するように変更。

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

複数Dockerコンテナを起動

$ docker-compose up

コンテナを起動して、エラーが出ていないか確認。エラーがない場合はchromeなどでlocalhost:8000にアクセスして、下記が表示されるか確認。

サーバー起動が問題ないこと確認できたら、Ctr+Cで起動を終了。デタッチモードで起動する。

$ docker-compose up -d

Djangoでサンプルページをつくる

アプリケーションフォルダを作成

webコンテナにbashで入る。

$ docker-compose exec web bash

上記コマンドでコンテナ内の/codeフォルダに入る。/codeフォルダで以下コマンドを実行する。

$ django-admin startapp app

myproject直下に、appフォルダが作成される。

ページ作成1：HTML CSS

myproject直下に、templates、staticフォルダを作成する。

templates直下に、appフォルダを作成し、index.htmlファイルを作成。

<!DOCTYPE html>
{% load static %}
<html>
<head>
    <meta charset="UTF-8">
    <title>Django Logo Page</title>
    <link rel="stylesheet" href="{% static "css/mystyle.css" %}"/>
</head>
<body>
    <h1>This is Django Logo!</h1>
    <img src="{% static "images/django-logo.png" %}" alt="Uh Oh, didn't show!" width=50%>

</body>
</html>

staticフォルダ直下に、css、imagesフォルダを作成する。

imagesフォルダにdjangoロゴ画像ファイルを保存する。ここではファイル名はdjango-logo.png。

cssフォルダにmystyle.cssファイルを作成する。タイトルのh1タグの文字をdjangoロゴの背景色に変える。

h1{
    color: #113E2E;
}

ページ作成2：Django設定

mysite直下のsetting.pyを編集して、templatesとstaticフォルダを指定。

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, "templates")
STATIC_DIR = os.path.join(BASE_DIR, "static")

/* 中略 */

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [TEMPLATE_DIR],

/* 中略 */

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    STATIC_DIR,
]

view.pyファイルを編集。

from django.shortcuts import render
# Create your views here.

def index(request):
	return render(request, 'app/index.html')

app直下にurls.pyファイルを作成。

from django.urls import path
from . import views

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

mysiteのurls.pyファイルに、app.urls.pyの記述を反映させる。

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

urlpatterns = [
    path('', views.index, name='index'),
    path('app/', include('app.urls')),
    path('admin/', admin.site.urls),
]

設定はここまでで終了です。localhost:8000にアクセスすると下記が表示されます。