DockerFile — Multiple Stage build

How To Dockerize an Angular Application with multistage build

git clone https://github.com/DenysVuika/medium-angular-docker.git
# 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/ .

Stage 1:

Stage 2:

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

Cloud and DevOps Enthusiast