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'

docker-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

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

1 个答案: