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

我打算通过Docker运行Angular应用程序进行开发。我希望每次在主机中进行更改时，应用程序都能实时重新加载到Docker容器中，就像在主机上运行“ng serve”一样

我已设法在Docker容器中运行Angular应用程序，但无法从主机访问该应用程序。我可以从其他容器访问其他应用程序，没有任何问题。这是我第一次在Docker中使用Angular，但由于某些原因，事情并没有按预期进行

以下是我的设置：

.env:

PROJECT_NAME=angular_proj
CMS_IMAGE=node:8.16.0-alpine

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'

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

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

Dockerfile:

PROJECT_NAME=angular_proj
CMS_IMAGE=node:8.16.0-alpine

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'

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

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

docker compose.yml:

PROJECT_NAME=angular_proj
CMS_IMAGE=node:8.16.0-alpine

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'

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

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

启动容器时，所有内容均按预期运行：

**Angular Live Development Server正在0.0.0.0:4200上侦听，请在上打开浏览器**

但是当我试图从主机上打开应用程序时，我遇到了错误，连接被拒绝。我搜索了类似的线程，并尝试了它们的大多数解决方案，但没有任何成功。 我做错了什么

---

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

使用我的初始设置，即使没有安装Angular CLI，但应用程序已经构建并提供服务。但是Angular服务器导致容器创建/启动暂停，这就是我无法访问它的原因

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

Dockerfile:

PROJECT_NAME=angular_proj
CMS_IMAGE=node:8.16.0-alpine

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'

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

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

---

虽然不是这方面的专家，但请检查这些，并尝试在docker文件中添加

expose 49153

，在

docker compose.yml中添加
ports-'49153:49153'
，可能会有所帮助！如果你在容器内尝试同样的方法，它会起作用吗？嗨，伙计们，谢谢你们的建议。经过几个小时的锤头，我终于找到了它不起作用的原因。你知道我们为什么要这样做吗？npm运行
ng serve
与在容器中的命令行上运行它有什么区别？Hi@ELI7VH我在两个不同的环境中使用相同的项目文件夹（MacOS和Windows）。为了使两个env上的一切都正常工作，我使用了Docker。此外，我想保持我的电脑清洁的所有不同的软件，图书馆的，npm软件包等，需要我的所有项目。所以，不是所有的东西都安装在主机上，而是全部放在容器中。不，我明白了。我还把所有东西都放在容器里。但是您的命令执行
ng serve
（在您的容器内）而不是
npm run start
（在您的容器内）有什么区别？我没有使用“npm run start”，因为它在package.json文件中定义为“ng serve--disable host check--aot”。因为这是一个由多个开发人员使用的项目（每个人都有不同的开发环境），所以我不想更改默认设置。因此，我没有使用“npm run start”，而是使用我的自定义ng serve命令。我知道这可能并不理想，但它解决了我的问题。例如，在其他项目中，所有开发人员都使用Docker，我们都共享相同的项目设置。明白了。谢谢你的澄清。我只是想知道
npm run start
中是否有什么东西可能破坏了它。你的意思是说你的一些团队成员没有拥抱docker吗？真奇怪：P