如何使 Angular 应用程序在 localhost 和 host.docker.internal 上均可访问？

Question

浏览器中运行的 Angular 应用程序会发出后端 API 请求。这些请求的 URL 是通过连接相应 environment-*.ts 文件中指定的

协议 + 域 + 端口

和 path 来确定的。

可以使用代理“覆盖”协议+域+端口部分。但是，只有当我们

ng serve

应用程序时才能完成此操作。一旦我们

ng build

，这些就被硬连线到

./dist

工件中。

现在考虑

staging

配置。理想情况下，协议 + 域 + 端口为

http://localhost:4200

。这样任何人都可以在本地运行整个网络应用程序。如果前端、后端和数据库服务都在一个

docker-compose.yml

文件中指定，则可以使用单个命令启动和停止整个事物（swarm？）。无需玩系统文件，如

/etc/hosts

。

进入端到端测试。这些测试需要自己的 JVM、无头浏览器和其他依赖项。所以它们也以 Docker 镜像的形式出现。然而，从他们的角度来看，

localhost

与我们的

localhost

不同。他们所看到的只是其容器的环回地址。有两种方法允许这些 e2e 测试在正确的位置访问应用程序

localhost

：

使用

--add-host host.docker.internal:host-gateway

启动 e2e 测试容器 — 这使得可以在

localhost

下访问好的

host.docker.internal

。

不幸的是 1. 不适用于 Mac 版 docker，因此使用 MacBook 的开发人员无法运行 e2e 测试。我们限制为 2.，这意味着每个后端 API 请求都需要转到

host.docker.internal

而不是

localhost

，这意味着另一个

environment-*.ts

和另一个前端构建。

有没有办法在

localhost

和本地运行的 docker 容器中访问 Angular 应用程序的单个构建？

我尝试在计算机上编辑

/etc/hosts

，看看是否可以将

localhost

映射到我想要的任何 IP 地址。这样，我会将 e2e 测试的 docker 映像的

/etc/hosts

中的 localhost 映射到

host.docker.internal

的 IP 地址。然而，这似乎不起作用。我可以将虚假域名映射到谷歌的 IP 地址并且它可以工作，但是如果我映射

localhost

，则不会发生任何事情。

Answer 1

角度配置

导出常量环境= { 生产：假的，端点：'http://服务器名称:8887', apiURL: '/' };

有没有办法在
`localhost`
和本地运行的 docker 容器中访问 Angular 应用程序的单个构建？