Create efficient Angular Docker images with Multi Stage Builds

In this write up we’ll see how to dockerize an Angular app in an efficient manner with Docker’s Multi-Stage Builds.

Prerequisites

• NodeJS +6.9
• Angular CLI (npm i -g @angular/cli@latest)
• Docker 17.05
• Basic understanding of Docker and Angular CLI commands

The plan

To Dockerize a basic Angular app built with Angular CLI we need to do the following:

1. npm install the dependencies (Dev dependencies included)
2. ng build with --prod flag
3. move the artifacts from dist folder to a publicly accessible folder (via an an nginx server)
4. Setup an an nginx config file, and spin up the http server

We’ll do this in 2 stages:

1. Build stage: will depend on a Node alpine Docker image
2. Setup Stage: will depend on NGINX alpine Docker image and use the artifacts from the build stage, and the nginx config from our project.

Initialize an empty Angular project

$ ng new myapp

Add a default nginx config

At the root of your angular project create nginx folder and create a file named default.conf with the following contents (./nginx/default.conf):

server {

  listen 80;

  sendfile on;

  default_type application/octet-stream;


  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   1100;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;


  root /usr/share/nginx/html;


  location / {
    try_files $uri $uri/ /index.html =404;
  }

}

Create the Docker file

### STAGE 1: Build ###

# We label our stage as ‘builder’
FROM node:10-alpine as builder

COPY package.json package-lock.json ./

## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
RUN npm i && mkdir /ng-app && mv ./node_modules ./ng-app

WORKDIR /ng-app

COPY . .

## Build the angular app in production mode and store the artifacts in dist folder
RUN $(npm bin)/ng build --prod --output-path=dist


### STAGE 2: Setup ###

FROM nginx:1.14.1-alpine

## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/conf.d/

## 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 --from=builder /ng-app/dist /usr/share/nginx/html

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

Build the image

$ docker build -t myapp .

Run the container

$ docker run -p 8080:80 myapp

And done, your dockerized app will be accessible at http://localhost:8080

And the size of the image is only 15.8MB, which will be even less once pushed to a Docker repository.

You can see a full example in this GitHub repository: https://github.com/avatsaev/angular-contacts-app-example