Docker Compose setup for Vue.js frontend, Django backend

docker-compose.override.yml

version: "3.8"

services:
  server:
    volumes:
      - ./server:/server
      - ./media:/server/media
    command: bash runserver.sh
    restart: on-failure
    ports:
      - "8000:8000"

  client:
    build:
      context: .
      target: client-install
      args:
        - ENV_FILE=${ENV_FILE}
    command: npm run serve
    volumes:
      - ./client:/client
    restart: on-failure
    env_file: ${ENV_FILE}
    ports:
      - "8080:8080"
    networks:
      - saor

docker-compose.prod.yml

version: "3.8"

services:
  server:
    volumes:
      - ./staticfiles:/server/staticfiles
      - ./media:/server/media
    command: bash gunicorn.sh
    ports:
      - "8000"

  web:
    build:
      context: .
      target: web
      args:
        ENV_FILE: ${ENV_FILE}
    env_file: ${ENV_FILE}
    command: nginx -g 'daemon off;'
    volumes:
      - ./staticfiles:/client/staticfiles
      - ./media:/client/media
    ports:
      - "5000:80"
    networks:
      - saor
    depends_on:
      - server

docker-compose.yml

version: "3.8"

services:
  server:
    build:
      context: .
      target: server-build
      args:
        - ENV_FILE=${ENV_FILE}
    env_file: ${ENV_FILE}
    networks:
      - saor

networks:
  saor:

Dockerfile

FROM python:3.8 as pip-build

RUN pip install --upgrade pip
WORKDIR /wheels
COPY ./server/requirements.txt ./
RUN pip wheel -r requirements.txt

FROM python:3.8 as server-build

WORKDIR /server/
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
COPY --from=pip-build /wheels /wheels
COPY ./server/requirements.txt ./
RUN pip install --no-index --find-links=/wheels -r requirements.txt
COPY ./server/ ./

FROM node:alpine as client-install

WORKDIR /client/
COPY ./client/package*.json ./
RUN npm install
COPY ./client/ ./
ARG ENV_FILE
COPY $ENV_FILE ./.env

FROM client-install as client-build
RUN npm run build

FROM nginx:alpine as web

RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d/
COPY --from=client-build /client/dist/ /dist/

gunicorn.sh

#!/usr/bin/env bash

set -o errexit
set -o pipefail
set -o nounset

python manage.py migrate
python manage.py collectstatic --noinput --verbosity 0
gunicorn saor.wsgi -b 0.0.0.0:8000

nginx.conf

upstream server {
  server server:8000;
}

server {
  listen 80;
  charset utf-8;

  root /dist/;
  index index.html;

  location /api {
    proxy_pass http://server;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_redirect off;
    proxy_set_header SCRIPT_NAME /api;
  }

  location /media/ {
      alias /client/media/;
  }

  location /staticfiles/ {
      alias /client/staticfiles/;
  }

  location / {
    try_files $uri $uri/ @rewrites;
  }

  location @rewrites {
    rewrite ^(.+)$ /index.html last;
  }
}

prod-up.sh

docker-compose -f docker-compose.yml -f docker-compose.prod.yml build
docker-compose -f docker-compose.yml -f docker-compose.prod.yml restart