【Django+Next.js】DockerでフロントエンドをNext.jsにしてバックエンドをDjangoで環境構築をする

動画で解説を見る

1 開発環境
2 DockerでフロントエンドをNext.jsにしてバックエンドをDjangoで環境構築をする手順
3 動作テスト
4 まとめ

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Docker Engine:v23.0.5

DockerでフロントエンドをNext.jsにしてバックエンドをDjangoで環境構築をする手順

DockerでフロントエンドをNext.jsにしてバックエンドをDjangoで環境構築をする手順について解説していきます。

ディレクトリ構成

今回のディレクトリ構成は下記を目指していきます。

project-root/
├── docker/
│   ├── frontend/       # Next.js用Dockerfile
│   ├── backend/        # Django用Dockerfile
│   ├── database/       # MySQLコンテナ(Dockerfile)
│   └── nginx/          # Nginxコンテナ(Dockerfile + 設定ファイル)
├── frontend/           # Next.jsプロジェクト
├── backend/            # Djangoプロジェクト
└── docker-compose.yml

project-root/

├── docker/

│ ├── frontend/ # Next.js用Dockerfile

│ ├── backend/ # Django用Dockerfile

│ ├── database/ # MySQLコンテナ(Dockerfile)

│ └── nginx/ # Nginxコンテナ(Dockerfile + 設定ファイル)

├── frontend/ # Next.jsプロジェクト

├── backend/ # Djangoプロジェクト

└── docker-compose.yml

最初に必要なディレクトリを作成しておいてください。

docker-compose.ymlを作成

まずはdocker-compose.ymlを作成していきます。

ルートディレクトリの直下にdocker-compose.ymlを作成し、以下のようにしてください。

version: '3.8'

services:
  frontend:
    build:
      context: .
      dockerfile: docker/frontend/Dockerfile
    container_name: next_frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/var/www/html
    depends_on:
      - nginx
    networks:
      - app-network

  backend:
    build:
      context: .
      dockerfile: docker/backend/Dockerfile
    container_name: django_backend
    volumes:
      - ./backend:/var/www/html
    ports:
      - "8000:8000"
    depends_on:
      - db
    networks:
      - app-network

  nginx:
    build:
      context: .
      dockerfile: docker/nginx/Dockerfile
    container_name: nginx_proxy
    ports:
      - "80:80"
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./backend:/var/www/html
    depends_on:
      - backend
    networks:
      - app-network

  db:
    build:
      context: .
      dockerfile: docker/database/Dockerfile
    container_name: mysql_db
    environment:
      MYSQL_DATABASE: app_db
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - db_data:/var/lib/mysql
    networks:
      - app-network

volumes:
  db_data:

networks:
  app-network:
    driver: bridge

version: '3.8'

services:

frontend:

build:

context: .

dockerfile: docker/frontend/Dockerfile

container_name: next_frontend

ports:

- "3000:3000"

volumes:

- ./frontend:/var/www/html

depends_on:

- nginx

networks:

- app-network

backend:

build:

context: .

dockerfile: docker/backend/Dockerfile

container_name: django_backend

volumes:

- ./backend:/var/www/html

ports:

- "8000:8000"

depends_on:

- db

networks:

- app-network

nginx:

build:

context: .

dockerfile: docker/nginx/Dockerfile

container_name: nginx_proxy

ports:

- "80:80"

volumes:

- ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf

- ./backend:/var/www/html

depends_on:

- backend

networks:

- app-network

db:

build:

context: .

dockerfile: docker/database/Dockerfile

container_name: mysql_db

environment:

MYSQL_DATABASE: app_db

MYSQL_ROOT_PASSWORD: root

MYSQL_USER: user

MYSQL_PASSWORD: password

ports:

- "3306:3306"

volumes:

- db_data:/var/lib/mysql

networks:

- app-network

volumes:

db_data:

networks:

app-network:

driver: bridge

Pythonコンテナを作成

次にPythonコンテナを作成していきます。

docker/backend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM python:3.12

WORKDIR /var/www/html

RUN pip install --upgrade pip
RUN pip install Django mysqlclient gunicorn

COPY ./backend .

FROM python:3.12

WORKDIR /var/www/html

RUN pip install --upgrade pip

RUN pip install Django mysqlclient gunicorn

