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.

Community · Accepted Answer · 2017-05-23 11:53:05Z

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

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Jul 18, 2016 at 12:54

atv

2,0204 gold badges23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

lvthillo Over a year ago

Then I probably also need to perform the gulp build in that .sh + all the steps after it

atv Over a year ago

I don't think that's the good idea. entrypoint.sh will execute during docker run command and not docker build. You may need a different solution if you want to run gulp as part of docker build.

lvthillo Over a year ago

It's fine that it's running during the docker run command in this case. Otherwise I won't be able to give an ENV VAR to my container (and to perform a gulp build on it)

atv Over a year ago

@lorenzvth7 See my edit. You can use docker build args. it is a cleaner way

lvthillo Over a year ago

I agree it's a cleaner way but herefor we still have to build an image for each environment (okay in an easy way but still the issue). So we will probably choose the way of using the entrypoint and performing the gulp build at container startup. It isn't a proper way but it's the only way to let developers start the container with docker run -env ULR=xxx (this var in entrypoint.sh and performing gulp build + copy and start)

|

lvthillo · Accepted Answer · 2016-08-02 13:33:58Z

This was my 'solution'. I know it isn't the best docker approach but just for our developers it was a big help.

My dockerfile looks like this:

FROM nginx:1.10

RUN apt-get update && \
 apt-get install -y curl

RUN sed -i "s/httpredir.debian.org/`curl -s -D - http://httpredir.debian.org/demo/debian/ | awk '/^Link:/ { print $2 }' | sed -e 's@<http://\(.*\)/debian/>;@\1@g'`/" /etc/apt/sources.list

RUN \
  apt-get clean && \
  apt-get update && \
  apt-get install -y nodejs-legacy && \
  apt-get install -y npm

WORKDIR /home/app
COPY . /home/app

RUN npm install -g gulp
RUN npm install

COPY start.sh /
CMD ["./start.sh"]

So after the whole include of the app + npm installation inside my nginx I start my container with the start.sh script.

The content of start.sh:

#!/bin/bash
sed -i 's@my-url@'"$DATA_ACCESS_URL"'@' configs/config.json
gulp build
rm -r /usr/share/nginx/html/
//cp right folders which are created by gulp build to /usr/share/nginx/html
...
//start nginx container
/usr/sbin/nginx -g "daemon off;"

So the build will happen when my container starts. Not the best way of course but it's all for the needs of the developers. Have an easy local frontend.

The sed command will perform a replace on the config file which contains something like:

{
  "service_base": "my-url",
}

So my-url will be replaced by my the content of my environment variable which I willd define in my docker run command.

Than I'm able to perform.

docker run -d -p 80:80 -e DATA_ACCESS_URL=https://mybackendurl.com app:latest

And every developer can use the frontend locally and connect with their own backend URL.

Collectives™ on Stack Overflow

Reusable docker image for AngularJS

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related