Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Dockerizing an Angular App via Nginx [Snippet]

DZone's Guide to

Dockerizing an Angular App via Nginx [Snippet]

Looking to containerize an Angular app? Here are the steps you need to keep in mind to Dockerize an Angular application with some help from Nginx.

· Cloud Zone ·
Free Resource

Insight into the right steps to take for migrating workloads to public cloud and successfully reducing cost as a result. Read the Guide.

During one of my recent projects, my team faced the challenge of Dockerizing an Angular app, as we wanted the UI to be deployed in a separate container on AWS.

To understand this article, you should have a basic understanding of Docker.

Dockerization Tasks

  • We will start by creating an Angular application via the CLI provided by Angular: https://cli.angular.io/

  • Once the project is created, we need to run the command: "ng build --prod". This will create a dist folder that contains all the deployables.

  • Further steps will be performed by a Dockerfile:

    • Install Ngnix inside the Docker image using the FROM command.

    • Remove the default HTML files inside Nginx installed on Docker.

    • Copy contents of the dist folder to an HTML folder inside Nginx.

    • Start Docker 

Actual Implementation

Go to the directory where the new application should be created, create the app, and then start the server with the help of a few commands.

Assumption: The Angular CLI is already installed. If not, install that first.

  1. ng new angular-docker-app

  2. cd angular-docker-app: You should see the following files inside your folder.
    Image title

  3.  ng serve 

The application should be running on the localhost.

http://localhost:4200/


Image title

Begin Dockerization

Create a Dockerfile inside the project folder and add the following lines to it.

FROM nginx:1.13.3-alpine

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

## From 'builder' stage copy over the artifacts in dist folder to default nginx public folder
COPY /dist /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]


Create the Docker image and run it by using the following commands:

  •  ng build --prod 

  •  docker build -t angulardockertest . 

  •  docker run -p 80:80 --name angulardockertest angulardockertest 

Now try to hit http://localhost:80/

Stopping the Container

  • Run the command docker ps to find the container id

  • docker stop <container Id>

  • docker rm <container Id>

You can download the source code here: https://github.com/86rishab/angular-docker-app.

Once Dockerization is complete, it can easily be pushed to the cloud.

TrueSight Cloud Cost Control provides visibility and control over multi-cloud costs including AWS, Azure, Google Cloud, and others.

Topics:
docker ,angular ,nginx ,cloud

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}