[Vuejs]-Deploy and customize a VueJs app using Docker and GitlabCI

by

0👍

When you have a docker image and then deploy it, every tool has a way to override Environment variables baked into the image itself.

So, for your example, with plain docker you could do

docker run -e VUE_APP_API_URL=http://my.url ...

And this would essentially override VUE_APP_API_URL variable previously set on the container. Again, any orchestration platform (docker compose, swarm, kubernetes etc) has capability to override environment variables as this is a very common scenario.

So usual approach I use – pre-fill environment variables inside the image with most generic values and then override them on actual deployments – then you don’t need many images (many images for the same thing would be an anti-pattern).

If you have more questions – feel free to join our community discord and you can ask me there – https://discord.gg/UTxjBf9juQ

Update (following comment below): For the static images with compiled UI code, the algorithm is to run some entrypoint script that would do substitution over compiled files. Sample workable pattern is following (you might need tweaks to get it done right, but this gives the idea):

Assuming you’re using nginx as a base image, create entrypoint.sh file that would look something like (see this SO for some references: Can envsubst not do in-place substitution?):

#!/bin/sh
find /usr/share/nginx/html/*.js -type f -exec sh -c "cat {} | envsubst | tee {}.tmp && mv {}.tmp {}" \;
nginx -g 'daemon off;'
  1. Copy this entrypoint.sh file into your docker image and use it with ENTRYPOINT instruction.

Leave a comment