Angular Learning (Part3)

Dockerized the Angular App

Docker is a technology which makes the deployment process less painful. In this part of the article i will discuss how to dockerized the Angular Application, later we can easliy deploy the site to production and kubernetes.

I will follow multistage docker build apporach to build the docker image using docker compose and nginx server. So production version of the sample angular application will be hosted it to nginx webserver in docker container.

If you don’t know about docker before, you can read those documentation to know about docker from link below

Prerequsites

1. Docker
2. Docker Compose

Orientation and setup

Overview of Docker Compose

For multistage build we need different docker image to use in each stage, reference the previous build content to next step building process. So i select the node base image for production build for Angular Application. To host into nginx web server, I user nginx base image for that

1. (Node) base image
2. (nginx) base image

First create the nginx configuration file to nginx/config.conf to root of the application.

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

Server will be listen at 80 port. and set the website or application document root at usr/share/nginx/html of docker container

main page will serve by webserver will be index.html which is definedat index keyword

In the case of try_files $uri $uri/ /index.html;, it test the the existence of a directory, and therefore the index action is taken in $uri and /index.html file.

Enable the error page by error_page keyword, add the http error code 500, 502, 503, 504 to /50x.html file

Then show the location where /50x.html file will located by location keyword

Add the the Dockerfile in the root of the application

# Stage 1: Build an Angular Docker Image
FROM node as build
WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY . /app
ARG configuration=production
RUN npm run build -- --outputPath=./dist/out --configuration $configuration
# Stage 2, use the compiled app, ready for production with Nginx
FROM nginx
COPY --from=build /app/dist/out/ /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d

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

We use 2 stage build the Angular Docker image. first stage for create production bundle for Angular app, the second stage use the production bundle to serve as website from docker container image

Stage One build Instraction explanation

Line 3, Take the node as base image and alias is as `build`
Line 4, Docker need work Directory add the work directory `/app`
Line 5, Copy the NPM package file from host to app directory in container
Line 6, Install the package by runing command `npm install` by RUN
Line 7, Copy the whole app directory to container's `/app` folder
Line 8, Add the argument to command line or environment variable for configuration of angular production build
Line 8, RUN the command which will build the angular production bundle and put it to `./dist/out` folder and $configuration will takes as argument for production build

Stage Two build explanation

Line 13, Take the nginx as base image for docker build process
Line 14, Copy the file from 'build' image /app/dist/out/ directory to /usr/share/nginx/html, which is the webserver root directory for nginx we define in `nginx.conf` file
Line 15, remove the nginx default configuration file
Line 16, Company the host /nginx/config.conf file to nginx container config directory
Line 17, we need to expose the port for docker image, so service can be access at outside of container
Line 80, Run the `nginx` webserver by CMD docker instraction

Docker Compose Implementation

We can now build the image by using docker command. But i always prefer to use the docker compose to build and serve in docker environment. So i create the docker-compose.yml file in root of the file directory

version: '3.7'

services:

  angular-frontend:
    container_name: frontend-portal
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - '80:80'
    environment:
      - NODE_ENV=production

Explanation of docker-compose file

Line 1, docker-compose systax version 3.7
Line 3, declare the service container in docker compose file, it can contains two or more service
Line 5, declare the name of the service as `angular-frontend`
Line 6, provide the container tag name as `frontend-portal`
Line 7, add the attribute `services`, which contains all the service definition of docker images and application service environment
Line 8, declare the context from which image or which host directory will take for start the building process
Line 9, Specify the Dockerfile name, from where docker-compose takes instruction to build the image
Line 10, 11, where we expose the port number which will be availble to other service or outside world to access the service functionality
       '<host_port_to_serve>:<container_internal_port_for_service>'
Line 12, 13, specify the node environment in environment variable

File Structure of the dockerized angular app will be like below

Then run the command from application root directory where the docker and docker-compose file is from command line

> docker-compose up --build

If you want to run the application in background run the following command below. For first time my advice is to run without -d to check build process is successfull or not.

> docker-compose up --build -d

To down the service container from command line just run this command below

> docker-compose down

Output in terminal

If you got this error duirng first time build, because production file size issue, go to angular.json file and increate the bundle length, go to production -> budgets section increase the file accept size for anyComponentStyle to following value below

"budgets": [
  ......
   {
      "type": "anyComponentStyle",
      "maximumWarning": "1mb",
      "maximumError": "1.2mb"
   }
]

After fixing that error, go to terminal again and run that following command

> docker-compose up --build

After succfully build the image you will get that message to terminal

To see which which port the my frontend app service running in docker environment, run the command below in command line

> docker-compose ps

Now you see that it run in 80 port to host machine. So you can browse this application website at 80 port from web browser

Output to browser

Go to browser and browse http://localhost , then you can see that docker is running our application to 80 port.

IN Next part of the article we discuss about APP_GUIRD and ROUTING and httpInterceptor

You can find my code base in following github link below

tariqulislam/angular-example-app