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

See why enterprise app developers love Cloud Foundry. Download the 2018 User Survey for a snapshot of Cloud Foundry users’ deployments and productivity.

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.

Cloud Foundry saves app developers $100K and 10 weeks on average per development cycle. Download the 2018 User Survey for a snapshot of Cloud Foundry users’ deployments and productivity. Find out what people love about the industry standard cloud application platform.

Topics:
docker ,angular ,nginx ,cloud

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}