⛩️

【Docker】Nuxt.js + Django環境構築

2025/03/14に公開

はじめに

この記事ではローカルに言語をインストールせずにDockerでNuxt.jsとDjangoの開発環境を構築する手順を記載しています。Dockerイメージのビルドとコンテナの起動を行った後、コンテナ内でコマンドを実行してプロジェクトのセットアップをしていきます。ソースはGitに公開しています。

前提条件

Docker Desktopがローカルにインストールされていること

筆者のPC環境

OS: macOS Sequoia v15.1.1
Docker Compose: v2.29.2-desktop.2
Docker Desktop: v4.34.3 (170107)

参考記事

環境構築するにあたり以下の記事を参考にさせていただきました。

1. ファイル構成

今回のファイル構成は以下の通りです。

/
├─ backend
│  └─ requirements.txt
├─ frontend
│  └─ app
├─ .gitignore
├─ docker-compose.yml
├─ Dockerfile.backend
├─ Dockerfile.frontend
└─ README.md

docker-compose.yml

version: '3.9'
services:
  backend:
    container_name: backend
    build:
      context: .
      dockerfile: Dockerfile.backend
    # コンテナ初回起動時はこれを実行する
    command: tail -f /dev/null
    # 2回目以降はこれを実行
    # command: python3 ./myproject/manage.py runserver 0.0.0.0:8000 
    ports:
      - "8000:8000"
    volumes:
      - ./backend:/usr/src/app
    tty: true
    stdin_open: true
    depends_on:
      - db

  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: Dockerfile.frontend
    # 2回目以降はこれを実行
    # command: sh -c "yarn && yarn dev"
    ports:
      - "3000:3000"
    volumes:
      - ./frontend/app:/usr/src/app
      - nuxt_node_modules:/usr/src/app/node_modules
    tty: true
    environment:
      - HOST=0.0.0.0
      - port=3000
      - CHOKIDAR_USEPOLLING=true
    depends_on:
      - backend

  db:
    image: postgres:15
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: mydb
    ports:
      - "5432:5432"
    tty: true
    volumes:
      - db_data:/var/lib/postgresql/data

volumes:
  db_data:
  nuxt_node_modules:

Dockerfile.backend

FROM python:3.11.1

ENV PYTHONUNBUFFERED 1

WORKDIR /usr/src/app

COPY ./backend/requirements.txt /usr/src/app/

RUN pip install --upgrade pip && \
    pip install -r requirements.txt

COPY . /usr/src/app/

requirements.txt

django>=4.0

Dockerfile.frontend

FROM node:18-slim

ENV TZ Asia/Tokyo

WORKDIR /usr/src/app

RUN apt-get update \
    && apt-get install -y \
    git \
    vim

2. イメージのビルド・コンテナの起動

ターミナル上でdocker-compose.ymlを配置したフォルダまで移動し以下のコマンドを実行します。

docker compose build --no-cache

docker compose up -d

実行後はDocker Desktop上でコンテナイメージと、コンテナが起動されていることを確認します。

3. プロジェクトのセットアップ

バックエンド

backendのコンテナをクリックしExecタブを選択します

そこで以下のコマンドを実行します。

django-admin startproject myproject

cd myproject

python3 manage.py runserver 0.0.0.0:8000

フロントエンド

frontendも同様にExecタブから以下のコマンドを実行します

npx nuxi init . --force

yarn install

yarn dev

4. 動作確認

http://localhost:8000とhttp://localhost:3000にそれぞれアクセスし以下の画面が表示されれば成功です！

2回目以降のコンテナ起動時

初回起動時はコンテナからアプリ起動コマンドを実行しました。2回目以降はコンテナ起動時にアプリも起動するようにdocker-compose.ymlのcommandの部分を書き換えます。

backend

command: tail -f /dev/nullをコメントアウトしてpythonアプリ起動のコマンドのコメントを外します。

# コンテナ初回起動時はこれを実行する
# command: tail -f /dev/null
# 2回目以降はこれを実行
command: python3 ./myproject/manage.py runserver 0.0.0.0:8000

frontend

Nuxtアプリ起動コマンドのコメントを外します。

# 2回目以降はこれを実行
command: sh -c "yarn && yarn dev"

修正後はdocker compose up -d実行時にアプリが起動するようになります。

おわりに

今回はローカルに言語をインストールせずにDockerでNuxt.jsとDjangoの環境構築をする方法を紹介しました。私はまだまだ初心者なのでご指摘や改善点などございましたらコメントしていただけると幸いです。

Discussion

ログインするとコメントできます