Zenn
🐳

【Docker & Django & Vue.js PostgreSQL】環境構築手順①

に公開
Django
Docker
PostgreSQL
Python
Vue.js
tech

環境構築完成イメージ!


イメージ図

１．ディレクトリ作成コマンドの実行


コマンド実行後の画面イメージ

ディレクトリ作成コマンド
以下をコピーして、メモに貼り付け、.ps1として保存し、Windows Power Shellで実行する
$ProjectName = "myproject"

# ディレクトリ作成
$dirs = @(
    "$ProjectName\backend\app",
    "$ProjectName\docker\nginx",
    "$ProjectName\docker\backend",
    "$ProjectName\docker\compose",
    "$ProjectName\docker\env"
)

foreach ($dir in $dirs) {
    New-Item -ItemType Directory -Force -Path $dir | Out-Null
}

# ファイル作成（Vue/Djangoで生成される manage.py, settings.py などは除外）
$files = @(
    "$ProjectName\frontend\.env.development",
    "$ProjectName\frontend\.env.production",
    "$ProjectName\docker\nginx\default.conf",
    "$ProjectName\docker\backend\dev.Dockerfile",
    "$ProjectName\docker\backend\prod.Dockerfile",
    "$ProjectName\docker\frontend\dev.Dockerfile",
    "$ProjectName\docker\frontend\prod.Dockerfile",
    "$ProjectName\docker\compose\docker-compose.dev.yml",
    "$ProjectName\docker\compose\docker-compose.prod.yml",
    "$ProjectName\docker\env\backend.env.dev",
    "$ProjectName\docker\env\backend.env.prod",
    "$ProjectName\docker\env\db.env",
    "$ProjectName\.gitignore",
    "$ProjectName\README.md",
    "$ProjectName\.dockerignore",
    "$ProjectName\backend\requirements.txt"
)

foreach ($file in $files) {
    New-Item -ItemType File -Force -Path $file | Out-Null
}

Write-Host "PowerShell: プロジェクト '$ProjectName' のディレクトリ構造を作成中..."
コマンド実行後のディレクトリ構造
ディレクトリ構造
myproject/
├── backend/
│   └── app/                 ← Djangoアプリは startapp で作成するので空でOK
│　└── requirements.txt
│
├── docker/
│   ├── nginx/
│   │   └── default.conf
│   ├── backend/
│   │   ├── dev.Dockerfile
│   │   └── prod.Dockerfile
│   ├── frontend/
│   │   ├── dev.Dockerfile
│   │   └── prod.Dockerfile
│   ├── compose/
│   │   ├── docker-compose.dev.yml
│   │   └── docker-compose.prod.yml
│   └── env/
│       ├── backend.env.dev
│       ├── backend.env.prod
│       └── db.env
│
├── .dockerignore
├── .gitignore
└── README.md
.bat（バッチファイル）と.ps1（PowerShellスクリプト）の違い

.bat（バッチファイル）

対象： 古くからある Windows のコマンドプロンプト（cmd.exe）用スクリプト
拡張子： .bat または .cmd
特徴：
Windows 95時代から使われている
基本的なファイル操作（コピー、削除、実行など）に使える
制御構文が貧弱（条件分岐やループはあるが限界あり）
GUIアプリやサービスとの高度な連携が難しい

@echo off
echo Hello from BAT file
pause

.ps1（PowerShellスクリプト）

対象： PowerShell 用スクリプト（powershell.exe や pwsh）
拡張子： .ps1
特徴：
.NET ベースでオブジェクト操作が可能
高度な構文と関数、モジュール、クラスなどが使える
システム管理や自動化に非常に強力
外部プログラムとの連携、Web API 呼び出しも可能
初期状態ではスクリプト実行制限あり（Set-ExecutionPolicyで変更）

Write-Output "Hello from PowerShell"
Pause

２．エディタの起動


VScodeを起動する

３．docker-compose.ymlやDockerfileファイルの作成


今回作成するコンテナのイメージ図

