如何在Docker中为Angular应用配置Bind Mount并实现代码实时同步？

你的Dockerfile采用多阶段构建，最终运行的是Nginx容器，它实际提供服务的是/usr/share/nginx/html目录下的预构建静态文件；而你通过Bind Mount挂载本地代码到容器的/app目录，这个目录和Nginx服务的内容完全无关，所以本地代码修改不会同步到网页。

根据场景不同，有两种处理方式：

开发环境（支持热重载，实时同步修改） #

开发阶段推荐直接用Node镜像运行Angular的开发服务器（ng serve），它支持文件监听和热重载，无需提前构建静态文件。

1. 修改Dockerfile为开发版本：

FROM node:14-alpine

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

# 启动开发服务器，允许外部访问并指定端口
CMD ["npm", "run", "start", "--", "--host", "0.0.0.0", "--port", "4200"]

2. 重新构建镜像后，用以下命令启动容器：

docker run -d -p 4200:4200 --rm --name frontend -v E:\dir1\dir2\subdirectory:/app image_name:image_tag

此时本地代码挂载到容器的/app目录，ng serve会自动监听文件变化，修改代码后网页会实时刷新。

挂载预构建静态文件到Nginx（需手动重新构建） #

如果坚持使用Nginx容器，需要将本地构建后的dist目录挂载到Nginx的服务目录，而不是/app：

1. 先在本地执行构建命令：

npm run build --prod

2. 修改容器启动命令，挂载本地dist目录到Nginx的/usr/share/nginx/html：

docker run -d -p 4200:80 --rm --name frontend -v E:\dir1\dir2\subdirectory\dist\angular-frontend:/usr/share/nginx/html image_name:image_tag

注意：这种方式下，每次修改代码后都需要重新执行本地构建，才能将更新后的静态文件同步到容器。

内容的提问来源于stack exchange，提问作者Chinmay Chikode