Configuration of Angular2 application - nginx and docker

Question

I have a REST back-end service located on some server and front-end application made in angular. I'm using Angular CLI to build application. Location of my back-end server is located in environment file. Requirement for my app is that I'm providing two docker images. One with my back-end server (Java Spring Boot app) and the second one is static html build with ng build myApp command. Then i copy content od dist directory to proper directory on docker image as is shown here Nginx docker image.

Problem is, that back-end and front-end may work on different servers. Is there any way i can configure my front-end app that i can change back-end server location as per start of container?

Not really - by the time the container starts the backend location is already baked into the static HTML and JS generated by `ng build`. We solved this on Cloud Foundry by having the web app served from `https://some.url` and the backend available at `https://some.url/api`, so we could use relative routing, but this may not be an option with Docker containers. — jonrsharpe, Nov 14 '16 at 22:30
How about using config file for front-end service and swap it at the start of docker container? — , Nov 14 '16 at 22:35
And what would that config file *do*? Again you have **static HTML and JS**; if you build via the CLI, it's too late to use e.g. `environment.whatever.ts` to inject information. The Docker for your front end is literally just serving pre-compiled files. — jonrsharpe, Nov 14 '16 at 22:37
Can I use 'assets' folder to store some config.json file and then load it from angular when html is loading? Then only problem would be to use 'sed' od swap it when docker starts. — , Nov 14 '16 at 22:43
What do you mean *"load it from angular"*? You mean from the client side? Because bear in mind that that's where the JS will actually be running, *not* in your container, and not until *after* the HTML is loaded. — jonrsharpe, Nov 14 '16 at 22:44
I thought about loading static file using http.get but I don't think i should expose such a file. Here i found [example answer](http://stackoverflow.com/questions/36749153/how-to-i-load-json-data-into-angular2-component) — , Nov 14 '16 at 22:51

score 7 · Accepted Answer · answered Jan 13 '17 at 14:25

I know this is an old question, but I faced the exact same problem and it took me a while to solve. May this be of help to those coming from search engines.

I found 2 solutions (I ended up choosing the second one). Both allow you to use environment variables in docker to configure your API URL.

Solution 1 ("client"-side): env.js asset + sed

The idea is to have your Angular client load an env.js file from your HTTP server. This env.js will contain the API URL, and will be modifiable by your container when it starts. This is what you discussed in the question comments.

Add an env.js in your angular app assets folder (src/assets for me with angular-cli):

var MY_APP_ENV = {
  apiUrl: 'http://localhost:9400',
}

In your index.html, you will load your env:

<head>
  <meta charset="utf-8">
  <base href="/">
  <script src="env.js"></script>
</head>

In your environment.ts, you can use the variable:

declare var MY_APP_ENV: any;

export const environment = {
  production: false,
  apiUrl: MY_APP_ENV.apiUrl
};

In your NGINX Dockerfile do:

FROM nginx:1.11-alpine

COPY tmp/dist /usr/share/nginx/html
COPY run.sh /run.sh

CMD ["sh", "/run.sh"]

The run.sh script is where the sed magic happens:

#!/bin/sh

# API
/bin/sed -i "s|http://localhost:9400|${MY_API_URL}|" /usr/share/nginx/html/env.js

nginx -g 'daemon off;'

In your angular services, use environment.apiUrl to connect to the API (you need to import environment, see Angular 2 docs).

Solution 2 (purely server side): nginx proxy config + envsubst

I wasn't happy with the previous solution because the API URL needed to be from the host point of view, it couldn't use another container hostname in my docker-compose setup.

So I thought: many people use NGINX as a proxy server, why not proxy /api to my other container this way.

Dockerfile:

FROM nginx:1.11-alpine

COPY tmp/dist /usr/share/nginx/html
COPY frontend.conf.template /etc/nginx/conf.d/frontend.conf.template
COPY run.sh /run.sh

CMD ["/bin/sh", "/run.sh"]

frontend.conf.template:

server {
    listen       80;
    server_name  myserver;

    # API Server
    location /api/ {
        proxy_pass ${MY_API_URL}/;
    }

    # Main
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri$args $uri$args/ /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

run.sh:

#!/bin/sh

# Substitute env vars
envsubst '$MY_API_URL' \
< /etc/nginx/conf.d/frontend.conf.template \
> /etc/nginx/conf.d/default.conf

# Start server
nginx -g 'daemon off;'

envsubt allows you to substitute environment variables in a string with a shell-like syntax.

Then use /api/xyz to connect to the API from the Angular app.

I think the second solution is much cleaner. The API URL can be the API docker container name in a docker-compose setup, which is nice. The client is not involved, it is transparent. However, it depends on NGINX.

Configuration of Angular2 application - nginx and docker

1 Answers1

Solution 1 ("client"-side): env.js asset + sed

Solution 2 (purely server side): nginx proxy config + envsubst