Django + React + MySQL を使った MVP 開発ガイド【Dockerを活用】
はじめに
本記事では、Python (Django)、React、MySQL を使って、簡単な MVP（最小限の実行可能な製品）を作成する方法をステップバイステップで解説します。この構成は、Web アプリケーションを開発するための一般的なフレームワークであり、バックエンドとフロントエンドを分けて開発するモダンなアーキテクチャを採用しています。
使用する技術
- バックエンド: Python, Django
- フロントエンド: React
- データベース: MySQL
- コンテナ化ツール: Docker
- 環境: ローカル開発
必要な準備
- Python 3.9 以上
- Node.js と npm
- Docker と Docker Compose
- MySQL データベース
1. プロジェクトの構成
まずは、プロジェクトのディレクトリ構造を決めましょう。基本的な構成は次のようになります。
my-mvp-project/
├── backend/ # Django バックエンド
│ ├── Dockerfile
│ ├── requirements.txt
│ └── (その他 Django のファイル)
├── frontend/ # React フロントエンド
│ ├── Dockerfile
│ ├── package.json
│ └── (その他 React のファイル)
├── docker-compose.yml # Docker Compose 設定ファイル
└── README.md
2. Docker と Django のセットアップ
まずは、バックエンドの Django を Docker を使ってセットアップします。
2.1. Dockerfile の作成（Django 用）
backend ディレクトリ内に Dockerfile を作成します。これにより、Django アプリケーションをコンテナ内で実行できます。
# Python のベースイメージを指定
FROM python:3.9-slim
# 必要なパッケージをインストール
RUN apt-get update && apt-get install -y \
python3-dev \
libmariadb-dev \
pkg-config \
build-essential \
libssl-dev \
&& rm -rf /var/lib/apt/lists/*
# 作業ディレクトリの設定
WORKDIR /app
# requirements.txt をコピーしてインストール
COPY requirements.txt /app/
RUN pip install --no-cache-dir -r requirements.txt
# アプリケーションコードをコピー
COPY . /app/
# ポート 8000 を開放
EXPOSE 8000
# Django の開発サーバーを起動
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]
2.2. requirements.txt の作成
次に、backend ディレクトリ内に requirements.txt を作成し、必要なパッケージを記述します。
Django>=4.0,<5.0
mysqlclient
2.3. Django プロジェクトの作成
Django プロジェクトを作成するには、次のコマンドを実行します。
docker run --rm -v ${PWD}/backend:/app -w /app python:3.9-slim /bin/bash -c "pip install django && django-admin startproject backend ."
これで、backend フォルダに Django プロジェクトが作成されます。
2.4. MySQL の設定
MySQL を使用するために、Django の設定ファイル settings.py の DATABASES セクションを以下のように設定します。
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'mydb',
'USER': 'root',
'PASSWORD': 'password',
'HOST': 'db',
'PORT': '3306',
}
}
次に、MySQL コンテナをセットアップするために、docker-compose.yml を作成します。
3. Docker Compose の設定
3.1. docker-compose.yml の作成
docker-compose.yml ファイルをプロジェクトのルートディレクトリに作成します。このファイルにより、Django と MySQL のコンテナを一緒に立ち上げることができます。
version: '3.8'
services:
db:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: mydb
volumes:
- db_data:/var/lib/mysql
ports:
- "3306:3306"
backend:
build: ./backend
command: >
bash -c "
while ! mysqladmin -h db -u root -ppassword ping --silent; do
echo 'Waiting for MySQL...';
sleep 2;
done;
python manage.py migrate &&
python manage.py runserver 0.0.0.0:8000
"
volumes:
- ./backend:/app
ports:
- "8000:8000"
depends_on:
- db
frontend:
build: ./frontend
command: ["npm", "start"]
volumes:
- ./frontend:/app
ports:
- "3000:3000"
depends_on:
- backend
volumes:
db_data:これで、Django と MySQL が別々のサービスとして実行されます。
4. React のセットアップ
4.1. React アプリの作成
frontend ディレクトリに移動して、React アプリケーションを作成します。
npx create-react-app frontend
4.2. Dockerfile の作成（React 用）
frontend ディレクトリ内に Dockerfile を作成します。
# Node.js のベースイメージを指定
FROM node:16-alpine
# 作業ディレクトリの設定
WORKDIR /app
# package.json と package-lock.json をコピー
COPY package*.json ./
# 依存パッケージをインストール
RUN npm install
# アプリケーションコードをコピー
COPY . /app/
# React の開発サーバーを起動
CMD ["npm", "start"]
5. アプリケーションの起動
5.1. コンテナをビルドして起動
以下のコマンドで、バックエンド（Django）とフロントエンド（React）のコンテナをビルドして起動します。
docker-compose up --build
これで、バックエンドは http://localhost:8000 で、フロントエンドは http://localhost:3000 でアクセスできるようになります。
6. MySQL データベースの設定
Django のマイグレーションを実行して、データベースのテーブルを作成します。
docker-compose exec backend python manage.py migrate
7. 最後に
ここまでの手順を終えたら、あなたのローカル環境で Django、React、MySQL を使ったアプリケーションが稼働しているはずです。
これで基本的なセットアップは完了です。あとは、フロントエンドとバックエンドを連携させ、必要な機能を実装していけば、MVP としてのシステムが完成します。
まとめ
この記事では、Python (Django)、React、MySQL を使って MVP を構築する方法を紹介しました。Docker を使うことで、複数のサービスを簡単にセットアップして管理することができ、開発の効率が向上します。この構成は、バックエンドとフロントエンドを分けて開発する際に非常に便利であり、実際のプロジェクトで活用できます。
コメント