[Memo] Build a development environment for Django + Nuxt.js with Docker

Introduction

This is a memo when building a development environment for a web application (django on the back end and Nuxt.js on the front end) consisting of two Docker containers with docker-compose.

Environment at hand

• macOS Catalina v10.15.1
• Docker version 18.09.2, build 6247962
• docker-compose version 1.23.2, build 1110ad01

Directory structure

home
|- backend
| |- code (Contains the source code for the django project)
| |- Dockerfile
| |- requirements.txt
|- frontend
| |- src (Contains the source code of the nuxt project)
| |- Dockerfile
|- .gitignore
|- docker-compose.yml
|- README.md

Set up a Docker container

This time, I would like to use nuxt for the front end and django for the back end, prepare two Dockerfiles, and use docker-compose to set up each container.

Let's start with the Dockerfile.

Dockerfile

Backend Dockerfile

I made a directory for django from the python image and installed the package described in requirements.txt. This time, I'll put only django.

backend/Dockerfile

FROM python:3.7
ENV PYTHONUNBUFFERED 1

RUN mkdir /code
WORKDIR /code

ADD requirements.txt /code/
RUN pip install --upgrade pip
RUN pip install --no-cache-dir -r requirements.txt

requirements.txt

Django==3.0

Front-end Dockerfile

From the Node image, the Nuxt app This time I used npm instead of yarn.

frontend/Dockerfile

FROM node:12.13-alpine

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

RUN apk update && \
    apk upgrade && \
    apk add git
RUN npm install -g npm && \
    npm install -g core-js@latest && \
    npm install -g @vue/cli && \
    npm install -g @vue/cli-init && \
    npm install -g nuxt create-nuxt-app

ENV LANG C.UTF-8
ENV TZ Asia/Tokyo
ENV HOST 0.0.0.0
EXPOSE 3000

docker-compose.yml Synchronize the volume of each container with the host side.

• Comment out will be removed after creating the django / nuxt project.

docker-compose.yml

version: '3'

services:
  backend:
    container_name: backend
    build: ./backend
    tty: true
    ports:
      - '8000:8000'
    volumes:
      - ./backend/code:/code
    # command: python djangoproject/manage.py runserver 0.0.0.0:8000

  frontend:
    container_name: frontend
    build: ./frontend
    tty: true
    ports:
      - '3000:3000'
    volumes:
      - ./frontend/src:/usr/src/app
    # command: [sh, -c, "cd nuxtproject/ && npm run dev"]

Build Docker image and launch container

Build the Docker image of the above Dockerfile.

$ docker-compose build

If the build is successful, launch the container.

$ docker-compose up -d

Make sure the two containers are running.

$ docker-compose ps

Create a Django & Nuxt project

Go inside the container and create a project.

Create a Django project

sh

$ docker exec -it backend bash

Once in the container, create a project with startproject. The project name is django project.

bash

$ django-admin startproject djangoproject

Since it is a development environment, add localhost to ALLOWED_HOSTS in settings.py.

settings.py

ALLOWED_HOSTS = ['localhost']

Creating a Nuxt project

sh

$ docker exec -it frontend sh

The project name is nuxtproject.

sh

$ npx create-nuxt-app nuxtproject

You will be asked various questions, so let's answer.

Verification

After creating the project, close the container once.

$ docker-compose stop

Then uncomment the command in docker-compose.yml and start the container again.

docker-compose.yml

command: python djangoproject/manage.py runserver 0.0.0.0:8000
command: [sh, -c, "cd nuxtproject/ && npm run dev"]

sh

$ docker-compose up -d

If you can see the screen where the localhost: 8000Django rocket is launched and the Nuxt screen at localhost: 3000 from your browser, you are successful.

If you feel like it, I will post it on Github.