Angular和Docker：无法从主机访问应用程序

Question

我想通过Docker运行Angular应用程序进行开发。我希望每次在主机上进行更改时，应用程序都可以在Docker容器中重新加载 - 就像我在主机上运行'ng serve'一样。

我已经设法在Docker容器中运行Angular应用程序，但我无法从主机访问该应用程序。我可以毫无问题地从其他容器访问其他应用程序。这是我第一次使用Angular和Docker，出于某种原因，事情并没有像预期的那样。

这是我的设置：

.ENV：

PROJECT_NAME=angular_proj
CMS_IMAGE=node:8.16.0-alpine

Dockerfile：

ARG CMS_IMAGE

FROM ${CMS_IMAGE} AS node

ARG PROJECT_NAME

RUN mkdir -p /srv/www/${PROJECT_NAME}/cms

WORKDIR /srv/www/${PROJECT_NAME}/cms

COPY /cms/package*.json ./

RUN npm install

COPY /cms ./

EXPOSE 4200/tcp

RUN npm start #executes 'ng serve --host 0.0.0.0'

码头工人，compose.yml：

version: '3.7'

services:

  cms:
    container_name: ${PROJECT_NAME}_cms
    build:
      context: .
      dockerfile: .docker/cms/Dockerfile
      args:
        CMS_IMAGE: ${CMS_IMAGE}
        PROJECT_NAME: ${PROJECT_NAME}
    ports:
      - 4200:4200
    volumes:
      - ./cms:/srv/www/${PROJECT_NAME}/cms

当我启动容器时，一切都按预期运行：

** Angular Live Development Server正在监听0.0.0.0:4200，在http://localhost:4200/上打开浏览器**

但是当我尝试从主机打开应用程序时，我得到了ERR_CONNECTION_REFUSED。我搜索了类似的线程并尝试了大部分解决方案，但没有任何成功。我究竟做错了什么？

我正在使用Docker 2.0.0.3（31259）运行MacOS Mojave。

Answer 1

使用我的初始设置，即使没有安装Angular CLI，也会构建并提供应用程序。但Angular服务器导致容器创建/开始停止，这就是为什么我无法访问它。

为了让一切按预期工作，我在容器中安装了Angular CLI并使用它来运行应用程序：

Dockerfile：

ARG CMS_IMAGE

FROM ${CMS_IMAGE} AS node

ARG PROJECT_NAME

RUN mkdir -p /srv/www/${PROJECT_NAME}/cms

WORKDIR /srv/www/${PROJECT_NAME}/cms

COPY /cms/package*.json ./

RUN npm install

RUN npm install -g @angular/cli #added

COPY /cms ./

EXPOSE 4200/tcp

#RUN npm start #executes 'ng serve --host 0.0.0.0' #removed!
CMD ng serve --host 0.0.0.0 #added