Docker Angular 容器 - 热重载答案

【问题标题】：Docker angular container - hot reloadDocker Angular 容器 - 热重载
【发布时间】：2019-02-17 05:31:30
【问题描述】：

我有一个构建 Angular 应用程序的 dockerfile：

FROM node:8.11.3-alpine
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install -g nodemon
RUN npm install -g @angular/cli@6.0.8 && npm install
COPY . /usr/src/app
EXPOSE 5004
CMD ng serve --host 0.0.0.0

我想向我的 docker 容器添加热重载，以便代码更改自动反映在我的浏览器中。

Nodemon 似乎是启用热重载的最佳工具，只是我似乎无法使用我的 Dockerfile 正确配置它。

有人可以向我解释在 Docker 中使用 nodemon 的最佳方法，以便我的 Angular 应用程序可以热重载吗？

【问题讨论】：

如果您实际上是在编辑容器中的文件，ng serve 已经进行热重载。
在我的 src/app 文件夹中有一个名为“home”的文件夹，其中包含一个“home.component.html”文件。在容器运行时更改该文件夹的内容，然后刷新页面，在我使用相同的图像/dockerfile 重建容器之前，这些更改不会反映出来
对，因为您正在将文件复制到容器中；它们不是同一个文件。 Nodemon 对此无能为力。
啊，好吧。所以我需要在我的容器中使用一个卷来将实际文件添加到容器中？

标签： angular docker dockerfile nodemon

【解决方案1】：

您的 Dockerfile 将所有项目数据复制到容器中。这些副本不受主机上文件更改的影响。

要更改这一点，您可以将带有项目代码的卷安装到容器中。为此，请使用以下命令运行您的容器：

-v ./src:/usr/src/app/src

它会将您本地的 angular src 文件夹挂载到容器中。无需覆盖已安装的 npm_modules 文件夹。

如果您使用的是 Windows，则 hyper-v 和文件更改存在问题。作为一种解决方法，您可以使用 --poll 标志运行 ng serve 以启用轮询。在我们的文件中是

CMD ng serve --poll 200 --host 0.0.0.0

ng serve 现在将每 200 毫秒主动检查一次文件更改。

【讨论】：