Introduction

This is the first post in a series of posts in which I will deploy an Angular2 application and an Express server inside a Docker container. By the end of the series, I will build a sample application (client and server) and use Nginx with HAProxy to proxy the requests to their intended servers and also dynamically balance the requests when we add or remove servers from the cluster.

What is Docker?

Docker is an open-source software that enables you to automate the deployment of any application into software containers. Containers, unlinke virtual machines, share the operating system on which they are running. This means that containers are much more efficient in using system resources resulting in more instances of your application running on the same hardware.

Prerequisites

1. Install Docker with brew install docker if you are on a Mac or use your OS intaller from https://www.docker.com/community-edition#/download.
2. Make sure you have NPM installed on your system.
3. Install AngularCLI by running npm install -g @angular/cli.

Creating the Angular application.

We will use the Angular CLI to generate a sample Angular app:

• Create a new directory for your project: mkdir ng-2-docker
• Generate a new angular app. I will name it client: cd ng-2-docker ng new client
• Start the development server by running ng serve
• Open your browser and navigate to http://localhost:4200

If you see the message “app works!” you are good to go.

“Dockerizing” the client application.

We begin by creating a Dockerfile inside the client application folder. This file is like a blueprint for the docker container. We will create a new image from the base nodejs 7 image, copy all the application source files into our image, install de dependencies and then run the application.

ng-2-docker/client/Dockerfile

#  Create a new image from the base nodejs 7 image.
FROM node:7
# Create the target directory in the imahge
RUN mkdir -p /usr/src/app
# Set the created directory as the working directory
WORKDIR /usr/src/app
# Copy the package.json inside the working directory
COPY package.json /usr/src/app
# Install required dependencies
RUN npm install
# Copy the client application source files. You can use .dockerignore to exlcude files. Works just as .gitignore does.
COPY . /usr/src/app
# Open port 4200. This is the port that our development server uses
EXPOSE 4200
# Start the application. This is the same as running ng serve.
CMD ["npm", "start"]

Before building our image we just need to change one thing. By default, the webpack-dev-server is not accessible from other hosts. In order to make it available we need to add a parameter into our package.json file.

ng-2-docker/client/package.json

From this:

...
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...

Into this:

...
"scripts": {
    "ng": "ng",
    "start": "ng serve -H 0.0.0.0",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...

Now we need to build our image. Make sure you are in the client directory and then run:

docker build -t ng-2-docker/client .

This will build our custom nodejs image that will run our Angular client application.
In order to test our image we need to deploy it in a container: docker run --rm -p 80:4200 ng-2-docker/client

• –rm parameter will immediately remove the container when it stops.
• -p parameter maps the container’s 4200 port to port 80 on your local machine.
• The last part of the command it’s the image that we’ve just built.

We can test our application by opening http://localhost in your browser.
If you see the message “app works!” then you are successfully running your Angular application inside d docker container. You can also run docker ps and you should see one running container.

Putting it all together with Docker Compose

Mapping container’s port to local machine’s port it’s ok for what we need but in a real production environment you would most probably use Nginx to reverse proxy the requests to your application server/s. When a request comes on port 80 in your Nginx server, it will be forwarded to port 4200 into your application server (webpack-dev-server in our example). In order to be able to easily orchestrate multiple images and containers we are going to use docker-compose. This utility comes pre-installed with Docker.

First, we are going to create our Nginx image. We will start from a base Nginx image and just add our own default configuration to proxy the requests to our application server.

• Create new folder named nginx in the root folder of our project: mkdir nginx
• Into this new folder create 2 files: Dockerfile and default.conf

ng-2-docker/nginx/default.conf

server {
    location / {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_pass http://client:4200/;
    }
}

The config above will instruct Nginx (which will run in a separate container) to proxy all request coming on / to the angular client application running in another container on port 4200.

Now for the Dockerfile:

ng-2-docker/nginx/Dockerfile

#  Create a new image from the base nginx image.
FROM nginx
# Overwrite nginx's default configuration file with our own.
COPY default.conf /etc/nginx/conf.d/

Now, int root of the project create a new file called docker-compose.yml

ng-2-docker/docker-compose.yml

version: '2'

services:

  # Build the container using the client Dockerfile
  client:
      build: ./client

  # Build the container using the nginx Dockerfile
  nginx:
    build: ./nginx
    # Map Nginx port 80 to the local machine's port 80
    ports:
      - "80:80"
    # Link the client container so that Nginx will have access to it
    links:
      - client

Now in the root folder run docker-compose up -d --build --remove-orphans and everything should magically work. Test it at http://localhost.

Useful docker-compose commands:

• docker-compose ps list running containers
• docker-compose stop stops our comntainers
• docker-compose start starts our containers
• docker-compose up -d --build --remove-orphans re-builds the containers. Useful if you modify any configuration or source file
• docker-compose logs brings up the container logs

Editing code without container re-build?

This is all fine and dandy but it’s a bit of a headache to re-build the containers everytime you modify a css file. In order to map the client container’s code We just need to add a line of code into our docker-compose.yml file.

ng-2-docker/docker-compose.yml

...
  # Build the container using the client Dockerfile
  client:
      build: ./client
  # This line maps the contents of the client folder into the container.
      volumes:
        - ./client:/usr/src/app
...

In order to test our changes run:

• docker-compose up -d --build --remove-orphans to re-build the image
• Open your browser at http://localhost. You should see app works!
• Edit ng-2-docker/client/src/app/app.component.ts and change the title value to “app works with Docker!”
• Refresh your browser and see the magic happening.

What’s next?

In the next post we will create an API server with Express and MongoDB and connect our client application to it.

P.S: The code is available here