COPY ./backend .

Nodeコンテナを作成

次にNodeコンテナを作成していきます。

docker/frontend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM node:lts-alpine3.21

WORKDIR /var/www/html

COPY ./frontend .

FROM node:lts-alpine3.21

WORKDIR /var/www/html

COPY ./frontend .

MySQLコンテナを作成

次にMySQLコンテナを作成していきます。

docker/database/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM mysql:8.0

1	FROM mysql:8.0

Nginxコンテナを作成

次にNginxコンテナを作成していきます。

docker/nginx/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM nginx:alpine
COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf

1 2	FROM nginx:alpine COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf

docker/nginx/ディレクトリの直下にdefault.confを作成し、以下のようにしてください。

server {
    listen 80;
    server_name localhost;

    # --------------------------------------------------
    # Django APIへのルーティング（例: http://localhost/api/test）
    # --------------------------------------------------
    location /api/ {
        proxy_pass http://backend:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # --------------------------------------------------
    # Next.js へのプロキシ（例: http://localhost/）
    # --------------------------------------------------
    location / {
        proxy_pass http://frontend:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

server {

listen 80;

server_name localhost;

# --------------------------------------------------

# Django APIへのルーティング（例: http://localhost/api/test）

# --------------------------------------------------

location /api/ {

proxy_pass http://backend:8000;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

}

# --------------------------------------------------

# Next.js へのプロキシ（例: http://localhost/）

# --------------------------------------------------

location / {

proxy_pass http://frontend:3000;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

}

Next.jsプロジェクトとDjangoプロジェクトの作成

次にNext.jsプロジェクトとDjangoプロジェクトの作成をしていきます。

まずは以下のコマンドでプロジェクトディレクトリに移動します。

cd project-root

1	cd project-root

以下のコマンドでコンテナをビルドします。

docker-compose build

1	docker-compose build

以下のコマンドでNext.jsプロジェクトを作成します。

docker-compose run --rm frontend sh -c 'npx create-next-app .'

1	docker-compose run --rm frontend sh -c 'npx create-next-app .'

以下のコマンドでDjangoプロジェクトを作成します。

docker-compose run --rm backend sh -c 'django-admin startproject config .'

1	docker-compose run --rm backend sh -c 'django-admin startproject config .'

docker-compose.ymlを修正

次にdocker-compose.ymlを修正していきます。

ルートディレクトリの直下にdocker-compose.ymlを以下のように修正してください。

version: '3.8'

services:
  frontend:
    build:
      context: .
      dockerfile: docker/frontend/Dockerfile
    container_name: next_frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/var/www/html
    command: npm run dev
    depends_on:
      - nginx
    networks:
      - app-network

  backend:
    build:
      context: .
      dockerfile: docker/backend/Dockerfile
    container_name: django_backend
    volumes:
      - ./backend:/var/www/html
    ports:
      - "8000:8000"
    depends_on:
      - db
    networks:
      - app-network

  nginx:
    build:
      context: .
      dockerfile: docker/nginx/Dockerfile
    container_name: nginx_proxy
    ports:
      - "80:80"
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./backend:/var/www/html
    depends_on:
      - backend
    networks:
      - app-network

  db:
    build:
      context: .
      dockerfile: docker/database/Dockerfile
    container_name: mysql_db
    environment:
      MYSQL_DATABASE: app_db
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - db_data:/var/lib/mysql
    networks:
      - app-network

volumes:
  db_data:

networks:
  app-network:
    driver: bridge

version: '3.8'

services:

frontend:

build:

context: .

dockerfile: docker/frontend/Dockerfile

container_name: next_frontend

ports:

- "3000:3000"

volumes:

- ./frontend:/var/www/html

command: npm run dev

depends_on:

- nginx

networks:

- app-network

backend:

build:

context: .

dockerfile: docker/backend/Dockerfile

container_name: django_backend

volumes:

- ./backend:/var/www/html

ports:

- "8000:8000"

depends_on:

- db

networks:

- app-network

nginx:

build:

context: .

dockerfile: docker/nginx/Dockerfile

container_name: nginx_proxy

ports:

- "80:80"

volumes:

- ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf

- ./backend:/var/www/html

depends_on:

- backend

networks:

- app-network

db:

build:

context: .

dockerfile: docker/database/Dockerfile

container_name: mysql_db

environment:

MYSQL_DATABASE: app_db

MYSQL_ROOT_PASSWORD: root

MYSQL_USER: user

MYSQL_PASSWORD: password

ports:

- "3306:3306"

volumes:

- db_data:/var/lib/mysql

networks:

- app-network

volumes:

db_data:

networks:

app-network:

driver: bridge

Pythonコンテナを作成

次にPythonコンテナを修正していきます。

docker/backend/ディレクトリの直下にDockerfileを以下のように修正してください。

FROM python:3.12

WORKDIR /var/www/html

RUN pip install --upgrade pip
RUN pip install Django mysqlclient gunicorn

COPY ./backend .

CMD ["gunicorn", "--bind", "0.0.0.0:8000", "config.wsgi:application"]

FROM python:3.12

WORKDIR /var/www/html

RUN pip install --upgrade pip

RUN pip install Django mysqlclient gunicorn

COPY ./backend .

CMD ["gunicorn", "--bind", "0.0.0.0:8000", "config.wsgi:application"]

Nodeコンテナを作成

次にNodeコンテナを作成していきます。

docker/frontend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM node:lts-alpine3.21

WORKDIR /var/www/html

COPY ./frontend .

RUN npm install

FROM node:lts-alpine3.21

WORKDIR /var/www/html

COPY ./frontend .

RUN npm install

Dockerコンテナを再ビルド

以下のコマンドでDockerコンテナを再ビルドします。

docker-compose build --no-cache

1	docker-compose build --no-cache

Django環境設定

次にDjangoの環境設定をしていきます。

まずはsettings.py設定を修正していきます。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'app_db',
        'USER': 'user',
        'PASSWORD': 'password',
        'HOST': 'db',
        'PORT': '3306',
    }
}

DATABASES = {

'default': {

'ENGINE': 'django.db.backends.mysql',

'NAME': 'app_db',

'USER': 'user',

'PASSWORD': 'password',

'HOST': 'db',

'PORT': '3306',

}

次にDjangoのマイグレーションを実行していきます。

docker-compose exec backend python manage.py migrate

1	docker-compose exec backend python manage.py migrate

動作テスト

動作テストのためにコードを追記していきます。

まずはDjangoにAPIを追加していきます。

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/test', views.test_api),
]

from django.contrib import admin

from django.urls import path

from . import views

urlpatterns = [

path('admin/', admin.site.urls),

path('api/test', views.test_api),

]

次にビュー関数でJsonレスポンスを返すようにしていきます。

from django.http import JsonResponse

def test_api(request):
    return JsonResponse({"message": "Djangoからのメッセージです！"})

from django.http import JsonResponse

def test_api(request):

return JsonResponse({"message": "Djangoからのメッセージです！"})

次にNext.jsにページを追加していきます。

'use client';

import { useEffect, useState } from 'react';

export default function Home() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/api/test')
      .then(res => res.json())
      .then(data => setMessage(data.message))
      .catch(err => {
        console.error('API Error:', err);
        setMessage('エラーが発生しました');
      });
  }, []);

  return (
    <main>
      <h1>Next.js + Django API 接続確認</h1>
      <p>{message}</p>
    </main>
  );
}

'use client';

import { useEffect, useState } from 'react';

export default function Home() {

const [message, setMessage] = useState('');

useEffect(() => {

fetch('/api/test')

.then(res => res.json())

.then(data => setMessage(data.message))

.catch(err => {

console.error('API Error:', err);

setMessage('エラーが発生しました');

});

}, []);

return (

<main>

<h1>Next.js + Django API 接続確認</h1>

<p>{message}</p>

</main>

);

}

次に以下のコマンドでコンテナを起動します。

docker-compose up

1	docker-compose up

ブラウザでhttp://localhost/testにアクセスし、「Djangoからのメッセージです！」が表示されていれば成功です。

まとめ

今回はDockerでDjangoとNext.jsの環境構築をする手順について解説していきましたが、いかがだったでしょうか。

近年、フロントエンドとバックエンドを分けて運用するアプリケーションが増えてきましたが、Dockerを使えば簡単に開発環境を構築することができます。

Dockerを使った開発は必須となりつつありますので、是非、チャレンジしてみてください。