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:

  • Django Docker settings with link and enviroment
  • exposing container ports for django application
  • Unable to connect to server when running docker django container?
  • How to deploy django 1.8 on Elastic Beanstalk using Docker
  • Should nginx be packed into the same container as Django when deploying with Docker Swarm?
  • AWR ALB health check fails when redirecting http request to https on django nginx server
  • 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
    

  • Run multiple identical fig environment on the same host
  • docker restore from checkpoint - cgroup and mountpoints error
  • Pull an Image from Amazon ECR fails on Windows
  • Docker cannot run
  • How to link jenkins pipeline job to label on docker slaves containers
  • Docker Remote Api from external machine doesn't respond
  • 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.