Docker容器中运行的Angular应用无法在主机访问的问题排查

问题核心 #

Angular的ng serve默认仅监听容器内部的localhost（127.0.0.1），即便Docker配置了端口映射，主机也无法跨容器网络访问该服务，最终触发ERR_CONNECTION_RESET错误。

解决方案 #

方法1：修改项目启动脚本 #

在项目根目录的package.json中，更新start命令，让服务绑定容器的所有网络接口：

"scripts": {
  "start": "ng serve --host 0.0.0.0"
}

方法2：直接修改Dockerfile #

无需改动项目文件，在Dockerfile的启动命令中追加参数：

FROM node:21.6.1-alpine3.19
WORKDIR /app
COPY package*.json ./
RUN npm i --legacy-peer-deps
COPY . .
EXPOSE 4200
CMD ["npm", "run", "start", "--", "--host", "0.0.0.0"]

重新构建并启动容器 #

执行以下命令更新镜像并运行容器：

docker build -t testapp .
docker run -d -p 4200:4200 testapp

验证 #

修改完成后查看容器日志，会看到服务同时监听localhost和0.0.0.0：

➜  Local:   http://localhost:4200/
  ➜  Network: http://0.0.0.0:4200/

此时主机访问http://localhost:4200/即可正常打开应用。

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