【Django+Next.js】DockerでフロントエンドをNext.jsにしてバックエンドをDjangoで環境構築をする
作成日: 更新日:
開発環境
- Visual Studio Code:version 1.73.0
- OS:Windows10
- Docker Engine:v23.0.5
DockerでフロントエンドをNext.jsにしてバックエンドをDjangoで環境構築をする手順
DockerでフロントエンドをNext.jsにしてバックエンドをDjangoで環境構築をする手順について解説していきます。
ディレクトリ構成
今回のディレクトリ構成は下記を目指していきます。
1# Directory structure 2project-root/ 3├── docker/ 4│ ├── frontend/ # Next.js用Dockerfile 5│ ├── backend/ # Django用Dockerfile 6│ ├── database/ # MySQLコンテナ(Dockerfile) 7│ └── nginx/ # Nginxコンテナ(Dockerfile + 設定ファイル) 8├── frontend/ # Next.jsプロジェクト 9├── backend/ # Djangoプロジェクト 10└── docker-compose.yml
最初に必要なディレクトリを作成しておいてください。
docker-compose.ymlを作成
まずはdocker-compose.ymlを作成していきます。 ルートディレクトリの直下にdocker-compose.ymlを作成し、以下のようにしてください。
1# docker-compose.yml 2version: '3.8' 3 4services: 5 frontend: 6 build: 7 context: . 8 dockerfile: docker/frontend/Dockerfile 9 container_name: next_frontend 10 ports: 11 - "3000:3000" 12 volumes: 13 - ./frontend:/var/www/html 14 depends_on: 15 - nginx 16 networks: 17 - app-network 18 19 backend: 20 build: 21 context: . 22 dockerfile: docker/backend/Dockerfile 23 container_name: django_backend 24 volumes: 25 - ./backend:/var/www/html 26 ports: 27 - "8000:8000" 28 depends_on: 29 - db 30 networks: 31 - app-network 32 33 nginx: 34 build: 35 context: . 36 dockerfile: docker/nginx/Dockerfile 37 container_name: nginx_proxy 38 ports: 39 - "80:80" 40 volumes: 41 - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf 42 - ./backend:/var/www/html 43 depends_on: 44 - backend 45 networks: 46 - app-network 47 48 db: 49 build: 50 context: . 51 dockerfile: docker/database/Dockerfile 52 container_name: mysql_db 53 environment: 54 MYSQL_DATABASE: app_db 55 MYSQL_ROOT_PASSWORD: root 56 MYSQL_USER: user 57 MYSQL_PASSWORD: password 58 ports: 59 - "3306:3306" 60 volumes: 61 - db_data:/var/lib/mysql 62 networks: 63 - app-network 64 65volumes: 66 db_data: 67 68networks: 69 app-network: 70 driver: bridge
Pythonコンテナを作成
次にPythonコンテナを作成していきます。
docker/backend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/backend/Dockerfile 2FROM python:3.12 3 4WORKDIR /var/www/html 5 6RUN pip install --upgrade pip 7RUN pip install Django mysqlclient gunicorn 8 9COPY ./backend .
Nodeコンテナを作成
次にNodeコンテナを作成していきます。
docker/frontend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/frontend/Dockerfile 2FROM node:lts-alpine3.21 3 4WORKDIR /var/www/html 5 6COPY ./frontend .
MySQLコンテナを作成
次にMySQLコンテナを作成していきます。
docker/database/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/database/Dockerfile 2FROM mysql:8.0
Nginxコンテナを作成
次にNginxコンテナを作成していきます。
docker/nginx/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/nginx/Dockerfile 2FROM nginx:alpine 3COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf
docker/nginx/ディレクトリの直下にdefault.confを作成し、以下のようにしてください。
1# docker/nginx/default.conf 2server { 3 listen 80; 4 server_name localhost; 5 6 # -------------------------------------------------- 7 # Django APIへのルーティング（例: http://localhost/api/test） 8 # -------------------------------------------------- 9 location /api/ { 10 proxy_pass http://backend:8000; 11 proxy_set_header Host $host; 12 proxy_set_header X-Real-IP $remote_addr; 13 } 14 15 # -------------------------------------------------- 16 # Next.js へのプロキシ（例: http://localhost/） 17 # -------------------------------------------------- 18 location / { 19 proxy_pass http://frontend:3000; 20 proxy_set_header Host $host; 21 proxy_set_header X-Real-IP $remote_addr; 22 } 23}
Next.jsプロジェクトとDjangoプロジェクトの作成
次にNext.jsプロジェクトとDjangoプロジェクトの作成をしていきます。 まずは以下のコマンドでプロジェクトディレクトリに移動します。
1cd project-root
以下のコマンドでコンテナをビルドします。
1docker-compose build
以下のコマンドでNext.jsプロジェクトを作成します。
1docker-compose run --rm frontend sh -c 'npx create-next-app .'
以下のコマンドでDjangoプロジェクトを作成します。
1docker-compose run --rm backend sh -c 'django-admin startproject config .'
docker-compose.ymlを修正
次にdocker-compose.ymlを修正していきます。 ルートディレクトリの直下にdocker-compose.ymlを以下のように修正してください。
1# docker-compose.yml 2version: '3.8' 3 4services: 5 frontend: 6 build: 7 context: . 8 dockerfile: docker/frontend/Dockerfile 9 container_name: next_frontend 10 ports: 11 - "3000:3000" 12 volumes: 13 - ./frontend:/var/www/html 14+ command: npm run dev 15 depends_on: 16 - nginx 17 networks: 18 - app-network 19 20 backend: 21 build: 22 context: . 23 dockerfile: docker/backend/Dockerfile 24 container_name: django_backend 25 volumes: 26 - ./backend:/var/www/html 27 ports: 28 - "8000:8000" 29 depends_on: 30 - db 31 networks: 32 - app-network 33 34 nginx: 35 build: 36 context: . 37 dockerfile: docker/nginx/Dockerfile 38 container_name: nginx_proxy 39 ports: 40 - "80:80" 41 volumes: 42 - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf 43 - ./backend:/var/www/html 44 depends_on: 45 - backend 46 networks: 47 - app-network 48 49 db: 50 build: 51 context: . 52 dockerfile: docker/database/Dockerfile 53 container_name: mysql_db 54 environment: 55 MYSQL_DATABASE: app_db 56 MYSQL_ROOT_PASSWORD: root 57 MYSQL_USER: user 58 MYSQL_PASSWORD: password 59 ports: 60 - "3306:3306" 61 volumes: 62 - db_data:/var/lib/mysql 63 networks: 64 - app-network 65 66volumes: 67 db_data: 68 69networks: 70 app-network: 71 driver: bridge
Pythonコンテナを作成
次にPythonコンテナを修正していきます。
docker/backend/ディレクトリの直下にDockerfileを以下のように修正してください。
1# docker/backend/Dockerfile 2FROM python:3.12 3 4WORKDIR /var/www/html 5 6RUN pip install --upgrade pip 7RUN pip install Django mysqlclient gunicorn 8 9COPY ./backend . 10 11+ CMD ["gunicorn", "--bind", "0.0.0.0:8000", "config.wsgi:application"]
Nodeコンテナを作成
次にNodeコンテナを作成していきます。
docker/frontend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/frontend/Dockerfile 2FROM node:lts-alpine3.21 3 4WORKDIR /var/www/html 5 6COPY ./frontend . 7 8+ RUN npm install
Dockerコンテナを再ビルド
以下のコマンドでDockerコンテナを再ビルドします。
1docker-compose build --no-cache
Django環境設定
次にDjangoの環境設定をしていきます。
まずはsettings.py設定を修正していきます。
1# backend/config/settings.py 2DATABASES = { 3 'default': { 4 'ENGINE': 'django.db.backends.mysql', 5 'NAME': 'app_db', 6 'USER': 'user', 7 'PASSWORD': 'password', 8 'HOST': 'db', 9 'PORT': '3306', 10 } 11}
次にDjangoのマイグレーションを実行していきます。
1docker-compose exec backend python manage.py migrate
動作テスト
動作テストのためにコードを追記していきます。 まずはDjangoにAPIを追加していきます。
1# /backend/config/urls.py 2from django.contrib import admin 3from django.urls import path 4from . import views 5 6urlpatterns = [ 7 path('admin/', admin.site.urls), 8+ path('api/test', views.test_api), 9]
次にビュー関数でJsonレスポンスを返すようにしていきます。
1# /backend/config/views.py 2from django.http import JsonResponse 3 4def test_api(request): 5 return JsonResponse({"message": "Djangoからのメッセージです！"})
次にNext.jsにページを追加していきます。
1# /frontend/src/app/test/page.tsx 2'use client'; 3 4import { useEffect, useState } from 'react'; 5 6export default function Home() { 7 const [message, setMessage] = useState(''); 8 9 useEffect(() => { 10 fetch('/api/test') 11 .then(res => res.json()) 12 .then(data => setMessage(data.message)) 13 .catch(err => { 14 console.error('API Error:', err); 15 setMessage('エラーが発生しました'); 16 }); 17 }, []); 18 19 return ( 20 <main> 21 <h1>Next.js + Django API 接続確認</h1> 22 <p>{message}</p> 23 </main> 24 ); 25}
次に以下のコマンドでコンテナを起動します。
1docker-compose up
ブラウザでhttp://localhost/testにアクセスし、「Djangoからのメッセージです！」が表示されていれば成功です。
まとめ
今回はDockerでDjangoとNext.jsの環境構築をする手順について解説していきましたが、いかがだったでしょうか。 近年、フロントエンドとバックエンドを分けて運用するアプリケーションが増えてきましたが、Dockerを使えば簡単に開発環境を構築することができます。 Dockerを使った開発は必須となりつつありますので、是非、チャレンジしてみてください。