[Docker] Running Multiple Containers for an Angular, Node project

The code is from Plusight course, github link is here.

In this post, we will give a overview about how to setup Docker for a Angular, Node application, of course, you can replace Angular with any other FEF, the concept should be the same.

We have a normal Angular CLI generated structure:

Some differences that we add a 'server' folder and 'config' folder.

In serve folder, there is a docker file for Node.js:

// node.dockerfile

FROM node:alpine

LABEL author="Dan Wahlin"

WORKDIR /var/www/angular-node-service

COPY package.json package.json
RUN npm install

COPY . .

EXPOSE 3000

ENTRYPOINT ["node", "server.js"]

For 'config' folder, we have a nginx.conf file:

server {
    listen 0.0.0.0:80;
    listen [::]:80;
    default_type application/octet-stream;

    gzip                    on;
    gzip_comp_level         6;
    gzip_vary               on;
    gzip_min_length         1000;
    gzip_proxied            any;
    gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers            16 8k;
    client_max_body_size    256M;

    root /usr/share/nginx/html;

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

Mainly for handling FE Routing case.

The most important file is docker-compose.yml file:

# This can be used to run a development version of the Angular and Node containers
# See the readme.md for details on changes that are required in the Angular service

# Run docker-compose build
# Run docker-compose up
# Live long and prosper

version: '3.1'

services:

  nginx:
    container_name: nginx-angular
    image: nginx-angular
    build:
      context: .
      dockerfile: nginx.dockerfile
    volumes:
      - ./dist:/usr/share/nginx/html
    ports:
      - "80:80"
      - "443:443"
    depends_on: 
      - node
    networks:
      - app-network

  node:
    container_name: angular-node-service
    image: angular-node-service
    build:
      context: ./server
      dockerfile: node.dockerfile
    environment:
      - NODE_ENV=development
    ports:
      - "3000:3000"
    networks:
      - app-network
      
  cadvisor:
    container_name: cadvisor
    image: google/cadvisor
    volumes:
      - /:/rootfs:ro
      - /var/run:/var/run:rw
      - /sys:/sys:ro
      - /var/lib/docker/:/var/lib/docker:ro
    ports:
      - "8080:8080"
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

It defines 'nginx-angular', 'node' and 'cadvisor' (optional).

We have docker file for production:

# This can be used to run a production version of the Angular and Node containers
# See the readme.md for details on changes that are required in the Angular service

# Run docker-compose -f docker-compose.prod.yml build
# Run docker-compose up
# Live long and prosper

version: '3.1'

services:

  nginx:
    container_name: nginx-angular
    image: nginx-angular
    build:
      context: .
      dockerfile: nginx.prod.dockerfile
    ports:
      - "80:80"
      - "443:443"
    depends_on: 
      - node
    networks:
      - app-network

  node:
    container_name: angular-node-service
    image: angular-node-service
    build:
      context: ./server
      dockerfile: node.dockerfile
    environment:
      - NODE_ENV=production
    ports:
      - "3000:3000"
    networks:
      - app-network
      
  cadvisor:
    container_name: cadvisor
    image: google/cadvisor
    volumes:
      - /:/rootfs:ro
      - /var/run:/var/run:rw
      - /sys:/sys:ro
      - /var/lib/docker/:/var/lib/docker:ro
    ports:
      - "8080:8080"
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

The way to run it is a bit different:

docker-compose -f docker-compose.prod.yml build