Inject env Variablen von Docker-komponieren in Angular4 App

Question

Ich baue eine einfache Angular4 App, die ihre Daten von einer REST-API erhalten.

Ich stelle die Anwendung mit docker-compose bereit, aber bevor ich den URL/Hostname manuell in meinem Servicemodul auf die API setzen muss. Während des Devs habe ich einfach 'localhost' benutzt und es macht den Job.

In der API kann ich den korrekten Hostnamen über Docker-Compose (Abschnitt Umgebung) injizieren, da es auf dem Server ausgeführt wird, aber dies ist nicht für eckig möglich.

Gibt es Best Practices/Anleitungen zum Einbringen des Hostnamens/URL in eine angular-cli App von docker-compose?

Answer 1

Eine Möglichkeit, dies zu erreichen, besteht darin, die gesamte Konfiguration in einen separaten winkelförmigen Dienst zu extrahieren, der für die Bereitstellung der Konfiguration zuständig ist. Innerhalb dieses neuen Service hardcode diese Werte zu env Platzhaltern. Zum Beispiel:

apiUrl = $API_URL 

nun die CMD in Ihrem DockerFile ändern, um ein Skript startup.sh auszuführen.

Erstellen Sie dieses Skript und fügen Sie es mithilfe von ADD startup.sh startup.sh in das Docker Image ein.

Innerhalb von startup.sh können Sie envsubst < "path-to-service-file" > "path-to-service-file" anfordern, um den Platzhalter durch den Variablenwert env zu ersetzen. Nach envsubst Befehl starten Sie Ihre Winkel Anwendung

Answer 2

Danke yamenK für Sie Lösung mit dem Bash-Skript und Tarun für eine ähnliche Lösung.

Ich fand einen anderen Weg, um die Notwendigkeit der Informationen über die API Url in der eckigen App zu vermeiden. Ich habe einen Nginx-Webserver zu meinem Docker-Compose hinzugefügt und verlinke ihn mit meiner API und der App.

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

Im nginx default.conf verwende ich mehrere Standorte zu routen die Anfragen.

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

Dann in der eckigen App verwende ich relative URLs.