docker-compose.ymlの内容
docker/compose/docker-compose.dev.yml
version: '3'

services:
  backend:
    build:
      context: ../../
      dockerfile: docker/backend/dev.Dockerfile
    volumes:
      - ../../backend:/app
    env_file:
      - ../env/backend.env.dev
    ports:
      - "8000:8000"
    environment:
      - DEBUG=True
    depends_on:
      - db
    command: python manage.py runserver 0.0.0.0:8000

  frontend:
    build:
      context: ../../
      dockerfile: docker/frontend/dev.Dockerfile
    volumes:
      - ../../frontend:/app
      - /app/node_modules
    ports:
      - "5173:5173"
    environment:
      - VUE_APP_API_URL=http://backend:8000/api

  db:
    image: postgres:13
    environment:
      POSTGRES_USER: myuser
      POSTGRES_PASSWORD: mypassword
      POSTGRES_DB: mydatabase
    env_file:
          - ../env/db.env
    volumes:
      - postgres_data:/var/lib/postgresql/data
    ports:
      - "5432:5432"

volumes:
  postgres_data:
Backend（Django）のDockerfileの内容
docker/backend/dev.Dockerfile
# 使用するベースイメージ
FROM python:3.9-slim

# 作業ディレクトリの作成
WORKDIR /app

# 必要なファイルをコピー
# プロジェクトの正しい相対パスを使用
COPY ../../backend/requirements.txt /app/

# 必要なパッケージをインストール
RUN pip install --no-cache-dir -r requirements.txt

# アプリケーションのソースコードをコピー
COPY backend /app/

# Djangoのポートを開放
EXPOSE 8000

# サーバーの起動コマンド
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]
Frontend(Vue.js)のDockerfileの内容
docker/frontend/dev.Dockerfile
# ベースイメージ
FROM node:18-slim

# 作業ディレクトリ
WORKDIR /app

# package.json と lock を先にコピーしてキャッシュ活用
COPY frontend/package*.json ./

# パッケージインストール
RUN npm install

# ソースコードをコピー
COPY frontend/ ./

# ポートを明示
EXPOSE 5173

# dev サーバー起動（Viteの開発用）
CMD ["npm", "run", "dev"]
requirments.txtの内容
backend/requirments.txt
Django
psycopg2-binary
djangorestframework
python-dotenv
django-cors-headers
ライブラリの内容とバージョンをrequirements.txtに出力
docker-compose -f docker/compose/docker-compose.dev.yml exec backend sh -c "pip freeze > /app/requirements.txt"

asgiref==3.8.1
Django==3.2.6
djangorestframework==3.12.4
psycopg2-binary==2.9.1
python-dotenv==1.1.0
pytz==2025.2
sqlparse==0.5.3
typing_extensions==4.13.2

４．frontend(Vue.js)ディレクトリの作成とpackage.jsonの設定


frontendディレクトリの作成

Vue.jsのアプリケーション作成コマンド
ターミナルにて実行し、インストール時に表示される選択肢でフォルダ名をfrontend、アプリケーションをVueを選択する
npm create vite@latest .
package.jsonの設定
"dev"
{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host", // ←この部分に--hostを追加
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.3",
    "vite": "^6.3.5"
  }
}

５．npm installの実行


node.modulesの中にフォルダが作成される

npm install　コマンド
cd frontendでディレクトリを移動し、npm installを行うとpackage-lock.jsonファイルとnode.modulesにファイル群が作成される。
npm install

６．コンテナの起動

コンテナの起動のコマンド
docker-compose -f docker/compose/docker-compose.dev.yml up --build

７．Djangoプロジェクトフォルダの作成

Djangoプロジェクトフォルダ作成コマンド
docker-compose -f docker/compose//docker-compose.dev.yml run backend django-admin startproject myproject .

８．ブラウザ表示の確認

http://localhost:8000/


Djangoアプリケーションのtopページの表示

Vue.js(Vite）の表示確認
http://localhost:5173/


Vue.js & Viteの画面表示

Discussion