ERR_CONNECTION_REFUSED 在 Docker 容器内的 nginx 上托管的 Angular 应用程序上？答案

【问题标题】：ERR_CONNECTION_REFUSED on angular app hosted on nginx inside a docker container?ERR_CONNECTION_REFUSED 在 Docker 容器内的 nginx 上托管的 Angular 应用程序上？
【发布时间】：2020-07-22 02:05:57
【问题描述】：

我正在使用 Angular 9 并且有一个按预期运行的应用程序。

例如

ng serve

然后我可以访问它：

http://localhost:4200/approval-edit/1573515

现在我想对它进行 Dockerise 化。我正在关注本教程：https://www.youtube.com/watch?v=J9uKG22lBwA

我做了以下事情：

ng build --prod

dist 目录已创建。

Dockerfile

FROM nginx:1.17.1-alpine
COPY /dist/nexct-approval-ui /user/share/nginx/html
EXPOSE 4200

然后我运行：

docker build -t ng-nexct-approval-ui .

看起来它构建正确。

docker run -p 4200:4200 ng-nexct-approval-ui

当我尝试访问 http://localhost:4200/approval-edit/1573515 时，我得到：

ERR_CONNECTION_REFUSED

问题

任何想法如何让这个工作，所以我可以连接到 http://localhost:4200/approval-edit/1573515?
目前 docker 容器只是随机命名。我如何能指定名称？（例如ng-nexct-approval-ui-container）

【问题讨论】：

这能回答你的问题吗？ Connection refused on docker container
您是使用 docker for desktop 还是 Docker Tollbox？
你有什么样的Docker；更具体地说，是 Windows 上的 Docker Toolbox 吗？
我把它改成docker run -p 4200:4200 --name ng-nexct-approval-ui-container ng-nexct-approval-ui-image，现在我得到ERR_EMPTY_RESPONSE。
docker 正在运行 nginx，它不在 4200 端口上

标签： angular docker nginx

【解决方案1】：

你的问题的答案是。 Nginx 在 8080 上暴露端口，Dockerfile 有 4200 端口来解决映射端口到 localhost 端口的问题。

docker run -p 4200:8080 --name ng-nexct-approval-ui-container ng-nexct-approval-ui

【讨论】：

不幸的是，敌人不起作用。 http://localhost:8080/ 返回 ERR_EMPTY_RESPONSE 和 http://localhost:4200/ 返回 ERR_CONNECTION_REFUSED。
我目前正在查看以下内容，这是通过导入 node.js 的不同方法。 youtube.com/watch?v=etA5xiX5TCA
@Richard 立即尝试。我已经更新了我的答案。问题是 nginx 没有在 4200 上公开，而是在 8080 上公开，最初我认为这是您的应用程序端口，所以您应该使用 8080 更新 dockerfile 或运行 docker run 命令，因为我已经更新了
谢谢。我现在可以访问 nginx

【解决方案2】：

第一个问题：

当您在开发服务器中运行 Angular 应用程序时，它托管在端口 4200 上。现在你正在使用一个 nginx 容器，它不在端口 4200 上运行，而是在端口 80 上运行。

您应该尝试使用docker run -p 4200:80 ng-nexct-approval-ui 来运行容器。

您还可以将 Dockerfile 的 EXPOSE 部分更新为端口 80。但是，它不会改变功能，因为它只是用作文档。

EXPOSE 指令实际上并不发布端口。它充当构建映像的人和运行容器的人之间的一种文档类型，关于打算发布哪些端口。要在运行容器时实际发布端口，请使用 docker run 上的 -p 标志来发布和映射一个或多个端口，或者使用 -P 标志来发布所有暴露的端口并将它们映射到高阶端口。

Source

第二个问题：

您可以使用 --name 选项为您的 docker 容器指定一个名称，因此在本例中为 docker run --name <your name here> ng-nexct-approval-ui。

【讨论】：