Angular 5 应用程序无法通过网络或 docker 外部访问答案

【问题标题】：Angular 5 application not accessbile over network or outside the dockerAngular 5 应用程序无法通过网络或 docker 外部访问
【发布时间】：2019-02-28 01:46:51
【问题描述】：

我有一个工作的 Angular 5 应用程序，我正在努力使用 docker-compose。

虽然很多人都遇到过类似的问题，但建议的解决方案对我不起作用：

Access Angular app running inside Docker container

Cannot access nodejs app on browser at localhost:4200 (docker run -p 4200:4200 ....)

nodejs app doesn't connect to localhost when running within a docker container

ng serve not working in Docker container

not able to access angular2 app from docker container

这是我的 docker-compose.yml

version: '3'
services:

  webui-ng:
     container_name: bcrm-webui-ng
     build: ./webui-angular   
     ports: 
      - 4200:4200

以下是位于 ./webui-angular 下的 Docker 文件。

FROM node:9.6.1

# Create app directory
WORKDIR /usr/src/app

COPY package*.json ./

# Install app dependencies
RUN npm install

# Bundle app source
COPY . .

# Expose API port to the outside
EXPOSE 4200

# Launch application
#CMD ["npm","run ng serve"]
#CMD ["npm", "run", "ng", "serve", "--host", "0.0.0.0"]
#CMD ["npm", "run", "ng", "serve", "--host", "0.0.0.0", "--port", "4200"]
#ENTRYPOINT ["npm", "run", "ng", "serve", "--open", "--host", "0.0.0.0", "--port", "4200"]
CMD npm run ng serve --host 0.0.0.0

请注意，最后几行注释的所有命令都不起作用。也就是说，当我打开 http://localhost:4200 时，我总是在 Firefox 中收到“连接已重置”错误

这是命令行输出

bcrm-webui-ng | 
bcrm-webui-ng | > Xyz@0.1.0 ng /usr/src/app
bcrm-webui-ng | > ng "serve" "0.0.0.0"
bcrm-webui-ng | 
bcrm-webui-ng | ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
bcrm-webui-ng | Date: 2018-09-24T14:03:38.509Z                                                           
bcrm-webui-ng | Hash: 4ac012def02ed7e0a08a
bcrm-webui-ng | Time: 19848ms
bcrm-webui-ng | chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
bcrm-webui-ng | chunk {main} main.bundle.js, main.bundle.js.map (main) 1.81 MB {vendor} [initial] [rendered]
bcrm-webui-ng | chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 221 kB {inline} [initial] [rendered]
bcrm-webui-ng | chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 28.2 kB {inline} [initial] [rendered]
bcrm-webui-ng | chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.25 MB [initial] [rendered]
bcrm-webui-ng | 
bcrm-webui-ng | webpack: Compiled successfully.

【问题讨论】：

您第一次成功执行 docker compose 时遇到过这个问题吗？还是后续问题？
这是后续问题。我尝试了很多次。

标签： angular docker

【解决方案1】：

您的 docker 没有获得第一次获得的 port 地址。当您每次使用run 而不是start docker 时，就会发生这种情况。它只是将4200 端口与第一个容器联系起来（如果您运行docker ps -a，您将看到它）。

解决办法是

在运行 docker compose 之前删除您之前的容器
每次执行 docker compose 时都会执行 docker 检查
为您的容器设置一个名称，以便您的 docker compose 会警告您不要创建重复的容器。可以在 docker run 命令中使用--name 来完成。

您可以选择其中之一。

【讨论】：

感谢您的回答。我做了 sudo docker rm $(docker ps -a -q) 然后再次运行 sudo docker-compose up --build。现在 sudo docker ps 给出以下输出，表明图像已再次创建，但我仍然面临同样的问题。容器 ID 图像命令创建的状态端口名称 b0a265094568 source_webui-ng "/bin/sh -c 'npm run..." 大约一分钟前 Up 58 seconds 0.0.0.0:4200->4200/tcp bcrm-webui-ng
forums.docker.com/t/docker-running-host-but-not-accessible/… 与您的问题相同，在容器上执行docker inspect（使用id 或name）并查看它当前在哪个IP 上运行。如果你想永久绑定你的 docker 和一个 ip，你需要 pipeworks github.com/jpetazzo/pipework。但是你需要在这样做之前给你的容器命名，因为 pipeworks 命令需要一个名字。

【解决方案2】：

进一步调查，我知道问题不在 docker 端，而是以下命令不起作用

npm run ng serve --host 0.0.0.0 --disable-host-check

但只有通过运行才能很好。

ng serve --host 0.0.0.0 --disable-host-check

【讨论】：