DockerFile — Multiple Stage build

How To Dockerize an Angular Application with multistage build

Let’s try to understand the multi-stage docker file that you can find in the below GitHub page.

Clone the sample angular code

git clone

You will see a DockerFile with the below content.

# Step 1: Build the app in image 'builder'
FROM node:12.8-alpine AS builder
# Set the working directory
WORKDIR /usr/src/app
# Add the source code to app
COPY . .
# Generate the build of the application
RUN yarn && yarn build
# Step 2: Use build output from 'builder'
FROM nginx:stable-alpine
# Use Labels for organize Docker Images
LABEL version="1.0"
# Add the nginx.conf file
COPY nginx.conf /etc/nginx/nginx.conf
# Set the working directory
WORKDIR /usr/share/nginx/html
# Copy the build output to replace the default nginx contents
COPY --from=builder /usr/src/app/dist/my-angular-app/ .

This Dockerfile has two stages.

Stage 1:

Stage 2:

Now, let’s build a docker image and run a container

$ docker build -t angular:v1.0.0 .
$ docker run -d -p 80:80 --name angular-app angular:v1.0.0

Test the application



DevOps Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store