Mes: noviembre 2020

The purpose of this post is to give you an idea of how we could create our own custom images.

This is super useful because you could have only one image to display all your front applications instead of creating an image per application, taking a moment to think that your CI/CD pipelines going to be faster, and you avoid store images per each commit.

So the idea is to allow developers only to care for their code, in this example we going to use a Vue app.

1. Create a VUE app // nothing complicated we going to use the VUE base template
2. Create a docker file to serve that app
3. Create a script to say where this container going to get the .dist package ” usually stored in a package manager”

1. create a vue app

As I mentioned before we going to use a vue base template so basically we going to create a new folder and then a star vue with the default configuration

mkdir vue-project
cd vue-project
vue create newproject -d 
#-d is to say to vue "use only the default configuration"

If we run our new app we goin to see something like this:

Good job we could assume that this is our cool app then we going to create a docker file and a simple bash script to command the next actions that the container has to follow.

2. Create the dockerfile

Here I’m going to use the visual studio code but you could use any IDE so I’m going to type: code .

I’ve created a Docker file on the root.

# etapa de producción de nuestro contenedor
FROM nginx:1.13.12-alpine as production-stage
# this is a default version only if you are versioning your apps
ENV MYAPP_VERSION_VUE=1.2.3  
# you going to need this ca-certificates to allow alpine use wget to download a package from an external package manager 
RUN   apk update \
  &&   apk add ca-certificates wget \
  &&   update-ca-certificates  
# we copy our script to be executd it once the container runs
COPY script-vue.sh ./
EXPOSE 80
CMD [ "sh" , "script-vue.sh"]

3. Create the Script

I’ve created a script-vue.sh file:

#!/bin/bash

if [ -d "package/dist/" ]
then
echo "ya hay una version anterior, para actualizar es necesario actualizar el contenedor"
else
echo $MYAPP_VERSION_VUE >> versioncontrol.txt
echo "descargar"  $MYAPP_VERSION_VUE
apk update; apk add ca-certificates wget; update-ca-certificates;
wget --no-check-certificate --auth-no-challenge   --user=user --password=yourpass https://my-private-repo/repository/my-samplevue/-/vue-project-vue-$MYAPP_VERSION_VUE.tgz  -O - | tar -xz
cp -r package/dist/. /usr/share/nginx/html
echo "daemon off;" >> /etc/nginx/nginx.conf
fi
nginx

We assume that we are getting at least one version from a private repo if there is a dist folder in that path we asume that we have to download a new version then untar the folder a finally star nginx.

Then it just matters to docker build our image and run it, now I’m going to modify a little bit the script and docker the docker file for our demo.

Back in to our demo:

we need to generate the /dist folder and build our image so, go ahead:

#to compile our code and generate an artifact 
npm run build 

Once we have builded our app we are ready to run:

docker build -t mybaseimage . 
docker run -ti -d -p 80:80   mybaseimage:latest 
#or passing an env 
docker run -ti -d -p 80:80 -e MYAPP_VERSION_VUE=1.5.6  mybaseimage:latest 

Now you have a generic image just to command it the version you want to be downloaded.

…you can clone the code here.

https://github.com/xRegner/vue-base-image.git

Happy code mate…