Docker运行Node.js应用后无法访问localhost:4200求助

我是Docker新手，在Ubuntu 17.04 LTS系统中通过Dockerfile与docker-compose部署Node.js（Angular）应用，容器状态显示UP且运行中，但无法通过localhost:4200访问应用。直接在宿主机执行ng serve或npm serve（对应package.json的script配置）时，localhost:4200能正常访问，想知道问题出在哪里？

相关配置与操作 #

docker-compose.yml内容 #

version: '3'
services:
  my-app:
    build:
      context: .
      dockerfile: Dockerfile
    restart: unless-stopped
    volumes:
      - .:/usr/src/app
    ports:
      - "4200:4200"

docker ps输出 #

CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                    NAMES
e6a99aab4e37        my-app              "ng serve"          10 minutes ago      Up 10 minutes       0.0.0.0:4200->4200/tcp   my-app_1

已尝试的操作 #

• 执行docker inspect --format '{{ .NetworkSettings.IPAddress }}' 'my-app_1'获取容器IP，使用该IP:4200访问无效
• 尝试docker run --rm -it -p 4200:4200 my_app_container启动容器，可见npm start运行并监听4200端口，但浏览器访问localhost:4200时显示“this site can't be reached; ERR_NAME_NOT_RESOLVED”

解决方案与原因分析 #

这个问题我之前踩过坑！核心原因是Angular的ng serve默认只监听容器内部的localhost（127.0.0.1），而容器的localhost和宿主机的localhost是完全独立的网络空间，宿主机的端口映射根本没办法把请求转发到容器内部的127.0.0.1上。

解决起来很简单，只需要让ng serve监听容器的所有网络接口（0.0.0.0）即可，具体有几种方式：

方式1：修改Dockerfile的启动命令 #

在你的Dockerfile里，把启动命令改成下面这样：

CMD ["ng", "serve", "--host", "0.0.0.0"]

方式2：在docker-compose.yml中覆盖command #

如果不想改Dockerfile，也可以直接在docker-compose.yml里指定启动命令：

version: '3'
services:
  my-app:
    build:
      context: .
      dockerfile: Dockerfile
    restart: unless-stopped
    volumes:
      - .:/usr/src/app
    ports:
      - "4200:4200"
    command: ng serve --host 0.0.0.0  # 新增这一行

方式3：修改package.json的scripts（可选） #

如果你的package.json里自定义了serve脚本，也可以把--host 0.0.0.0加进去：

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

这样不管是容器里运行npm run serve还是直接ng serve，都会自动监听所有接口。

最后一步：重新构建并启动容器 #

修改完配置后，执行下面的命令更新容器：

docker-compose down
docker-compose build
docker-compose up -d

这时候再访问localhost:4200，应该就能正常打开你的Angular应用了！

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