将来自docker-compose的env变量注入Angular4 app

Question

我构建了一个简单的Angular4应用程序，它从REST-API获取数据。

我使用docker-compose部署应用程序，但之前我需要在服务模块中手动设置API /主机名。 在开发期间，我只使用了“localhost”，它完成了这项工作。

在API中，我能够通过docker-compose（ environment 部分）注入正确的主机名，因为它在服务器上运行，但这对于角度来说是不可能的。

是否有任何最佳做法/指南可将主机名/网址注入docker-compose的angular-cli应用程序？

Answer 1

实现此目的的一种方法是将所有配置提取到负责服务配置的单独角度服务中。在这个新服务中，将这些值硬编码到env占位符。例如：

apiUrl = $API_URL

现在更改DockerFile中的CMD以运行脚本startup.sh。

创建此脚本并使用ADD startup.sh startup.sh将其添加到Docker镜像中。

在startup.sh内部，您可以调用envsubst < "path-to-service-file" > "path-to-service-file"以使用env变量值替换占位符。在envsubst命令启动角度应用程序之后

Answer 2

感谢 yamenK 为您提供bash脚本解决方案和 Tarun 以获得类似的解决方案。

我找到了另一种方法来避免在角度应用程序中需要有关Api Url的信息。 我在我的docker-compose中添加了一个nginx web服务器，并将其链接到我的api和app。

nginx:
build: ./nginx
...
links:
  - app
  - api

在nginx default.conf中，我使用多个位置来路由请求。

location /api {
proxy_pass http://api:6000/api;
....
}
location / {
proxy_pass http://angular:4200/;
...
}

然后在角度应用中我使用相对网址。