在Docker容器内的Nginx上托管的angular应用上，ERR_CONNECTION_REFUSED吗？

Question

我正在使用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

问题

1. 关于如何使它正常工作的任何想法，这样我就可以连接到 http://localhost:4200/approval-edit/1573515？
2. 当前，docker容器仅被赋予一个随机名称。我如何能 指定一个名字？ （例如ng-nexct-approval-ui-container）

Answer 1

您的问题的答案是。 Nginx在8080上公开端口，而Dockerfile具有端口4200以解决问题，将该端口映射到localhost端口。

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

Answer 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。