Deployment

[No, not to the army]

Well, of course in our development process we would need to deploy our work. Here, we are required to deploy it to Fasilkom’s Docker registry and engine, no included with the production environment. For this we’ve been using angular as our front-end and aws, which is now changed to google cloud platform, for our back-end. From there we only need to make it so that our angular is put in a sort of container. Here is how our group does our deployment.

Docker Container

First, we would need to create a container for our angular. A container is a standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another. A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries and settings.

Container images become containers at runtime and in the case of Docker containers — images become containers when they run on Docker Engine. Available for both Linux and Windows-based applications, containerized software will always run the same, regardless of the infrastructure. Containers isolate software from its environment and ensure that it works uniformly despite differences for instance between development and staging.

Building a Docker image

In order to build a Docker image, a Dockerfile file must first be created which contains the “recipe” on how to create the image. Generally, it consists of what base image to be used as the runtime and then how do you want your apps to be put in the image. Here is our Dockerfile:

The script can be separated into two parts, build and package. Firstly, we use a Node based image since angular is a Javascript framework, we need npm which is part of Node to build our image. Then we are using the Alpine version of it. Alpine is a lightweight and small Linux distribution. Then we change the working directory and also copy all the source code into the image, keep in mind that some files will get ignored according to the .dockerignore file. We use npm install command to install all the dependency. Since Angular is a front-end framework, it needs to be compiled into html, css, and js files, we will use npm build for that.

Since it has been compiled, we don’t need the Node environment anymore, instead, we will use Nginx as the web server to serve our compiled resources. Alpine still be used as the runtime since it is berry good. Since we build our Angular app inside the previous image, we need to copy the compiled resources from that image using COPY and the argument — from=builder into the appropriate folder. We assigned the port to port 80 since it is the default port for HTTP request. We also add the ENTRYPOINT to tell docker what to do when running the image.

Fasilkom also has their own GitLab instance and runners, we are going to use this as the means to continuously deploy our app. In order to use GitLab’s CI/CD pipeline, one must create a .gitlab-ci.yml file as the script. Here are ours:

Our script is way simpler since we only need to deploy our front-end. Here you can see that our script has two main stages which is the test stage and deploy stage, the test stage is reserved for another topic. In the deployment stage, we are using the Docker image, a Docker in Docker that allow us to do Docker stuff inside Docker. Most of these commands are only there as the workaround to get Docker in Docker (DinD) running in Fasilkom’s GitLab instance. The only important ones are the commands inside script. To speed up our image building, we can pull the previous (if exist using || true) image to serve as the cache using docker pull and then reference it when building using — cache-from. Our registry has naming convention, so we tag our image appropriately when building it. Finally we can push our image.

Done

We have finally pushed our image to the registry. Later if you want the image to be able to be accessed, we can set up a container using the convenient Portrainer as the GUI for docker manager.

This would be all I know about deployment. I hope this is informative enough because I feel that as a hustler, I could not grasp the concept well enough to be translated into writing. Well this is the end of our meeting, I hope everything would be informative enough and I will now

Bid my final adieu!