如何將Angular項目添加到Django和Docker中

Question

我想將Django項目中的Angular 4項目添加到Docker中？我的文件的結構看起來這樣： DockerContainer：

Backend     
Dockerfile    
Frontend     
docker-compose.yml  
requirements.txt 

我想在Frontend目錄下創建角4項目。我可以使用ng new my-app來做到這一點，但接下來我應該怎麼做？這是我的docker-compose.yml：

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/ 

在我的主目錄中的文件的那一刻結構與您的建議看起來這樣：

├── 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 

Answer 1

角4個項目只是HTML和JavaScript（據我所知）。通常，我們將構建應用程序，然後從Web服務器（例如Apache HTTPD的nginx）提供它。我決定基於最近的Docker特性爲多階段構建做一個Angular 4 Docker鏡像的例子。

該示例在https://gist.github.com/andyshinn/de65b71a7b50a0e5a73732c69f1a3d35。假設您的Angular 4應用程序代碼根位於Frontend，您需要將此Dockerfile和nginx.conf複製到Frontend文件夾中。然後，您可以將新服務添加到您的docker-compose.yml以構建和運行它。這是一個加法的例子：

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