Recently, I had to deploy a MERN (MongoDB, Express.js, React, Node.js) application on an AWS EC2 instance. Despite putting in hours of research, I found a notable lack of comprehensive resources guiding the deployment of both the React application build and the Node.js server on the same instance with Dockerization.

In this blog, I will share the step-by-step process, along with the struggles and solutions I encountered, aiming to provide a thorough guide for fellow developers navigating the complexities of dockerizing and deploying a MERN stack application on AWS.

Let's dive in to explore the right way!

What Do We Want?

We need an Amazon EC2 instance with Docker running inside it, operating two containers.

— Architecture Overview

Prerequisites

• MERN Application — To be deployed
• AWS Account — You can use a free tier account to avoid charges
• Docker Hub Account — To store your Docker images
• Docker — Locally installed on your system

Let's Begin!

I'm expecting you already have a MERN Application or you can use this sample application: MERN-DEP.

This application is a simple MERN application that fetches the name of the user from a database and shows it on the screen. It was built just for demonstration purposes, but you can proceed with your own application.

Once your application is ready, test it on your localhost.

— Sample Application HomePage

1. Local Host Setup

Backend Configuration

Let's get the backend ready for deployment.

1.1 Populate Database

If you're using the sample application, add the MongoDB URL in the dbPopulator.js file and run it to load sample data in your database.

— Database Populator

— Database Population Result

1.2 Dockerize Your Application

Add a Dockerfile and .dockerignore to your Backend folder:

FROM node:17-alpine
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "index.js"]

— Backend Dockerfile

Build the Docker Image:

docker build -t dockerhub_username/backend_image_name .

— Docker Build

1.3 Push Your Node.js Image to DockerHub

Login to your DockerHub account via CLI:

— Docker Login

Push the Image to DockerHub:

docker push dockerhub_username/backend_image_name

— Docker Push

Verify your Docker Image on DockerHub:

— DockerHub Verification

Frontend Configuration

Let's get the Frontend ready for deployment.

1.4 Create Nginx Configuration File

Create a file named nginx.conf inside the Frontend folder:

server {
    listen 80;

    location / {
        root /usr/share/nginx/html;
        index index.html;
    }

    location /api {
        proxy_pass <InstanceIP>:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

1.5 Create React Application Build

Run the following command to create a build of your application:

npm run build

This will create a dist folder containing the built code.

— Build Output

1.6 Dockerize & Push The React Build

Create a Dockerfile inside the Frontend folder:

FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY ./dist/ /usr/share/nginx/html

Add your .env file to .dockerignore:

— Frontend Dockerfile

Build and push the Frontend Docker Image:

docker build -t dockerhub_username/frontend_image_name .

— Frontend Build

docker push dockerhub_username/frontend_image_name

— Frontend Push

Verify your Docker Image on DockerHub:

— DockerHub Frontend

Now, we are ready to create and configure the EC2 instance!

2. Provisioning & Configuring EC2 Instance

Login to your AWS Account.

2.1 Provisioning EC2 Instance

Create a t2.micro instance using Ubuntu Image and create a new key pair or choose an existing one.

— EC2 Instance Creation

Add inbound rules for ports 80, 443 & 3000 in the security groups:

Instance → Security → Security Group → Edit Inbound Rules

— Security Group Rules

2.2 Configuring EC2 Instance

1. Connect to your EC2 instance
2. Install Docker & Docker Compose on your EC2 Instance
3. Create a docker-compose.yml file:

version: "3.8"

services:
  backend:
    image: <dockerhub_username>/<backend_image_name>
    container_name: mernbackend
    ports:
      - "3000:3000"
    environment:
      - MONGODB_URI=<MongoDB_URI>
      - PORT=3000

  frontend:
    image: <dockerhub_username>/<frontend_image_name>
    container_name: mernfrontend
    ports:
      - "80:80"
    environment:
      - VITE_SERVER_URL="http://<InstanceIP>"

2.3 Run Your Application

Once you have the docker-compose.yml setup, run your application:

docker-compose up -d

Enter your Instance's Public IP to see the hosted application:

— Running Application

To shut it down:

docker-compose down

3. Automation

You can create Bash Scripts to automate the complete build and deployment process or use CI/CD tools. Here's a simple bash script to update your server.

For demonstration purposes, I'm changing the text on the home screen from "Hello Name" to "Greetings Name".

3.1 Deployment Trigger

Create a bash script in the root directory of your project named updateServers.sh:

#!/bin/bash

# UPDATE FRONTEND
cd ./Frontend
npm run build
docker build -t dockerhub_username/frontend_image_name .
docker push dockerhub_username/frontend_image_name

# UPDATE BACKEND
cd ../Backend
docker build -t dockerhub_username/backend_image_name .
docker push dockerhub_username/backend_image_name

# UPDATE SERVERS
cd ..
ssh -i <KeyPair file path> <Ip Address> ./updateServer.sh

# SAMPLE COMMAND
# ssh -i ./ayroids.pem ubuntu@ec2-13-200-251-36.ap-south-1.compute.amazonaws.com ./updateServer.sh

3.2 Server Update Script

On the EC2 Instance, create another bash script named updateServer.sh:

docker pull dockerhub_username/frontend_image_name
docker pull dockerhub_username/backend_image_name
docker-compose down
docker-compose up -d

3.3 Running The Scripts

Change permission of both scripts to make them executable:

chmod +x updateServers.sh

Run the deployment trigger script on your local machine:

./updateServers.sh

— Script Execution

— Script Output

3.4 Check the Updates

Visit the IP address of the Instance to verify updates:

— Updated Application

Boom! That's a simplified and efficient recipe for dockerizing and deploying MERN applications.

Thank you for joining me on this journey. I'd love to hear your thoughts and insights, so feel free to share your comments. Don't forget to hit the follow button to stay tuned for more lessons learned and experiences in the development world.

Happy learning!