Docker a Angular application with dynamic environement

As we have seen in my previous post, we can do dynamic configuration in angular. A great use of it is in a docker container ! We will create a multi step docker build to have minimal size possible and have with dynamic configuration. But first, we need to create the nginx config for our application.

Prerequisites

• NodeJS +8
• Angular CLI (npm i -g @angular/cli@latest or yarn global add @angular/cli@latest)
• Anguler runtime configuration as seen in my previous post
• Docker +17.05
• Basic understanding of Docker and Angular CLI commands

NGINX config

Our first step will be to configure our NGINX server to serve our application and gzip it so we have a better performance :

# ./docker/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;
  }
}

Once we have it, we can make the docker container !

Dockerfile

Our dockerfile will have two stages. One will build our application and the other stage will have the build application with only NGINX running on it.

This is how we can achieve that :

### STAGE 1: Build ###

# We label our stage as 'builder'
FROM node:9 as builder

COPY package.json yarn.lock ./

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

## Move to /ng-app (eq: cd /ng-app)
WORKDIR /ng-app


# Copy everything from host to /ng-app in the container
COPY . .

## Build the angular app in production mode and store the artifacts in dist folder

RUN yarn build --prod --output-path=dist


### STAGE 2: Setup ###

FROM nginx:1.13.3-alpine

## Copy our default nginx config
COPY docker/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;"]

Our final step will be to create a docker-compose with the config !

Docker compose

Here is our docker-compose.yml :

version: '3.1'

services:
  web-app:
    build: .
    ports:
      - 8090:80
    volumes:
      - ./front-config/local.json:/usr/share/nginx/html/assets/config.json

Here, I build a local image, but you can use the image tag instead to use a build image.

Here we have it! A fully configurable docker image with an Angular application!