Dockerを用いたモダンなWebアプリ開発環境への移行方法〜シンプルなDjangoアプリに React & PostgreSQL を追加する〜

〜シンプルなDjangoアプリに React & PostgreSQL を追加する〜

✅ 本記事の対象

DjangoでのシンプルなWebアプリ開発に慣れてきた人
モダンな開発環境（React, PostgreSQL, Docker）に挑戦したい人
VSCodeとDevContainerで一貫した開発環境を作りたい人

🔧 今回の構成

VSCodeのDevContainer拡張機能を用いて環境構築をします。

理由はとにかく簡単だからです

・コンテナ構成ファイルを自動で作成してくれる

・コンテナのビルドも楽です

Docker をインストールしている前提で進めます。そのため、未インストールの方は以下の記事を参考にしてください。

siip.hateblo.jp

構成要素	技術
バックエンド	Python（Django）
フロントエンド	React（create-react-app）
DB	PostgreSQL
IDE	VSCode（DevContainer拡張）
環境構築	Docker + docker-compose

🧭 手順の全体像

現在のDjangoアプリの状態をセーブする
DevContainer構成ファイルを作成する
docker-compose.ymlを整備する
Reactアプリをルートに追加する
開発コンテナをビルドして環境を起動する

1. 現在の状態をセーブする

✅ GitHubでバックアップ

VSCodeの「ソース管理」パネルから、コミット & プッシュしておきましょう。
新しいブランチを作って作業を進めるのがおすすめです。

新規ブランチを作成することで、既存のブランチとは別で進行を保存できます。なので失敗したときとかにすぐに戻せます。

VSCodeの場合は、以下の画像を参考にしてください。

①　左のツールバーからソース管理を開く　赤丸をクリック

② Branch →　Create Branch　を選択

✅ Docker構成ファイルのバックアップ

.devcontainer ディレクトリがある場合は、一旦どこかにコピーしておきましょう。

理由：すでにコンテナ構成ファイル(.devcontainer)があると、Devcontainerで構成ファイルを作成できないため

2. DevContainer構成ファイルを作成する

VSCode での操作手順：

Ctrl + Shift + P を押す
Dev Containers: Add Dev Container Configuration Files... を選択
「Node.js & PostgreSQL」を選択（今回はReact用）

Python環境は後ほど、コピーしていた既存の構成ファイルで、マージして維持します

devcontainer.json

新規 devcontainer.json　新しく生成されたもの

// For format details, see <https://aka.ms/devcontainer.json>. For config options, see the
// README at: <https://github.com/devcontainers/templates/tree/main/src/javascript-node-postgres>
{
	"name": "Node.js & PostgreSQL",
	"dockerComposeFile": "docker-compose.yml",
	"service": "app",
	"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}"

	// Features to add to the dev container. More info: <https://containers.dev/features>.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// This can be used to network with other containers or with the host.
	// "forwardPorts": [3000, 5432],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "yarn install",

	// Configure tool-specific properties.
	// "customizations": {},

	// Uncomment to connect as root instead. More info: <https://aka.ms/dev-containers-non-root>.
	// "remoteUser": "root"
}

もともとの開発環境（Python）

// For format details, see <https://aka.ms/devcontainer.json>. For config options, see the
// README at: <https://github.com/devcontainers/templates/tree/main/src/python>
{
  "name": "Python 3",
  // Or use a Dockerfile or Docker Compose file. More info: <https://containers.dev/guide/dockerfile>
  "image": "mcr.microsoft.com/devcontainers/python:1-3.12-bullseye",
  // Features to add to the dev container. More info: <https://containers.dev/features>.
  // "features": {},
  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  // "forwardPorts": [],
  // Use 'postCreateCommand' to run commands after the container is created.
  "postCreateCommand": "pip3 install --user -r requirements.txt",
  // Configure tool-specific properties.
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "ms-python.vscode-pylance",
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "GitHub.copilot",
        "GitHub.copilot-chat",
        "eamodio.gitlens",
        "ms-toolsai.jupyter",
        "MS-CEINTL.vscode-language-pack-ja",
        "streetsidesoftware.code-spell-checker",
        "ionutvmi.path-autocomplete",
        "ms-azuretools.vscode-docker",
        "batisteo.vscode-django",
        "monosans.djlint",
        "smelukov.vscode-csstree",
        "pranaygp.vscode-css-peek",
        "mechatroner.rainbow-csv",
        "alexcvzz.vscode-sqlite"
      ]
    }
  },
  // Uncomment to connect as root instead. More info: <https://aka.ms/dev-containers-non-root>.
  "remoteUser": "root"
}

これを合体します。　めんどくさかったらコピーしてOKです。拡張機能などは自分の好みに合わせて選択してください

✅ Python + Node.js + PostgreSQL を統合した `devcontainer.json`

devconainer.json

