[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

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.

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.

Recommended Posts

[Memo] Build a development environment for Django + Nuxt.js with Docker
[Python] Build a Django development environment with Docker
[DynamoDB] [Docker] Build a development environment for DynamoDB and Django with docker-compose
Build a development environment with Poetry Django Docker Pycharm
Build a Django development environment with Docker! (Docker-compose / Django / postgreSQL / nginx)
[Django] Build a Django container (Docker) development environment quickly with PyCharm
Build Django + NGINX + PostgreSQL development environment with Docker
Build a Django development environment with Doker Toolbox
I made a development environment for Django 3.0 with Docker, Docker-compose, Poetry
Build a Django environment for Win10 (with virtual space)
Build a local development environment with WSL + Docker Desktop for Windows + docker-lambda + Python
Create a Todo app with Django ① Build an environment with Docker
[Linux] Build a jenkins environment with Docker
[Linux] Build a Docker environment with Amazon Linux 2
Create a development environment for Go + MySQL + nginx with Docker (docker-compose)
[Memo] Django development environment
Build a C language development environment with a container
Build the fastest Django development environment with docker-compose
Go (Echo) Go Modules × Build development environment with Docker
Build a Django environment with Vagrant in 5 minutes
[Memo] Build a virtual environment with Pyenv + anaconda
Build a Kubernetes environment for development on Ubuntu
Quickly build a Python Django environment with IntelliJ
Build a mruby development environment for ESP32 (Linux)
Django development environment construction memo
Build a local development environment for Laravel6.X on Mac
Build a python environment for each directory with pyenv-virtualenv
How to build a Django (python) environment on docker
Build a machine learning application development environment with Python
How to build a development environment for TensorFlow (1.0.0) (Mac)
A memo about building a Django (Python) application with Docker
Build a lightweight Fast API development environment using Docker
Build a go environment using Docker
Build a deb file with Docker
Build a Go development environment with VS Code's Remote Containers
Build Mysql + Python environment with docker
Deploy a Django application with Docker
[For beginners] Django -Development environment construction-
Build PyPy execution environment with Docker
Build a comfortable development environment with VSCode x Remote Development x Pipenv
Build a web application with Django
How to build a python2.7 series development environment with Vagrant
Create a simple Python development environment with VSCode & Docker Desktop
[Django] Use VS Code + Remote Containers to quickly build a Django container (Docker) development environment.
Build a Flask development environment at low cost using Docker
Rebuild Django's development environment with Docker! !! !! !!
Build a local development environment for Lambda + Python using Serverless Framework
Create a simple Python development environment with VS Code and Docker
Build Jupyter Lab (Python) environment with Docker
Build a Tensorflow environment with Raspberry Pi [2020]
Build a TOP screen for Django users
Build a Fast API environment with docker-compose
Get a local DynamoDB environment with Docker
Build a python virtual environment with pyenv
A memo packed with RADEX environment construction
Build a modern Python environment with Neovim
Building a Python development environment for AI development
Creating a development environment for machine learning
Build NGINX + NGINX Unit + MySQL environment with Docker
Learning history to participate in team application development with Python ~ Build Docker / Django / Nginx / MariaDB environment ~
Build a Python + bottle + MySQL environment with Docker on RaspberryPi3! [Easy construction]