Question

我在ng serve运行的docker容器中遇到docker-compose的问题。

Dockerfile

FROM node:7.1

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app
RUN npm install
RUN npm install -g angular-cli
COPY . /usr/src/app

EXPOSE 4200

CMD [ "npm", "start" ]'

我的docker-compose.yml

web:
    build: .
    ports:
        - '8089:4200'
    volumes:
        - .:/usr/src/app/
    environment:
        - NODE_ENV=dev
    command: bash -c "npm start"

当我运行它时，一切都很好但编辑文件不会重新加载应用程序。文件已更改，我确定因为我通过ssh连接检查它并且编辑了容器中的文件。当容器重新启动时，每次更改都会应用。我想当我只用码头工人用建筑图像切换来构图时，这会消失，但不会。

当我调用来自docker exec webpack的某个文件时，会重新加载所有文件并且无需重新启动容器即可正常工作。

有人有解决方案吗？

Answer 1

我找到了解决这两个问题的方法：

inotify - ＆gt;只需在此package.json部分中修改"scripts"这一行："start": "ng serve --host 0.0.0.0 --poll"，仅适用于Windows主机，
热重装 - ＆gt;在expose 49153中添加Dockerfile，在- '49153:49153'中添加docker-compose.yml端口，例如@kstromeiraos提及的内容。

Answer 2

Webpack使用端口来重新加载应用程序。该端口默认为49153。

您必须将容器中的端口公开并绑定到主机端口，这样才能解决您的问题。

因此，请将其添加到Dockerfile。

FROM node:7.1

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app
RUN npm install
RUN npm install -g angular-cli
COPY . /usr/src/app

EXPOSE 4200 49153

CMD [ "npm", "start" ]'

这是你的docker-compose.yml。

web:
    build: .
    ports:
        - '8089:4200'
        - '49153:49153'
    volumes:
        - .:/usr/src/app/
    environment:
        - NODE_ENV=dev
    command: bash -c "npm start"

Answer 3

我使用node：slim的解决方案。

无需将数据复制到容器中。只需使用音量即可。

Dockerfile：

注意：--poll 1

FROM node:slim

RUN npm install @angular/cli@latest -g

RUN mkdir -p /home/boilerplate

WORKDIR /home/boilerplate

EXPOSE 4200

CMD ng serve --port 4200 --host 0.0.0.0 --poll 1

撰写：

  project:
    image: project
    build:
      context: .
      dockerfile: projectdir/Dockerfile
    volumes:
    - ./projectdir:/home/boilerplate
    ports:
    - 4200:4200

Answer 4

另一种无需轮询的解决方案。

背景：

我从事大型Angular和React项目，即使每10秒轮询一次（--poll 10000）也会产生大量网络流量（在任务管理器中，您可以检查docker nat接口的性能）。反过来会产生很高的CPU负载。

解决方案：

如果使用phpStorm /其他Intellij产生的代码或VS代码，则可以添加文件监视程序。我写了以下脚本来帮助我解决这个问题：

#!/bin/bash

image="${*:1:1}"
file="${*:2}"
machine=$(docker ps --filter ancestor="$image" --format "{{.ID}}")

if [ -n "$machine" ]
  then
    docker exec "$machine" touch "$file"
fi

此后，我添加了以下File Watcher（请注意，在发生外部事件时，触发器已关闭）：

注释： 重要的是您的docker exec没有参数-it，因为tty或交互式参数要求使用winpty（位于git bash的安装位置）。另外，此解决方案不是特定于Angular的，而是特定于docker的，对于任何webpack-dev-server应用程序都适用。

此外，phpStorm定期显示有关文件差异的File Cache Conflict对话框。要禁用此提示，可以关闭文件同步。 https://stackoverflow.com/a/6628645

Answer 5

解决方案可以是chokidar包装器，它是angular包装的依赖项。我不知道这是否是2017年的情况。您不需要公开任何额外的端口。只需在docker-compose中使用环境变量即可。

基本配置：

Dockerfile

CMD ng serve --host 0.0.0.0

docker-compose.yml

environment:
  - CHOKIDAR_USEPOLLING=true

这应该会重新加载您的浏览器。在Chrome和Angular 8上进行了测试

待进一步调查的软件包：https://github.com/paulmillr/chokidar

Answer 6

我的解决方案只是正确使用卷。

client.dockerfile（我的 Angular Dockerfile）

FROM node:10

WORKDIR /ng-app

COPY package*.json /ng-app/

COPY . /ng-app/

RUN npm install

EXPOSE 4201

CMD ["npm", "start"]

docker-compose.yml

  angular-server:
    build:
      context: ./address-book-client
      dockerfile: client.dockerfile
    ports:
      - "4201:4201"
    volumes:
      - ./address-book-client:/ng-app
      - /ng-app/node_modules
    working_dir: /ng-app
    networks:
      - nodeapp-network
    links:
      - node-server

Answer 7

感谢所有答案，所以我创建了一个 2021 年的工作示例（在 Windows 机器上测试）。

第 1 步： 使用 Angular CLI 创建新的 Angular 项目

第 2 步： 在 package.json 中添加新脚本

"start:dev": "npx ng serve --host 0.0.0.0 --poll"

使用 npx ng ... 这样您就不必在 Dockerfile 中全局安装 Angular CLI。

第 3 步： 在 Angular 根项目文件夹中创建 Dockerfile

FROM node:12-alpine
WORKDIR /usr/src/app

COPY package.json ./

RUN npm install --silent

第 4 步： 在 Angular 项目文件夹外创建 docker-compose.yml（以便稍后添加更多服务）

version: '3'
services:
  angular:
    build:
      context: ./angular
      dockerfile: Dockerfile
    command: npm run start:dev
    volumes:
      - ./angular:/usr/src/app
      - /usr/src/app/node_modules
    ports:
      - 4200:4200

因此您可以打开本地源代码，编辑并查看 localhost:4200 上的更改。

希望这个答案能帮助到一些人。

Docker容器不会重新加载Angular应用程序

7 个答案: