setting django and angular with docker

Question

I have written my first Django 2.0 application and using Angular for frontend.

My Directory structure looks like

app
|-- config                # nginx configuration files
    |-- nginx
        |-- nginx.conf
|-- angular-app           # frontend angular application
    |-- angular.json
    |-- package.json
|-- src                   # Django backend application
    |-- myapp
        |-- urls.py
        |-- wsgi.py
    |-- manage.py
|-- static_cdn            # store and host static files and uploaded files
    |-- static_root
    |-- media_root
|-- .dockerignore
|-- docker-compose.yml
|-- Dockerfile
|-- requirements.txt
|-- start.sh

The content of docker-compose.yml

version: '3'

services:
  nginx:
    image: nginx:latest
    container_name: "myapp-nginx"
    ports:
      - "10080:80"
      - "10443:43"
    volumes:
      - .:/app
      - ./config/nginx:/etc/nginx/conf.d
    depends_on:
      - web
  web:
    build: .
    container_name: "myapp-dev"
    command: ./start.sh
    volumes:
      - .:/app
    ports:
      - "9010:9010"
    depends_on:
      - db
  db:
    image: postgres
    container_name: "myapp-postgres-db"

content of Dockerfile

FROM ubuntu:18.04

FROM python:3
ENV PYTHONUNBUFFERED 1

ENV LC_ALL C.UTF-8
ENV LANG C.UTF-8

# -- Install Application into container:
RUN set -ex && mkdir /app

WORKDIR /app
ADD requirements.txt /app/

RUN pip install -r requirements.txt

# -- Adding dependencies:
ADD . /app/

content of start.sh

#!/usr/bin/env bash

python3 src/manage.py makemigrations
python3 src/manage.py migrate
echo --: Running collectstatic
python3 src/manage.py collectstatic --noinput
echo --: Starting Gunicorn.
gunicorn --pythonpath src myapp.wsgi:application \
    --bind 0.0.0.0:9010 \
    --workers 3

This is working fine and django server is accessible on http://127.0.0.1:9010

But to run Angular application, I need to navigate to the angular-app and then run ng server to run angular application.

What I want to add angular-app to docker setup so that angular app also starts with docker-compose up command.

I want different containers for each app so that I could access

# Django admin panel via
http://127.0.0.1:9010/admin/

# angular frontend
http://127.0.0.1:4010/

But both start with single docker command.

Answer 1

So, your main issue is that you cannot start two processes from in your bash file because both gunicorn and ng server do not return immediately. They return after they stop. Thus, both the processes will not be started simultaneously.

To solve this, we need something like supervisor and run the gunicorn and ng server with it. To read how to deploye gunicorn with supervisor, read this

In a similar way, you can start ng server with supervisor.

What supervisor does is that it will start both your processes in the background and return immediately. Enabling you to start both of them with a single command in start.sh and hence with docker-compose up.

My apologies for not being able to write the complete configuration. Will write it if my time constraints allow it.

Here's another read that will be useful.