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:8.1.4-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 && cp -R ./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


### STAGE 2: Setup ###

FROM nginx:1.13.3-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
Show your support

Clapping shows how much you appreciated A. Vatsaev’s story.