DEV Community: Laiba Zahoor

Deploying Angular App with multi-stage docker file plus tips/tricks on (Image Optimization)

Laiba Zahoor — Mon, 13 Sep 2021 14:45:09 +0000

It is very important to build efficient docker images using Dockerfile whenever pushing out images into production. We need images as small as possible in production for faster downloads, lesser surface attacks.

In this article we'll cover different points:

Life without Multi-stage Build
Image Optimization
conclusion

Life without Multi-Stage Build

I have talked about dockerfile and how to build docker image for an application a fair bit in the past. As we build image for our angular application named as angularapp in the last article when we build a basic Dockerfile, like the following,

we end up with an image that size is astonishingly high which is 1.28GB.

We can’t ship the image of this size to production because of slower downloads. It takes longer than usual to download this image over the network.
Another problem is the larger surface area which is prone to attacks. We included npm dependencies and the entire Angular CLI library in the image which are unnecessary in the final image.
After facing all these difficulties, we came with different solutions through we can optimize our images:

Image Optimization:

1. Use a light base Image

In Docker Hub (the public Docker repository) there are several images available for download, each with different characteristics and sizes.
Normally, images based on Alpine extremely small in size compared to those based on other Linux distributions, such as Ubuntu. So to optimize our image we'll use alpine image as a base image.

By modifying the Dockerfile and using Alpine as a base, the final size of our image is 550MB:

2. Multi-Stage Dockerfile

Basically Multi-stage dockerfile is use to minimize the size of the final container, improve run time performance, allow for better organization of Docker commands and files.
Docker introduced multi-stage builds from version 17.05.
With multi-stage builds, you can split your Dockerfile into multiple sections. Each stage has its own FROM statement so you can involve more than one image in your builds. Stages are built sequentially and can reference their predecessors, so you can copy the output of one layer into the next.

Multi-Stage Builds in Action

With multi-stage build, we can use multiple base images in the Dockerfile and copy artifacts, configuration files, etc. From one stage to another, so that we can discard what we don’t need.
now let's create a Multi-stage dockerfile for our angular application. After this, the final size of our image will be in MBs.
Here’s a multi-stage Dockerfile which encapsulates our entire build:

Now we have a Dockerfile with two stages: first stage will be use to build image for angular application and generate a dist folder which contain all the deployable files for angular application.
Stage two will use another image to run an application.

so the size of our image is 110MB.

Conclusion

In this blog, We saw how to optimize our image from 1.28GB to 110MBs using different optimization methods.
In my next blog we'll learn how to start multiple containers at once using docker compose.

Reach me at

You can follow me, contact me, ask questions, see what I do, or use my open source code:

Containerizing Angular App In A Docker Container

Laiba Zahoor — Thu, 02 Sep 2021 14:52:40 +0000

Docker:

If you are new to the docker journey go and explore my YouTube channel to watch my YouTube video, where I talked about what is docker and also about the container.

Content List:

Nowadays, it’s very common to dockerize and deploy the Docker image in the production with the help of container orchestration engines such as Docker Swarm or Kubernetes.
In this blog We are going to Dockerize the app and create an image and run it on Docker on our local machine for this, we need to perform the following steps:

Creating Angular Application.
Create Dockerfile in Angular App.
Build Docker image from Docker file.
At the end run containerized Angular Application on docker

Angular.

Before creating angular application we should have some basic knowledge about Angular so, Angular is a platform and framework use to built client side application using HTML,CSS and TypeScript.
Before creating angular application, make sure that Node.js and Angular CLI already installed in your local system.
If you find any difficulty while installing Angular jump at Angular Website.

Creating Angular Application:

Once Nodejs and Angular installed, Execute ng new angular-app command to create angular application in a local directory.

Navigate project' directory and run Angular application using, ng serve command

Create Dockerfile:

A Docker image consists of read-only layers each of which represents a Dockerfile instruction. The layers are stacked and each one is a delta of the changes from the previous layer. Consider this Dockerfile:

FROM – Initializes a new build stage, and sets the latest node image from DockerHub registry as the base image for executing subsequent instructions relevant to the angular app’s configuration. The stage is arbitrarily named as build, to reference this stage in the nodejs configuration stage.
WORKDIR – Sets the default working directory in which the subsequent instructions are executed. The directory is created, if the path is not found. In the above snippet, an arbitrary path of app is chosen as the directory to move the angular source code into.
COPY Package.Jeson - use to copy these files into the Docker file system and install all the dependencies. we need this to build image faster for example You've changed some src.js file, but haven't changed the package.json. You run npm and it looks good. Now you re-run docker build. Docker notices that the package*.json files haven't changed, so it uses the same image layer it built the first time without re-running anything, and it also skips the npm install step because it assumes running the same command on the same input filesystem produces the same output filesystem. So this makes the second build run faster. But if you missed it you need to install all dependencies every time you build image which ultimately slow down the image build process.
COPY – Copies the source files from the project’s root directory on the host machine to the specified working directory’s path on the container’s filesystem.
RUN – Executes the angular build in a new layer on top of the base node image. After this instruction is executed, the build output is stored under /app and the compiled image will be used for the subsequent steps in the Dockerfile

