How to add Angular project to Django and Docker

I would like to add Angular 4 project to Docker with Django project? My structure of files look in this way:
DockerContainer:

Backend                 
Dockerfile              
Frontend                
docker-compose.yml      
requirements.txt

I would like to create Angular 4 project in Frontend directory. I can do this using ng new my-app but what should I do next? This is my docker-compose.yml:

  • Should I add the reverse proxy in the same container as the application on docker?
  • uWSGI + Docker: pyuwsgi: executable file not found in $PATH
  • Registering SIGINT/SIGQUIT signals in a Django application served in Docker
  • Django in docker. Can't see logs
  • How to drop `django_admin_log` with docker-compose?
  • docker with pycharm 5
  • version: '3'
    
    services:
      db:
        image: postgres
      django:
        build: .
        command: python3 Backend/manage.py runserver 0.0.0.0:8000
        volumes:
          - .:/code
        ports:
          - "8000:8000"
        depends_on:
          - db
    

    Dockerfile:

    FROM python:3.6.1
    ENV PYTHONUNBUFFERED 1
    RUN mkdir /code
    WORKDIR /code
    ADD requirements.txt /code/
    RUN pip install -r requirements.txt
    ADD . /code/
    

    At the moment structure of my files in main directory with your suggestions look in this way:

    ├── Backend
    │   ├── AI
    │   │   ├── __init__.py
    │   │   ├── __pycache__
    │   │   │   ├── __init__.cpython-36.pyc
    │   │   │   ├── settings.cpython-36.pyc
    │   │   │   ├── urls.cpython-36.pyc
    │   │   │   └── wsgi.cpython-36.pyc
    │   │   ├── settings.py
    │   │   ├── urls.py
    │   │   └── wsgi.py
    │   └── manage.py
    ├── Dockerfile
    ├── Frontend
    │   └── angularProject
    │       └── all files in my angular project 
    ├── docker-compose.yml
    └── requirements.txt
    

  • Multiple commands for Mongo Docker image
  • How to time the execution in a container of Docker?
  • my proxy in docker wont link my url to port
  • Is it possible to connect ipc namespeces with docker compose
  • Have sshd forward logins of git user to a (GitLab) Docker container
  • Creating a Docker Image for a Github Project
  • One Solution collect form web for “How to add Angular project to Django and Docker”

    Angular 4 projects are just HTML and JavaScript (from what I understand). Generally, we would build the application and then serve it from a web server (such as nginx for Apache HTTPD). I decided to make an example of an Angular 4 Docker image based on a recent Docker feature for multi-stage builds.

    The example is at https://gist.github.com/andyshinn/de65b71a7b50a0e5a73732c69f1a3d35. Assuming your Angular 4 application code root was at Frontend, you would copy this Dockerfile and nginx.conf to the Frontend folder. Then, you can add a new service to your docker-compose.yml to build and run it. Here is an example of that addition:

    version: '3'
    
    services:
      db:
        image: postgres
      django:
        build: .
        command: python3 Backend/manage.py runserver 0.0.0.0:8000
        volumes:
          - .:/code
        ports:
          - "8000:8000"
        depends_on:
          - db
      angular:
        build: Frontend/angularProject
        ports:
          - "8010:80"
        depends_on:
          - django
    
    Docker will be the best open platform for developers and sysadmins to build, ship, and run distributed applications.