[Memo] Construire un environnement de développement pour Django + Nuxt.js avec Docker

introduction

Ceci est un mémo lors de la construction d'un environnement de développement pour une application web (django sur le back-end et Nuxt.js sur le front-end) composé de deux conteneurs Docker avec docker-compose.

Environnement à portée de main

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

Structure du répertoire

home
|- backend
| |- code (Contient le code source du projet django)
| |- Dockerfile
| |- requirements.txt
|- frontend
| |- src (Contient le code source du projet nuxt)
| |- Dockerfile
|- .gitignore
|- docker-compose.yml
|- README.md

Configurer un conteneur Docker

Cette fois, j'aimerais utiliser nuxt pour le front-end et django pour le back-end, préparer deux Dockerfiles et utiliser docker-compose pour configurer chaque conteneur.

Commençons par le Dockerfile.

Dockerfile

Backend Dockerfile

J'ai créé un répertoire pour django à partir de l'image python et installé le package décrit dans requirements.txt. Cette fois, je ne mettrai que 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

Dockerfile frontal

À partir de l'image Node, l'application Nuxt Cette fois, j'ai utilisé npm au lieu de fil.

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 Synchronisez le volume de chaque conteneur avec le côté hôte.

• Les commentaires seront supprimés après la création du projet django / nuxt.

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"]

Créer une image Docker et lancer un conteneur

Créez l'image Docker du Dockerfile ci-dessus.

$ docker-compose build

Si la génération réussit, lancez le conteneur.

$ docker-compose up -d

Assurez-vous que les deux conteneurs fonctionnent.

$ docker-compose ps

Créer un projet Django & Nuxt

Entrez dans le conteneur et créez un projet.

Créer un projet Django

sh

$ docker exec -it backend bash

Une fois dans le conteneur, créez un projet avec démarrer le projet. Le nom du projet est django project.

bash

$ django-admin startproject djangoproject

Puisqu'il s'agit d'un environnement de développement, ajoutez localhost à ALLOWED_HOSTS dans settings.py.

settings.py

ALLOWED_HOSTS = ['localhost']

Créer un projet Nuxt

sh

$ docker exec -it frontend sh

Le nom du projet est nuxtproject.

sh

$ npx create-nuxt-app nuxtproject

On vous posera diverses questions, alors répondons.

Vérification

Après avoir créé le projet, fermez le conteneur une fois.

$ docker-compose stop

Décommentez ensuite la commande dans docker-compose.yml et redémarrez le conteneur.

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

Si vous pouvez voir l'écran où la fusée Django localhost: 8000 est lancée et l'écran Nuxt à localhost: 3000 dans le navigateur, cela réussit.

Si vous en avez envie, je le posterai sur Github.