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

Djangoは、HTML、CSS、イメージファイルを使って表示する設定をまとめました。
前提
- 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プロジェクト作成
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にアクセスすると下記が表示されます。
