[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

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.

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.

Recommended Posts

[Memo] Construire un environnement de développement pour Django + Nuxt.js avec Docker
[Python] Créer un environnement de développement Django avec Docker
[DynamoDB] [Docker] Créer un environnement de développement pour DynamoDB et Django avec docker-compose
Créez un environnement de développement avec Poetry Django Docker Pycharm
Créez un environnement de développement Django avec Docker! (Docker-compose / Django / postgreSQL / nginx)
[Django] Créez rapidement un environnement de développement de conteneur Django (Docker) avec PyCharm
Créer un environnement de développement Django à l'aide de Doker Toolbox
J'ai créé un environnement de développement pour Django 3.0 avec Docker, Docker-compose, Poetry
Construire un environnement Django pour Win10 (avec espace virtuel)
Créez un environnement de développement local avec WSL + Docker Desktop pour Windows + docker-lambda + Python
Créer une application Todo avec Django ① Créer un environnement avec Docker
[Linux] Créer un environnement Jenkins avec Docker
[Linux] Construction de l'environnement Docker avec Amazon Linux 2
[Memo] Environnement de développement Django
Créer un environnement de développement de langage C avec un conteneur
Créez un environnement Django avec Vagrant en 5 minutes
[Memo] Créez un environnement virtuel avec Pyenv + anaconda
Créer un environnement Kubernetes pour le développement sur Ubuntu
Créez rapidement un environnement Python Django avec IntelliJ
Créer un environnement de développement mruby pour ESP32 (édition Linux)
Mémo de construction de l'environnement de développement Django
Créez un environnement de développement local pour Laravel6.X sur votre Mac
Créez un environnement python pour chaque répertoire avec pyenv-virtualenv
Comment créer un environnement Django (python) sur Docker
Créer un environnement de développement d'applications d'apprentissage automatique avec Python
Comment créer un environnement de développement pour TensorFlow (1.0.0) (Mac)
Un mémo sur la création d'une application Django (Python) avec Docker
Créer un environnement de développement d'API rapide léger à l'aide de Docker
Créer un environnement go à l'aide de Docker
Créer un fichier deb avec Docker
Créez un environnement de développement Go avec les conteneurs distants de VS Code
Construire un environnement Mysql + Python avec docker
Déployer l'application Django avec Docker
[Pour les débutants] Django -Construction d'environnement de développement-
Créez un environnement de développement confortable avec VSCode x Remote Development x Pipenv
Créer une application Web avec Django
Comment créer un environnement de développement de la série Python2.7 avec Vagrant
Créez un environnement de développement Python simple avec VSCode et Docker Desktop
[Django] Créez rapidement un environnement de développement de conteneur Django (Docker) à l'aide de VS Code + Remote Containers
Créez un environnement de développement Flask à faible coût avec Docker
Reconstruisez l'environnement de développement de Django avec Docker! !! !! !!
Créer un environnement de développement local pour Lambda + Python à l'aide de Serverless Framework
Créer un environnement Jupyter Lab (Python) avec Docker
Créer un environnement Tensorflow avec Raspberry Pi [2020]
Créez un environnement d'API rapide avec docker-compose
Obtenez un environnement local pour DynamoDB avec Docker
Créez un environnement virtuel pour python avec pyenv
Un mémo rempli de construction d'environnement RADEX
Créez un environnement Python moderne avec Neovim
Créer un environnement de développement Python pour le développement de l'IA
Créer un environnement de développement pour l'apprentissage automatique
Construire un environnement de NGINX + NGINX Unit + MySQL avec Docker
Apprentissage de l'historique pour participer au développement d'applications d'équipe avec Python ~ Créer un environnement Docker / Django / Nginx / MariaDB ~
Construisez un environnement Python + bouteille + MySQL avec Docker sur RaspberryPi3! [Construction facile]