Step-by-Step Guide to Building a Containerized Microservices Project

This blog will walk you through the steps to create a containerized microservices project involving Angular, Node.js, and Java applications. We'll use Docker to containerize each application and NGINX to manage traffic routing.

1. Project Overview

• Frontend: Angular application for the user interface.
• Backend 1: Node.js application connected to a MongoDB database for NoSQL operations.
• Backend 2: Java application built with Maven and connected to a MySQL database.
• Traffic Management: NGINX reverse proxy routes requests to the appropriate service.
• Containerization: Docker is used to containerize all components.

1. Prerequisites

• Docker and Docker Compose installed.
• Basic knowledge of Angular, Node.js, Java (with Maven), and databases (MySQL, MongoDB).
• NGINX configuration knowledge.

now I have a demo microservice project so i use this

Demo Project link https://github.com/bhaktraj/microservice_containerize.git

1. Create Dockerfile Now you have to create Dockerfile of each and ever services

So for Angular

Dockerfile is

FROM node:14 AS first_image
WORKDIR /app
COPY ./ /app/client/
RUN cd client && npm install && npm run build --prod

#second image
FROM nginx:latest
COPY --from=first_image /app/client/dist/client /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.config
EXPOSE 4200

For Java Web application

Dockerfile

FROM openjdk:8 AS first_image
WORKDIR /app
RUN apt update && apt install maven -y
COPY ./ /app/
RUN mvn install -DskipTests

FROM openjdk:8
WORKDIR /app
COPY --from=first_image /app/target/book-work-0.0.1-SNAPSHOT.jar /app/book-work.jar
EXPOSE 9000
ENTRYPOINT [ "java","-jar","book-work.jar" ]

For Node js
Dockerfile

FROM node:14 AS FIRST_IMAGE
WORKDIR /app
COPY ./ ./nodeapi/
RUN cd nodeapi && npm install

FROM node:14
WORKDIR /app


COPY --from=FIRST_IMAGE /app/nodeapi/ /app/
EXPOSE 5000
CMD [ "/bin/sh", "-c", "cd /app/ && npm start" ]

1. Configure NGINX as a Reverse Proxy

upstream client {
    server client:4200;
}
server {
    listen 80;
    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_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://client/;
    }
    location /api {

        proxy_pass http://api:5000;
    }
    location /webapi {
        proxy_pass http://webapi:9000;
    }
}

Nginx DockerFile

FROM nginx 
COPY default.conf /etc/nginx/conf.d/default.conf

1. Docker Compose Setup Create a docker-compose.yml file to orchestrate the containers:

version: '3.8'
services:
  mysql:
    image: mysql
    container_name: emartdb
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: emartdbpass
      MYSQL_DATABASE: books
    volumes:
      - msqldat:/var/lib/mysql

  mongodb:
    image: mongo
    container_name: emongo
    environment:
      MONGO_INITDB_DATABASE: epoc
    volumes:
      - mogoda:/data/db
    ports:
      - "27017:27017"
  nginx:
    build:
      context: ./nginx
    container_name: nginx
    ports:
      - "80:80"
    restart: always

  clientapp:
    build:
      context: ./client
    container_name: client
    ports:
      - "4200:4200"
    depends_on:
      - javaapi
      - nodeapi

  javaapi:
    build:
      context: ./javaapi
    container_name: webapi
    ports:
      - "9000:9000"
    restart: always
    depends_on:
      - mysql

  nodeapi:
    build:
      context: ./nodeapi
    container_name: api
    ports:
      - "5000:5000"
    restart: always
    depends_on:
      - mongodb
volumes:
  msqldat:
  mogoda:

1. Build and Run the Project

• Navigate to the root directory of the project.
• Run

docker-compose up --build.

Refrence:
TechWorld with Nana
Youtube channel :https://www.youtube.com/@TechWorldwithNana
Imran Teli
A Udemy Course https://www.udemy.com/share/104Tz63@VxTegKgnIJACN30HBKGjPCEVnfF_0bPs_LpTow0FKaCoI8D6yhr4i5MK4ggS1-R6Dw==/