angular - 监听更改并在代码更改时重新加载容器 - docker-compose

标签 angular visual-studio docker docker-compose hot-reload

我在 Visual Studio 2019 中将 docker-compose 与 docker 一起用于运行 linux 容器的 Windows。我想为 Angular 客户端应用启用热重载。

我修改了运行应用程序的 npm 命令以包含如下轮询:

"docker-start": "ng serve --host 0.0.0.0 --port 4200 --proxy-config proxy-conf.json --poll 1"

并像这样在 docker-compose 中添加了一个卷:

volumes:
  - ./ClientApp:/app/

还额外暴露了 webpack 端口

ports:
  - 4200:4200
  - 49153:49153

docker-compose 文件位于 repo 的根目录,而 Angular 应用程序位于/ClientApp 文件夹中。这使得每次导航到 localhost:4200 时应用程序都无法 GET\。如果我注释掉卷映射,应用程序开始工作,但重新加载没有。我希望它能够在每次更改任何前端代码时监听代码中的更改并根据需要更新容器。

整个 dockerfile:

FROM node:9.6.1

RUN mkdir -p /app
WORKDIR /app
EXPOSE 4200
EXPOSE 49153

ENV PATH /app/node_modules/.bin:$PATH

COPY . /app

RUN npm install --silent
RUN npm rebuild node-sass

CMD ["npm", "run", "docker-start"]

最佳答案

当代码更改时,使用 nodemon 自动重启节点服务器。在此之前在您的 docker 镜像中安装 nodemon 并确保它存在。

请引用此 URL 安装 nodemon:https://www.npmjs.com/package/nodemon

然后在 Dockerfile 中更改你的 CMD

CMD ["nodemon", "--exec", "npm", "run", "docker-start"]

这是在代码更改时重新加载您的 nodejs 应用程序

关于angular - 监听更改并在代码更改时重新加载容器 - docker-compose,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55784400/

相关文章:

c++ - 如何在基于 MFC 对话框的应用程序中为复选框捕获 MouseMove 事件?

c# - 如何将智能标记添加到我的 .NET 组件?

c# - 从 Resharper 撤消 "Folder ' <folderName >' do not introduce namespace"

docker - 如何将docker容器ip暴露给外网?

postgresql - 在 Dockerfile 中创建的数据库不会出现在正在运行的容器中

angular - 无法从组件中的资源加载 CSS

node.js - Angular 通用类型错误: Cannot read property 'assign' of undefined

javascript - 更改事件未被识别

angular - 如何在 Angular 7 中使用 jsPDF?获取jspdf__WEBPACK_IMPORTED_MODULE_2__.jsPDF is not a constructor错误

从多进程 docker 容器记录