Dockerizing an Angular Application with Nginx and hosting in AWS - ec2

7 min readFeb 24, 2022

In this blog post, we will go through a step-by-step guide on how to write a multi-stage dockerfile to build an angular application using Docker and host the production-ready code in an NGINX container inside an ec2 instance in AWS.

In this article, we are going to see the following topics.

Creating an Angular Application
Writing dockerfile
Running the Docker Container and pushing to Docker Hub
Launching an EC2 instance
Installation of Docker in instance
Running Docker container in EC2 instance
Disadvantage

Creating Angular Application

In order to proceed with this step, ensure that you have Node.js and Angular CLI installed in your local development environment. Installation instructions can be found on the official Angular website.

Once the prerequisites are installed, you can start by executing the following commands to create an angular application in a local directory of your preference.

ng new sample-angular-app

Navigate to the project’s directory, to run the application.

cd sample-angular-app
ng serve

Angular application running in port 4200

Now that we have an angular application successfully running, let’s start writing a dockerfile for it.

Writing a Dockerfile

# Stage 1: Compile and Build angular codebase # Use official node image as the base image
FROM node:latest as build # Set the working directory
WORKDIR /usr/local/app # Copy the package.json and package-lock.json files
COPY package*.json ./# Add the source code to app
COPY ./ /usr/local/app/ # Install all the dependencies
RUN npm install # Generate the build of the application
RUN npm run build  # Stage 2: Serve app with nginx server # Use official nginx image as the base image
FROM nginx:latest # Copy the build output to replace the default nginx contents.
COPY --from=build /usr/local/app/dist/sample-angular-app /usr/share/nginx/html # Expose port 80
EXPOSE 80

Stage 1:

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 nginx 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 usr/local/app is chosen as the directory to move the angular source code into.
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 usr/local/app/dist/sample-angular-app and the compiled image will be used for the subsequent steps in the Dockerfile.

Stage 2:

FROM – Initializes a secondary build stage, and sets the latest nginx image from dockerhub registry as the base image for executing subsequent instructions relevant to nginx configuration.
COPY – Copies the build output generated in stage 1 (--from=build) to replace the default nginx contents.
EXPOSE – Informs Docker that the nginx container listens on network port 80 at runtime. By default, the nginx server runs on port 80, hence we are exposing that specific port.

Running the Docker Container and Pushing to DockerHub

In order to build and run the docker container, 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 adithyak21/doc-ang:latest .

The file path . defines the location of the Dockerfile in the current directory, and the -t argument tags the resulting image, where the repository name is krish186/sample-angular-app-image and the tag is latest.

Now that we see our container is in the list, we can run the image using following command.

docker run -d -p 80:80 adithyak21/doc-ang:latest

As per the above output, we see that the container is up and running. If we now head to http://localhost/ we can see the angular application is successfully dockerized.

Now that the application is running as expected, our next step would be to push our image to an image repository, to deploy our containers to a cloud service.

You should posses a DockerHub account, if not create one and execute the following commands:

docker login -u <username> -p <password>
docker push adithyak21/doc-ang:latest

Once the image is pushed to DockerHub you could witness it.

Launching an EC2 Instance

Now we ran the container on your local machine and set up our AWS account. It’s time to launch the EC2 instance by going to the EC2 dashboard.

Select free tier eligible Linux instances

You need to make sure you added security group rules for HTTP so that you can access this instance public.

You need to have key-pair so that you can access this instance securely from the AWS CLI. If you don’t have already this ley you can create one before launching. You should download this key and keep this in a secure location.

key pair for connecting instance securely

You will have a running instance after some time.

Now to connect with the instance from windows PC download and install the PuTTY Software. Open the PuTTYgen and load the ec2-docker.pem

Save Private Key in the desired location which will be used for connecting with the instance.

Open the PuTTY for connecting with the Instance

Navigate to Connection → SSH → Auth

Browse the private key which is created using PuTTYgen in previous step.

Navigate to Session and Enter the IP address and click Open

Installation of Docker in instance

Once you securely connected to the EC2 instance and let’s run the following commands to install Docker.

// update
sudo yum update -y// install most recent package
sudo amazon-linux-extras install docker// start the service docker
sudo service docker start// add the ec2-docker user to the group
sudo usermod -a -G docker ec2-user// you need to logout to take affect
logout and login again// check the docker version
docker --version

Running Docker container in EC2 instance

We need to repeat the same steps that we have done in the second step in which we run the container on our local machine.

Let’s pull this image from the Docker Hub and run this container with the following commands. One thing we need to notice here is that we need to expose on port 80 because this is the port we can access this instance publicly.

// pull the image
docker pull adithyak21/doc-ang:latest// list the images
docker images// run the container
docker run -d -p 80:80 --name adithyak21/doc-ang:latest
                     or
docker run -d -p 80:80 adithyak21/doc-ang:latest// check the running container
docker ps

Let’s take the public DNS address and check the Angular Application running on this instance.

Disadvantages

First of all, this is the manual process and we should avoid doing this.
You deployed the applications on Docker which runs on one EC2 instance. That great but, what if you want to deploy a fleet of instances with docker images that when AWS ECS comes to rescue.
It’s going to be extremely difficult to connect to other Docker containers as well.

Summary

You can build a docker image with Angular and Nginx
You can run Docker containers on AWS EC2 by installing Docker.
You can pull Docker images from Docker Hub and when you run those containers you should expose on port 80.
You need to add a security group rule for HTTP for accessing publicly.
This is the manual process and it’s not suitable if you want to launch a fleet of instances.