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

Question

I build a simple Angular4 app which get its data from a REST-API.

I deploy the app with docker-compose but before I need to set the URL/Hostname to the API manually in my service module. During the dev I simply used 'localhost' and it does the job.

In the API I'am able inject the correct hostname via docker-compose (section environment ) since it runs on the server but this is not possible for angular.

Are there any best practices / guides for injecting the hostname / URL into a angular-cli app from docker-compose?

Answer 1

One way to achieve this is to extract all configuration into a separate angular service that is responsible of serving configuration. Inside this new service hardcode these values to env placeholders. For example:

apiUrl = $API_URL

Now change the CMD inside your DockerFile to run a script startup.sh .

Create this script and add it into the Docker Image using ADD startup.sh startup.sh .

Inside startup.sh you can envoke envsubst < "path-to-service-file" > "path-to-service-file" to substitute the placeholder with the env variable value. After envsubst command start your angular application

Answer 2

Thank you yamenK for you solution with the bash script and Tarun for a similar solution.

I found another way to avoid the need of the information about the Api Url in the angular app. I added an nginx web server to my docker-compose and link it to my api and the app.

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

In the nginx default.conf I use multiple locations to route the requests.

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

Then in the angular app I use relative urls.