如何使用Docker和Angular重新加载实时更改？

Question

How can I do real-time changes reloading using Docker and Angular 4? At this moment I have to rebuild my container to reload changes. I know that it is possible however none of the methods found on the internet have worked for me. I will be grateful for help.

docker-compose.yml:

version: '3'

services:
  db:
    image: postgres
  django:
    build: .
    command: python3 manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    depends_on:
      - db
  angular:
    build: frontend
    ports:
      - "4200:4200"
    depends_on:
      - django

Dockerfile from frontend:

# Create image based on the official Node 6 image from dockerhub
FROM node:6

# Create a directory where our app will be placed
RUN mkdir -p /usr/src/app

# Change directory so that our commands run inside this new directory
WORKDIR /usr/src/app

# Copy dependency definitions
COPY package.json /usr/src/app

# Install dependecies
RUN npm install

# Get all the code needed to run the app
COPY . /usr/src/app

# Expose the port the app runs in
EXPOSE 4200

# Serve the app
CMD ["npm", "start"]

Answer 1

In your current configuration you only copy your app files to the container on creation, thus only once. ( COPY . /usr/src/app )

I would recommend creating a volume link to your local directory and using a file change watcher like nodemon , so it can track any changes made and restart your app upon it. This is assuming you don't need any buildscripts like webpack/gulp/grunt to run.