Building Docker Image:

Building efficient Docker images are very important for faster downloads and lesser surface attacks. Let’s build an image with the Dockerfile. so for this, open up a command prompt and navigate to the location of your Dockerfile in your project’s directory.
Execute the following command to build the docker image.

docker build -t angular-app:latest "."
In the above command as you see . is placed at the end of the command which shows that Dockerfile is present in the current working directory. but if in your case it's not present in the current working directory you can specify the path of Dockerfile at the end of the command.

Watch the demo live| Subscribe to my channel

Conclusion:

Docker virtualization is indeed an incredible technology. It can be used to virtualize almost any sort of application. Angular is mainly used to develop frontend web designs.
In this article we learned how to create Docker file, how to build docker Image from it and after this how to run containerized Angular Application.
Hopefully this article helped you to running a simple Angular application on Docker.

What Next:

In my next article I'll show you, how to orchestrate container in development machine using multi stage docker file and docker compose.

My First Day of Learning Docker

Laiba Zahoor — Wed, 11 Aug 2021 11:56:21 +0000

Containers are quickly becoming an industry standard for deployment of software applications. But question here is: how containers came into being, so I came across docker and I learned.

In this blog I'll discuss what I have learned so far about docker.

What is docker?
Components of Docker
Container vs VM
Basic Commands.

What is docker?

Docker delivers software in containers, which simplifies the process by packaging everything it takes to run an application.

There are numerous advantages to using containers to deploy applications.

Isolated — Applications have their own libraries; no conflicts will arise from different libraries in other applications.
Limited (limits on CPU/memory) — Applications may not hog resources from other applications.
Portable — The container contains everything it needs and is not tied to an OS or Cloud provider.
Lightweight — The kernel is shared, making it much smaller and faster than a full OS image.

Components of Docker

Docker file is a text document that contains necessary commands which on execution helps assemble a Docker Image.
Docker Image it is a set of instructions which is used to build containers, consisting of application code with all the dependencies and libraries. It is portable so it can easily be shared between developers and operators.
Container is a way of packing application with all its dependencies and configuration files. A container is a running instance of our image.
Docker Engine supports the tasks and workflows involved to build, ship and run container-based applications. The engine creates a server-side daemon process that hosts images, containers, networks and storage volumes. Docker Engine is a client-server based application.
Docker CLI is a command line tool that lets you talk to the Docker daemon.

VM VS Container

Containers are an abstraction at the app layer that packages code and dependencies together. Multiple containers can run on the same machine and share the OS kernel with other containers, each running as isolated processes in user space. Container take up less space than VM's (Container images are typically tens of MB's in size), and start almost instantly.

Virtual Machines(VM's) are an abstraction of physical hard ware turning one server into many servers. The hypervisor allows multiple VM's to run on a single machine. Each VM includes a full copy of an Operating System, one or more apps, necessary binaries and libraries - taking up tens of GBs. VM can also be slow to boot.

Basic Commands:

Go to your favorite browser and Type docker over there click on download and Install docker on your favorite OS. So, I'm skipping these steps because it's a simple next, next wizard on Windows OS but if you having any difficulties installing docker on Linux OS or Mac OS go to the docs and explore how to do it.
After the installation process is completed window like this will appear to you.
Now move towards terminal to run basic commands.
docker pull pulls an image from registry to local machine.
docker images show images.

docker run both creates and runs a container in a single operation.
docker ps shows running containers.
docker stop stops a running container.
docker ps -a shows running as well as stopped containers.
docker start starts a container to run it.

Conclusion

So you have learned about the basics of Docker, the difference between Virtual Machines and Docker Containers along with components of Docker.

In the next article, We'll try to create an application using Docker and pushed our images to Docker Hub. We'll explore more terminologies related to Docker Dockerfile, Docker Image, Docker Hub, Image repositories, Container Registries, and much more!!!

If you want more content like this, you can follow me on Twitter, where I tweet about webdevelopment, self-improvement, and my journey to exploring Cloud Native Technologies!

What Next?

Here are my Next Steps for Learning Docker on YouTube:

Video Link:

if you prefer to watch video then go and watch my YouTube video My First Day of learning Docker