How To Dockerize an Angular Application with Nginx

September 29, 2023

Radhika Krishnan

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. We will also walk through some of the docker commands used to build, run and monitor the status of containers.

Contents:

Creating an Angular Application
Writing a Dockerfile
Running the Docker Container

Creating an 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

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

Writing a Dockerfile

Below is the dockerfile snippet we will use to dockerize our angular application with a NGINX server. The dockerfile comprises of a multi-stage docker build, which is divided into the following stages:

Building the angular source code into production ready output
Serving the application using a NGINX web server

# 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

# 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

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 krish186/sample-angular-app-image: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.

After the build is successfully finished, we can check to see if it appears in the list of docker images available locally. To do so, we can execute the below command.

docker image ls

Output:

REPOSITORY                            TAG                 IMAGE ID            CREATED             SIZE
krish186/sample-angular-app-image     latest              c1789404fda5        19 seconds ago      138MB

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

docker run -d -p 8080:80 krish186/sample-angular-app-image:latest

The -d option, causes Docker to detach the container and have it run in the background.

The -p argument establishes a port mapping, which defines that port 80 of the docker container (as specified in dockerfile), should be exposed to port 8080 of our host machine.

To check the details of our running container, type in the following command:

docker ps

Output:

CONTAINER ID        IMAGE                                      COMMAND                  CREATED             STATUS              PORTS                  NAMES
12d6293d6e19        krish186/sample-angular-app-image:latest   "/docker-entrypoint.…"   16 seconds ago      Up 14 seconds       0.0.0.0:8080->80/tcp   keen_khayyam

As per the above output, we see that the container is up and running. If we now head to http://localhost:8080/ 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.

If you have a DockerHub account you can execute the following commands:

docker login -u <username> -p <password>
docker push krish186/sample-angular-app-image:latest