Reusable docker image for AngularJS

Question

We have an AngularJS application. We wrote a dockerfile for it so it's reusable on every system. The dockerfile isn't a best practice and it's maybe some weird build up (build and hosting in same file) for some but it's just created to run our angularjs app locally on each PC of every developer.

Dockerfile:
FROM nginx:1.10

... Steps to install nodejs-legacy + npm

RUN npm install -g gulp
RUN npm install
RUN gulp build  

.. steps to move dist folder

We build our image with docker build -t myapp:latest . Every developer is able to run our app with docker run -d -p 80:80 myapp:latest

But now we're developing other backends. So we have a backend in DEV, a backend in UAT, ... So there are different URLS which we need to use in /config/xx.json

{
  ...
  "service_base": "https://backend.test.xxx/",
  ...
}

We don't want to change that URL every time, rebuild the image and start it. We also don't want to declare some URLS (dev, uat, prod, ..) which can be used there. We want to perform our gulp build process with an environment variable instead of a hardcoded URL.

So we we can start our container like this:

docker run -d -p 80:80 --env URL=https://mybackendurl.com app:latest

Is there someone who has experience with this kind of issues? So we'll need an env variable in our json and building it and add the URL later on if that's possible.

Answer 1

EDIT : Better option is to use build args

Instead of passing URL at docker run command, you can use docker build args. It is better to have build related commands to be executed during docker build than docker run.

In your Dockerfile,

ARG URL 

And then run

docker build --build-arg URL=<my-url> .

See this stackoverflow question for details