我在我的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构建图像时,这会消失,但没有。
当我调用触摸一些文件从docker exec
webpack
重新加载所有文件,它的工作没有重新启动容器。
有人有解决办法吗?
8条答案
按热度按时间bzzcjhmw1#
我找到了解决这两个问题的方法:
package.json
in"scripts"
section this line:"start": "ng serve --host 0.0.0.0 --poll"
,仅Windows主机需要,Dockerfile
中添加expose 49153
,在docker-compose.yml
中添加- '49153:49153'
端口,如@kstromeiraos所述。jv2fixgn2#
Webpack使用一个端口来进行应用程序的实时重新加载。默认情况下,该端口为
49153
。您必须公开容器中的端口并将其绑定到主机端口,这应该可以解决您的问题。
所以,把这个加到你的
Dockerfile
上。这是你的
docker-compose.yml
。uxhixvfz3#
我的解决方案是使用node:slim。
无需将数据复制到容器中。使用卷。
Dockerfile:
注:
--poll 1
组成:
agyaoht74#
解决方案可以是chokidar Package 器,它是angular包的依赖项。我不知道,如果这是2017年的情况。您不需要公开任何额外的端口。只需在docker-compose中使用环境变量。
基本配置:
Dockerfile
docker-compose.yml
这应该热重新加载您的浏览器。在Chrome和Angular 8上测试
用于进一步调查的 Package :https://github.com/paulmillr/chokidar
cxfofazt5#
另一种不需要轮询的解决方案。
背景:
我在大型的Angular和React项目中工作,每10秒的轮询(
--poll 10000
)会产生大量的网络流量(在任务管理器中,你可以检查docker nat接口的性能)。反过来,它会产生很高的CPU负载。解决方案:
如果您使用phpStorm/其他Intellij produce或VS代码,则可以添加文件监视器。我写了下面的脚本来帮助我:
之后,我添加了以下文件监视器(注意触发器在外部事件时关闭):
注意:
docker exec
没有参数-it
是很重要的,因为tty或交互式参数需要使用winpty
(位于安装git bash的位置)。此外,这个解决方案不是Angular特定的,它更是docker特定的,对于任何webpack-dev-server应用程序都是一样的。此外,phpStorm会定期显示有关文件差异的
File Cache Conflict
对话框。要禁用此提示,可以关闭文件同步。https://stackoverflow.com/a/6628645gpfsuwkq6#
感谢所有的答案,所以我创建了一个2021年的工作示例(在Windows机器上测试)。
**STEP 1:**使用Angular CLI创建新的Angular项目
**STEP 2:**在package.json中添加新脚本
npx ng ...
,这样你就不必在Dockerfile中全局安装Angular CLI。***STEP 3:**在Angular根项目文件夹中创建Dockerfile
**STEP 4:**在Angular项目文件夹外创建docker-compose.yml(以便稍后添加更多服务)
因此,您可以打开本地源代码,编辑并查看localhost:4200上的更改。
希望这个答案能帮助到一些人。
mzaanser7#
这个Angular Docker Hot-Reload Template工作。它具有所需的所有相关标志:
--disable-host-check
--poll 2000
仅针对已确认的主机环境,HOST=0.0.0.0
通过。7kqas0il8#
更新
正如他们所说的here如果你使用的是Windows环境,你应该在Docker开发容器中使用Angular,你的项目文件应该在Linux文件系统(WSL 2)中才能工作,所以你不需要
--poll
标志,对我来说很有用。原件
你好,我在这个问题上挣扎了几个小时。它只看了
package.json
文件(我不知道为什么),仅此而已。我尝试了所有的方法,然后我发现了这个问题和this one,结论是--poll 1
标志是解决方案。它适用于Angular 16和Node 18。