Dockerized angular cli 应用程序热重载失败

Question

我已经使用以下设置对我现有的 angular cli 应用程序进行了docker化：

根级dockerfile：

#  Create a new image from the base nodejs 7 image.
FROM node:7
# Create the target directory in the imahge
RUN mkdir -p /usr/src/app
# Set the created directory as the working directory
WORKDIR /usr/src/app
# Copy the package.json inside the working directory
COPY package.json /usr/src/app
# Install required dependencies
RUN npm install
# Copy the client application source files. You can use .dockerignore to exlcude files. Works just as .gitignore does.
COPY . /usr/src/app
# Open port 4200. This is the port that our development server uses
EXPOSE 4200
# Start the application. This is the same as running ng serve.
CMD ["npm", "start"]

docker-compose.yml：

version: '2'

services:

  # Build the container using the client Dockerfile
  client:
      build: .
      ports: 
        - "4200:4200"

  # Build the container using the nginx Dockerfile
  nginx:
    build: ./nginx
    # Map Nginx port 80 to the local machine's port 80
    ports:
      - "85:85"
    # Link the client container so that Nginx will have access to it
    links:
      - client

我有另一个名为 nginx 的文件夹，其中包含 dockerfile：

#  Create a new image from the base nginx image.
FROM nginx
# Overwrite nginx's default configuration file with our own.
COPY default.conf /etc/nginx/conf.d/

和 default.conf：

server {
    location / {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_pass http://client:4200/;
    }
}

docker-compose build并且docker-compose up成功了，我可以在 localhost:4200 访问我的应用程序。但是，实时重新加载不起作用，例如，每当我更改 .ts 文件或 HTML 或 CSS 文件中的某些内容时，它不会立即反映出来。

我怎样才能解决这个问题？

更新：修改 docker-compose

  # Build the container using the client Dockerfile
  client:
      build: .
  # This line maps the contents of the client folder into the container.
      volumes:
        - ./:/usr/src/app    
      ports: 
        - "4200:4200"

给我：

更新 2对于以下 docker-compose

version: '2'

services:

  # Build the container using the client Dockerfile
  client:
        image: node:6
        command: bash -c "cd /app && npm start"
        volumes:
            - D:/Development/personal_projects/library-owner-frontend :/app
        ports: 
            - "4200:4200"

  # Build the container using the nginx Dockerfile
  nginx:
    build: ./nginx
    # Map Nginx port 80 to the local machine's port 80
    ports:
      - "85:85"
    # Link the client container so that Nginx will have access to it
    links:
      - client

我正进入（状态：

Answer 1

好的，我用这个命令运行了它：

docker run -it --rm -p 4200:4200 -v /your/app/path:/app --name myappcontainer node:7 bash -c "cd /app && npm install && npm start"

其中/your/app/path是本地文件系统（Docker 主机）中应用程序的绝对路径。

我使用 Angular 的 CLI 生成的简单应用程序测试了我的解决方案ng new testApp。

这里发生的事情是，容器启动（从 image node:7），并将您的应用程序目录安装/app在容器文件系统（-v /your/app/path:/app部分）的目录下。启动后bash -c "cd /app && npm install && npm start"运行命令。它会转到已安装的目录并触发npm install和npm start命令，从而运行您的应用程序。该-p 4200:4200部分将容器的 4200 tcp 端口映射到 docker 主机的 4200 tcp 端口。您应该通过http://localhost:4200在浏览器中导航到来查看您的应用程序。

翻译成 docker-compose 它看起来像这样：

version: '2'

services:

    client:
        image: node:7
        command: bash -c "cd /app && npm install && npm start"
        volumes:
            - /your/app/path:/app
        ports: 
            - "4200:4200"

作为旁注，我只想提到我使用Docker for Windows运行了这个程序，并在此过程中偶然发现了两个问题：

• 在 Windows 10 主机上的容器中未检测到卷文件更改：似乎在 Windows FS 事件上无法与主机挂载正常工作，因此您应该使用轮询来启用实时重新加载：

  对于那些遇到同样麻烦的人：要使用 angular-cli 实现此目的，"poll": 1000必须将其插入到defaultsangular-cli.json 中的 -object 中。不幸的是，这没有很好的记录。参见角度/角度-cli#1814

• Angular-CLI 和 Node Docker 官方镜像存在问题。：Angular CLI 需要正确绑定到网络接口的帮助（我可以看到您已在 npm 的启动脚本中硬编码了此解决方案）：

  在 angular-cli.json 的默认值下，您可以执行以下操作：

  "serve": {
      "port": 4200,
      "host": "0.0.0.0"
  }
  

编辑

为此在 Github 上添加了一个可立即运行的 POC： https: //github.com/jannis-baratheon/stackoverflow--angular-live-reload-in-docker-container