// For format details, see <https://aka.ms/devcontainer.json>. For config options, see the
// README at: <https://github.com/devcontainers/templates/tree/main/src/javascript-node-postgres>
{
	"name": "Python, Node.js & PostgreSQL",
	"dockerComposeFile": "docker-compose.yml",
	"service": "app",
	"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
	// Features to add to the dev container. More info: <https://containers.dev/features>.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// This can be used to network with other containers or with the host.
	// "forwardPorts": [3000, 5432],
	"forwardPorts": [3000, 5432],
	// Use 'postCreateCommand' to run commands after the container is created.
	"postCreateCommand": "pip install -r requirements.txt && if [ ! -d frontend ]; then npx create-react-app frontend; fi",
	// Configure tool-specific properties.
	"customizations": {
	  "vscode": {
		"extensions": [
		  "ms-python.python",
		  "ms-python.vscode-pylance",
		  "esbenp.prettier-vscode",
		  "dbaeumer.vscode-eslint",
		  "GitHub.copilot",
		  "GitHub.copilot-chat",
		  "eamodio.gitlens",
		  "ms-toolsai.jupyter",
		  "MS-CEINTL.vscode-language-pack-ja",
		  "streetsidesoftware.code-spell-checker",
		  "ionutvmi.path-autocomplete",
		  "ms-azuretools.vscode-docker",
		  "batisteo.vscode-django",
		  "monosans.djlint",
		  "smelukov.vscode-csstree",
		  "pranaygp.vscode-css-peek",
		  "mechatroner.rainbow-csv",
		  "alexcvzz.vscode-sqlite"
		]
	  }
	},
	// Uncomment to connect as root instead. More info: <https://aka.ms/dev-containers-non-root>.
	"remoteUser": "root"
  }

postCreateCommand": "pip install -r requirements.txt && if [ ! -d frontend ]; then npx create-react-app frontend; fi", // Configure tool-specific properties. について

Reactアプリの構成ファイルはプロジェクトルート直下に生成される

✅ ディレクトリ構成（完成後）

webapp-project/
├── backend/           # Djangoプロジェクト
├── frontend/          # Reactアプリ（create-react-app）
├── requirements.txt
├── .devcontainer/
│   └── devcontainer.json
├── docker-compose.yml
└── .env               # DB設定（本番推奨）

3. `docker-compose.yml` の整備

version: '3.8'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ../..:/workspaces:cached
    command: sleep infinity
    network_mode: service:db

  db:
    image: postgres:latest
    restart: unless-stopped
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_DB: ${POSTGRES_DB}

volumes:
  postgres-data:

✅ `.env` ファイルの例（安全のためGit管理から除外）

POSTGRES_PASSWORD=your_secure_password
POSTGRES_USER=your_db_user
POSTGRES_DB=your_db_name

.gitignore に .env を追加しておきましょう。

4. Reactアプリを追加する（自動）

VSCodeでDevContainerを「Rebuild & Reopen」すれば、postCreateCommand により以下が実行されます：

pip install -r requirements.txt
npx create-react-app frontend

5. 開発コンテナを再ビルドして再起動

コマンドパレットで Rebuild and Reopen in Container を選択！

🎉 完成！

これで、Django + React + PostgreSQL が同居するモダンな開発環境が完成しました！

📝 次回予告

この環境を活用して、既存のDjangoアプリをReactベースに再構築していく方法を紹介します。

Django REST Frameworkの導入や、APIとの通信、Reactでの表示処理などを順を追って解説予定です！

プログラミングを頑張る土木系専攻大学院生のブログ

主にプログラミングについて開発備忘録的な形で投稿しています。

Dockerを用いたモダンなWebアプリ開発環境への移行方法〜シンプルなDjangoアプリに React & PostgreSQL を追加する〜

〜シンプルなDjangoアプリに React & PostgreSQL を追加する〜

✅ 本記事の対象

🔧 今回の構成

🧭 手順の全体像

1. 現在の状態をセーブする

✅ GitHubでバックアップ

✅ Docker構成ファイルのバックアップ

2. DevContainer構成ファイルを作成する

VSCode での操作手順：

devcontainer.json

✅ Python + Node.js + PostgreSQL を統合した `devcontainer.json`

✅ ディレクトリ構成（完成後）

3. `docker-compose.yml` の整備

✅ `.env` ファイルの例（安全のためGit管理から除外）

4. Reactアプリを追加する（自動）

5. 開発コンテナを再ビルドして再起動

🎉 完成！

📝 次回予告

〜シンプルなDjangoアプリに React & PostgreSQL を追加する〜

✅ 本記事の対象

🔧 今回の構成

🧭 手順の全体像

1. 現在の状態をセーブする

✅ GitHubでバックアップ

✅ Docker構成ファイルのバックアップ

2. DevContainer構成ファイルを作成する

VSCode での操作手順：

devcontainer.json

✅ Python + Node.js + PostgreSQL を統合した devcontainer.json

✅ ディレクトリ構成（完成後）

3. docker-compose.yml の整備

✅ .env ファイルの例（安全のためGit管理から除外）

4. Reactアプリを追加する（自動）

5. 開発コンテナを再ビルドして再起動

🎉 完成！

📝 次回予告

✅ Python + Node.js + PostgreSQL を統合した `devcontainer.json`

3. `docker-compose.yml` の整備

✅ `.env` ファイルの例（安全のためGit管理から除外）