TheCodeBuzz

Today in this article, we will see how to Docker- Containerize an Angular App with NGNIX.

Recently I tried to Containerize/Dockerize one of my microservice followed by an Angular UI application on Docker. While doing that I learned a few details on the docker which I have tried to capture in this post.

Today in this article, we will cover below aspects,

The main advantage of the containerized app is that the image created through docker containerization can be hosted/accessible anywhere, be it a private cloud (ex. PCF) or public cloud (ex. Azure or AWS).

“Docker is an open platform for developing, shipping, and running applications. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly.” _ Docker

Getting started

Prerequisites

• Node.js
• Docker installation – Please see here for troubleshooting steps and details if any while installing Docker.

“https://www.thecodebuzz.com”

Create Angular application

Here I am using the sample application created using the template to keep everything very simple.

Let’s create a fresh sample application

Our sample app is ready to be containerized. Here is the output of the app execution,

Let’s now publish the binaries using the command ng build –prod. All the binaries once published successfully will be located in the working directory “angular-tour-of-hero-app”

Create the Docker file

Once all binaries are published to the ‘dist’ folder, from here onwards we will be using docker-specific commands to containerize our angular app.

To simplify the process, please go to the ‘dist‘ folder and open your favorite CLI tool. Create a new docker file using the below command,

echo . > Dockerfile

Add Metadata in Docker file

Open the docker file and add the below metadata to the file,

Dockerfile:

FROM nginx:stable-alpine
LABEL version="1.0"

COPY nginx.conf /etc/nginx/nginx.conf

WORKDIR /usr/share/nginx/html
COPY / .

The above command is explained below,

• FROM This command pull down the image tagged from the nginx:stable-alpine repository.

• COPY / . This command copies the current content from ‘dist’ folder to a folder ‘app’ in the container.

Create and Build the Docker Image –Local

From the command prompt please run the below command,

CLI:

docker build -t myang .

The above command is explained below,

• docker build

This command uses the information from the local Dockerfile to build a Docker image.

• -t myang

This command names the new image created as specified. Here we are providing the name as ‘myang ’

• . This specifies which directory to find by Dockerfile.

In our case, it is the current directory. So all binaries from the ‘publish’ folder will be considered for imaging.

Here you go with actual command execution,

Run Docker Image – Local

Run docker images locally to verify if everything is working fine

docker run -p 3007:80 –rm myang

The above command is explained as below,

docker run

This command creates and starts the container, so performs two operations using a single command. Overall command ‘docker run’ wraps below two commands,

• docker create
• docker start

–rm

This command connects the current terminal to the container. This command makes sure the container is automatically deleted when the process is stopped.

As shown below our container is ready and hosted on port 3007:80.

Once after executing the application through the browser, here is the result,

Running in Browser for port 3007 will give us the result as below,

If you wish to see details on available docker images on your machine, please run the below command.

docker image ls

Finally, the first containerized Angular 7 web app is ready and steady for deployment.

Now let’s publish the images to the docker hub

Publishing to Docker Hub

So far we executed the image locally and verified the result. Now let’s publish the image to DockerHub so that it becomes consumable from the server or cloud or private/publically accessible.

Publishing to docker hub is consists of 2 steps as below,

• Build the image against your docker account and
• Pushing the image to docker.

Login to docker with your docker id and credentials,

Build the Docker Image

Build your Docker images using the below command,

docker image build -t –rm firstthecodebuzz/myang:1.0 .

Here ‘firstthecodebuzz ‘ is my docker account name. Please your account number here. Other commands details are the same as already explained above.

Push the Docker Image

docker push firstthecodebuzz/myang

So we are all set with the docker image. Now let’s run the image.

Run Docker Image

Let’s run the images directly from the docker. This image is now available to execute and I can perform all UI operations.

We will now use 3008 as the port number to run the docker image. (As port 3007 is used for local docker)

docker run -p 3008:80 –rm firstthecodebuzz/myang:1.0

Let’s run now browser from Dockerhub,

Finally, we can run the app from docker hub images.

Did I miss anything above, Do you have any suggestions/inputs? Please sound off your comments below.

Summary

Docker platform allows us to develop, deploy, and run applications with containers. In this article, we learned to containerize our Angular 7 Web app using Docker. Docker is a huge subject and here I tried to highlight the basic functionalities of Docker containerization. Hope you liked this article.

---

Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published(2024) best practices and guidelines for software design and development.

---