修改

Question

我已经使用以下设置对我现有的角度cli应用程序进行了停靠：

根级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"]

搬运工-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主机）中应用程序的 ABSOLUTE 路径。

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

这里发生的是一个容器启动（来自映像node:7），它将你的app目录安装在容器的文件系统/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运行此操作并偶然发现了两个陷阱：

Volume file changes are not detected in container on Windows 10 host：似乎在Windows FS事件中无法正常使用主机挂载，因此您应该使用轮询来启用实时重新加载：

对于那些遇到同样问题的人：要使用angular-cli实现此目的，必须将"poll": 1000插入angular-cli.json中的defaults - 对象中。不幸的是，这没有很好的记录。见angular/angular-cli#1814
Issues with angular-cli and node docker official image.：Angular CLI需要帮助正确绑定到网络接口（我可以看到你已经在npm的启动脚本中硬编码了这个解决方案）：
在angular-cli.json的默认值下，您可以执行以下操作：
```
"serve": {
    "port": 4200,
    "host": "0.0.0.0"
}
```

修改

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

Answer 2

我在Windows的Docker桌面上遇到了同样的问题。我知道已经有一段时间了，但是任何人都来这里寻找像我这样的答案，您应该执行以下步骤。

在start的{{1}}部分将"start": "ng serve --host 0.0.0.0 --poll 500"修改为scripts。（这里的数字package.json表示客户端将每500毫秒检查一次是否已进行更改，您可以减少此数字。请参考this）

确保端口500在49153中暴露（使用正确的节点版本）

Dockerfile

映射FROM node:10.16.3-alpine WORKDIR /app COPY package.json . RUN npm install COPY . . EXPOSE 4200 49153 CMD npm run start中的端口和卷

docker-compose.yml

此后，运行version: "3.7" services: webapp: build: . ports: - "4200:4200" - "49153:49153" volumes: - "/app/node_modules" - ".:/app"将生成一个映像并启动一个新容器，该容器将自动重新加载新更改。

Dockerized角度cli应用程序热重新加载失败

2 个答案:

修改