Dies ist ein Memo beim Erstellen einer Entwicklungsumgebung für eine Webanwendung (Django im Backend und Nuxt.js im Frontend), die aus zwei Docker-Containern mit Docker-Compose besteht.
home
|- backend
| |- code (Enthält den Quellcode für das Django-Projekt)
| |- Dockerfile
| |- requirements.txt
|- frontend
| |- src (Enthält den Quellcode für das Nuxt-Projekt)
| |- Dockerfile
|- .gitignore
|- docker-compose.yml
|- README.md
Dieses Mal möchte ich nuxt für das Frontend und django für das Backend verwenden, zwei Dockerfiles vorbereiten und Docker-Compose verwenden, um jeden Container einzurichten.
Beginnen wir mit der Docker-Datei.
Dockerfile
Ich habe aus dem Python-Image ein Verzeichnis für Django erstellt und das in der Datei require.txt beschriebene Paket installiert. Dieses Mal werde ich nur Django setzen.
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
Aus dem Knotenbild die Nuxt-App Diesmal habe ich npm anstelle von Garn verwendet.
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 Synchronisieren Sie das Volumen jedes Containers mit der Hostseite.
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"]
Erstellen Sie das Docker-Image der obigen Docker-Datei.
$ docker-compose build
Wenn der Build erfolgreich ist, starten Sie den Container.
$ docker-compose up -d
Stellen Sie sicher, dass die beiden Container ausgeführt werden.
$ docker-compose ps
Gehen Sie in den Container und erstellen Sie ein Projekt.
sh
$ docker exec -it backend bash
Erstellen Sie im Container ein Projekt mit Startprojekt. Der Projektname lautet "Django-Projekt".
bash
$ django-admin startproject djangoproject
Da es sich um eine Entwicklungsumgebung handelt, fügen Sie ALLOWED_HOSTS in settings.py localhost hinzu.
settings.py
ALLOWED_HOSTS = ['localhost']
sh
$ docker exec -it frontend sh
Der Projektname lautet "nuxtproject".
sh
$ npx create-nuxt-app nuxtproject
Ihnen werden verschiedene Fragen gestellt, also lassen Sie uns antworten.
Schließen Sie den Container nach dem Erstellen des Projekts einmal.
$ docker-compose stop
Kommentieren Sie dann den Befehl in docker-compose.yml aus und starten Sie den Container erneut.
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
Wenn Sie den Bildschirm sehen, auf dem die Rakete localhost: 8000Django gestartet wird, und den Nuxt-Bildschirm bei localhost: 3000 im Browser, ist dies erfolgreich.
Wenn Sie Lust dazu haben, werde ich es auf Github veröffentlichen.
Recommended Posts