Dockerising React Application using Docker-Compose (Part-II)

Intro

Hello Everyone, welcome to part two of Dockerizing the React Application.

Quick Recap

In the last blog, we've Dockerised the React Application using multi-stage Docker Build and saved around 1.5 GB of space.

Getting Started

In this Blog, we will dockerize the same react application, just using the Docker-Compose file. So that we can increase our grip on writing docker-compose files and all.

Here's the structure we're going to follow.

It is the same structure we've used earlier. Just here we've got a docker-compose file.

Here's the docker-compose file.

version: '3'
services:
  web:
    # build:
    #   context: .
    #   dockerfile: Dockerfile
    image: devarsh10/ocean-web:0.1
    restart: always
    container_name: ocean-app
    ports:
      - "3000:3000"
    command: npm start
  json:
    # build:
    #   context: .
    #   dockerfile: Dockerfile-json-server
    image: devarsh10/ocean-json:0.1
    restart: always
    container_name: json-server
    ports:
      - "8000:8000"
      - "8001:8001"
      - "8002:8002"
    command: bash -c "json-server --watch db.json --port 8000 --host 0.0.0.0 & json-server --watch db2.json --port 8001 --host 0.0.0.0 & json-server --watch db3.json --port 8002 --host 0.0.0.0"

  nodemailer:
    # build:
    #   context: ./server
    #   dockerfile: Dockerfile
    image: devarsh10/ocean-nodemailer:0.1
    container_name: backend-nodemailer
    ports:
      - "5000:5000"

Let us traverse line by line to understand the Code.

• Version: We're using the latest version of Docker-compose here.

• Services: Services are the way we can tell Docker that we've to run three Docker Containers.

  • Web: Here and in every service we are using a few parameters. So let us understand one by one.

• Build: If we've got a Dockerfile present with us then we can also avoid pulling the image from DockerHub. Using the Build parameter using context i.e. path and name of the dockerfile.

• Image: The reference to the image

• restart: If you keep restart: always, it'll start the container when you open Docker Desktop. If you have not used restart:always. After opening Docker Desktop the container will not be running. (I have written in the easiest way possible)

• container_name: The name we want. If we do not specify this parameter, it'll take the name of the service as a container name.

• ports: The port we are mapping from our host machine to the container.

  • command: The command we'll be using is like, 'npm start'.

• Now, use to command docker-compose up and the container will start running and the app will be accessible.

Thank You

Yeah, so that's all for this blog if I learn some new parameters I will add them. If you want to contribute willingly. Do let me know in the comment section. I'll reach out to you.