Docker容器不热重载Angular

Question

我正在配置一个 dockerized Angular 应用程序，但是当我修改某些内容时，页面不会像在我的本地设置中那样自动刷新。

基于此：Docker container doesn't reload Angular app

我应该公开端口 49153，但这不起作用。

这是我的配置：

Dockerfile

FROM node:14-slim
RUN npm install @angular/cli@latest -g
RUN mkdir -p /home/boilerplate
WORKDIR /home/boilerplate
EXPOSE 4200 49153
CMD ng serve --port 4200 --poll 1

docker-compose.yaml

version: "3"
services:
  app:
    image: project
    build:
      context: .
      dockerfile: font-app/Dockerfile
    volumes:
      - ./font-app:/home/boilerplate
    ports:
      - 4200:4200  #live reload server is 49153 while normal server is 4200 where changes refresh when browser refreshed
      - 49153:49153

localhost:4200 工作正常，当我进行更改时，刷新它就可以了。 我还像另一个 stackoverflow 帖子一样暴露了端口 49153，但它不起作用。端口 49153 中没有任何内容。

有什么想法吗？

日志：

192-168-0-243:Spring-and-springboot Jeff$ docker-compose up
Starting spring-and-springboot_app_1 ... done
Attaching to spring-and-springboot_app_1
app_1  | Your global Angular CLI version (9.1.6) is greater than your local
app_1  | version (8.3.26). The local Angular CLI version is used.
app_1  | 
app_1  | To disable this warning use "ng config -g cli.warnings.versionMismatch false".
app_1  | WARNING: This is a simple server for use in testing or debugging Angular applications
app_1  | locally. It hasn't been reviewed for security issues.
app_1  | 
app_1  | Binding this server to an open connection can result in compromising your application or
app_1  | computer. Using a different host than the one passed to the "--host" flag might result in
app_1  | websocket connection issues. You might need to use "--disableHostCheck" if that's the
app_1  | case.
app_1  | ℹ ｢wds｣: Project is running at http://0.0.0.0:4200/webpack-dev-server/
app_1  | ℹ ｢wds｣: webpack output is served from /
app_1  | ℹ ｢wds｣: 404s will fallback to //index.html
app_1  | 
app_1  | chunk {main} main.js, main.js.map (main) 51.7 kB [initial] [rendered]
app_1  | chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 270 kB [initial] [rendered]
app_1  | chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
app_1  | chunk {styles} styles.js, styles.js.map (styles) 9.69 kB [initial] [rendered]
app_1  | chunk {vendor} vendor.js, vendor.js.map (vendor) 3.91 MB [initial] [rendered]
app_1  | Date: 2020-05-14T12:24:26.717Z - Hash: d3844cd515038df15e5c - Time: 19389ms
app_1  | ** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
app_1  | ℹ ｢wdm｣: Compiled successfully.
app_1  | ℹ ｢wdm｣: Compiling...
app_1  | ℹ ｢wdm｣: wait until bundle finished: /
app_1  | ℹ ｢wdm｣: wait until bundle finished: /runtime.js
app_1  | ℹ ｢wdm｣: wait until bundle finished: /styles.js
app_1  | ℹ ｢wdm｣: wait until bundle finished: /polyfills.js
app_1  | ℹ ｢wdm｣: wait until bundle finished: /main.js
app_1  | ℹ ｢wdm｣: wait until bundle finished: /vendor.js
app_1  | 
app_1  | Date: 2020-05-14T12:29:46.595Z - Hash: 1d9ec15738fbcb9e6453
app_1  | 4 unchanged chunks
app_1  | chunk {main} main.js, main.js.map (main) 51.7 kB [initial] [rendered]
app_1  | Time: 3435ms
app_1  | ℹ ｢wdm｣: Compiled successfully.

Answer 1

找到了解决办法：

将 docker-compose.yaml 更改为：

version: "3"
services:
  front:
    image: project
    build:
      context: ./font-app      #change is here
      dockerfile: Dockerfile
    volumes:
      - ./font-app:/home/boilerplate
    ports:
      - 4200:4200  

任何人都知道为什么改变这个固定它？