Docker化的Angular CLI应用程序热重载失败。

6

我已经使用以下设置将我的现有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 builddocker-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"

给我:

enter image description here

更新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

我看到的是:

enter image description here


这是一个包含图片链接的HTML代码。

顺便说一句,我认为在nginx服务声明中不需要link: client部分。如果你根本没有使用这个nginx服务(你描述的用例并不需要),那么就更不需要了。 - jannis
@jannis 是的,实时重新加载在本地工作时不需要使用docker。我以前从未真正使用过nginx。我只是按照这个教程(https://dpopescu.me/2017/03/13/running-angular-applications-inside-a-docker-container-part-1/)操作。 - Thinker
另一个问题是:你在哪里更改文件?你登录到容器中并在那里进行更改吗?因为只有在这种情况下它才有可能工作(考虑到这个 Dockerfile)。 - jannis
我不确定我是否正确理解了。只是为了解释一下我的工作流程:我有一个现有的项目,我添加了上面的Dockerfile,运行了docker-compose build(成功了),然后运行了docker-compose up并在浏览器中访问了应用程序。我在我的工作空间中所做的更改。 - Thinker
我已经更新了我的问题,并附上了控制台的截图,如果有帮助的话。 - Thinker
显示剩余3条评论
2个回答

4

好的,我用这个命令运行成功了:

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生成的简单应用程序测试了我的解决方案。

这里发生的情况是启动一个容器(从镜像node:7),并在容器的文件系统下将您的应用程序目录挂载在/app目录下(即-v /your/app/path:/app部分)。启动时运行bash -c "cd /app && npm install && npm start"命令。它进入挂载的目录并启动npm installnpm 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: it seems that on Windows FS events don't work properly with host mounts, so you should rather use polling to enable live-reload:

    For those who are getting into the same troubles: To achieve this with angular-cli, "poll": 1000 has to be inserted into the defaults-object in angular-cli.json. Unfortunately, this is not well documented. see angular/angular-cli#1814

  • Issues with angular-cli and node docker official image.: Angular CLI needs help binding to the network interface correctly (I can see you've got this solution hardcoded in the npm's start script):

    Under defaults in your angular-cli.json you can do the following:

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

编辑

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


对于 volumes: - D:/Development/Personal projects/library-owner-frontend :/app,我收到了 npm ERR! enoent ENOENT: no such file or directorynginx: [emerg] host not found in upstream "client" in /etc/nginx/conf.d/default.conf:7 的错误信息。 - Thinker
尝试使用斜杠而不是反斜杠。此外,我不确定Docker如何处理挂载目录名称中的空格。首先尝试通过将“个人项目”重命名为“personal_projects”来删除空格。路径将变为d:/Development/personal_projects/library-owner-frontend - jannis
我尝试更改文件夹名称和使用不同的斜杠,但结果相同。我猜测我正在使用Docker for Windows,并且在Linux容器上,因为右键单击Docker图标时看到“切换到Windows容器”。我已经共享了我的D驱动器。 - Thinker
在卷声明中为什么要在 :/app 前面加一个空格? - jannis
我测试了你的docker-compose文件,并成功复现了你的错误。我确定问题出在提到的空格上。我本以为它应该会抛出一个docker-compose语法错误,但实际上它没有 - 它只是没有挂载卷。所以在volumes部分将- D:/Development/personal_projects/library-owner-frontend :/app改为- D:/Development/personal_projects/library-owner-frontend:/app,然后一切都好了。 - jannis
显示剩余9条评论

0

我在Docker Desktop for Windows中遇到了同样的问题。虽然已经过了一段时间,但如果有人像我一样寻找答案,您应该执行以下步骤。

package.jsonscripts部分中将start命令修改为"start": "ng serve --host 0.0.0.0 --poll 500"。(这里的数字500表示客户端每500毫秒检查一次是否进行了更改,您可以减少此数字。请参考this

确保在Dockerfile中公开端口49153(使用正确的节点版本)。

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"

在运行docker-compose up之后,将会构建一个镜像并启动一个新的容器,该容器将自动重新加载新的更改。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接