Introduction

DevOps practices aim to streamline the development and deployment of software applications. In this project, we'll create a simple DevOps pipeline to deploy a ReactJS frontend application along with a MongoDB database using Docker and Docker Compose. Docker enables us to containerize our applications, making them portable and easy to deploy across different environments. Docker Compose, on the other hand, simplifies the management of multi-container Docker applications.

Setting Up the Environment

Install Docker

Ensure that Docker is installed on your development machine. Below are the links for installation of Docker on various machines

Install Docker Compose

Dockerizing the ReactJS App

To Dockerize the ReactJS app with the node:alpine image, start by copying the app files into the container, then use npm or yarn to install dependencies. Include build commands like npm run build to compile the React app. This ensures a lightweight Docker image suitable for deployment.

Dockerfile should look something like below:

# Use the node:14-alpine image as the base image
FROM node:14-alpine

# Set the working directory inside the container
WORKDIR /app

# Add '/app/node_modules/.bin' to the PATH environment variable
ENV PATH /app/node_modules/.bin:$PATH

# Copy the package.json and package-lock.json files into the container
COPY package*.json ./

# Install application dependencies using npm
RUN npm install

# Uncomment the line below if react-scripts is not installed globally
# RUN npm install react-scripts -g

# Copy all files from the current directory into the container at /app
COPY . .

# Expose port 3000 to the outside world
EXPOSE 3000

# Define the command to start the ReactJS development server
CMD ["npm", "start"]

Dockerizing MongoDB

To Dockerize MongoDB using the node:10-alpine image, start by defining the base image. Then, configure data volume mounts for persistent storage, set authentication options if needed, and specify any other MongoDB configurations required for your application. This ensures a containerized MongoDB instance with tailored settings suitable for deployment.

Dockerfile should look something like below:

# Use the node:10-alpine image as the base image
FROM node:10-alpine

# Set the working directory inside the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json files into the container
COPY package*.json ./

# Install application dependencies using npm
RUN npm install

# Copy all files from the current directory into the container at /usr/src/app
COPY . .

# Expose port 3001 to the outside world (assuming your server listens on port 3001)
EXPOSE 3001

# Define the command to start the server when the container starts
CMD ["node", "server.js"]

Creating Docker Compose Configuration

The Docker Compose file (docker-compose.yml) orchestrates the deployment of ReactJS and MongoDB containers. Services are defined for ReactJS and MongoDB with environment variables and port mappings. Running Docker Compose starts the entire application stack seamlessly.

docker-compose.ymlshould look something like below:

version: "3.8"
services:
  # Frontend ReactJS service
  web:
    build: ./frontend  # Build the frontend container from the specified directory
    depends_on:
      - api  # Depend on the API service
    ports:
      - "3000:3000"  # Map host port 3000 to container port 3000
    networks:
      - network-backend  # Attach to the specified network for backend communication

  # Backend API service
  api:
    build: ./backend  # Build the backend container from the specified directory
    depends_on:
      - mongo  # Depend on the MongoDB service
    ports:
      - "3001:3001"  # Map host port 3001 to container port 3001
    networks:
      - network-backend  # Attach to the specified network for backend communication

  # MongoDB service
  mongo:
    image: mongo  # Use the official MongoDB image from Docker Hub
    restart: always  # Always restart the container if it stops
    volumes: 
      - mongodb_data:/data/db  # Mount a volume for persistent data storage
    environment: 
      MONGODB_INITDB_ROOT_USERNAME: username  # Set the MongoDB root username
      MONGODB_INITDB_ROOT_PASSWORD: password  # Set the MongoDB root password
    # To access MongoDB locally
    ports:
    - 27017:27017
    networks: 
      - network-backend  # Attach to the specified network for backend communication

networks:
  network-backend:  # Define a custom network for backend communication

volumes: 
  mongodb_data:  # Define a volume for MongoDB data persistence

Steps to deploy the app

 # Clone the repository containing the Docker Compose files and the app project
git clone https://github.com/shubhzzz19/devops_mongo-react.git

# Navigate into the project directory
cd devops_mongo-react

 # Start the Docker containers defined in the docker-compose.yml file in detached mode (background)
docker-compose up -d

Conclusion

In conclusion, adopting DevOps practices and leveraging Docker and Docker Compose for deploying a ReactJS frontend with MongoDB brings numerous benefits to software development and deployment processes. By containerizing our applications, we achieve greater portability, scalability, and consistency across different environments. Docker's ease of use and container management capabilities streamline deployment workflows, reducing deployment times and minimizing compatibility issues. Additionally, Docker Compose simplifies orchestration and configuration management, enabling us to deploy multi-container applications with ease. This project's approach empowers teams to build and deploy applications efficiently, improving collaboration between development, operations, and deployment teams while enhancing overall software delivery and reliability.

BlogOps's Blog