shape
shape

Deploying MERN Applications on AWS: A Step-by-Step Guide

  • Home
  • MERN
  • Deploying MERN Applications on AWS: A Step-by-Step Guide

Deploying your MERN (MongoDB, Express.js, React.js, Node.js) application on Amazon Web Services (AWS) can be a rewarding experience, enabling your application to scale and perform efficiently. In this interactive guide, we’ll walk you through the entire process, from setting up your AWS account to deploying your application. Grab your laptop, and let’s get started!

Table of Contents

  1. Prerequisites
  2. Setting Up AWS
  3. Creating a MongoDB Database on AWS
  4. Setting Up the Node.js Backend
  5. Building and Deploying the React Frontend
  6. Configuring Domain and SSL
  7. Monitoring and Maintenance
  8. Conclusion

Prerequisites

Before we dive into the deployment process, make sure you have the following:

  • AWS Account: Sign up at AWS.
  • Basic Knowledge of MERN Stack: Familiarity with MongoDB, Express.js, React.js, and Node.js.
  • Node.js and NPM Installed: Ensure you have Node.js and NPM installed on your local machine.
  • AWS CLI Installed: Install the AWS Command Line Interface (CLI) for easy management of AWS services from the command line.

Setting Up AWS

Log into Your AWS Account: Go to the AWS Management Console and sign in.

Create an IAM User:

  • Navigate to the IAM (Identity and Access Management) service.
  • Create a new user with programmatic access and attach the AdministratorAccess policy for simplicity.
  • Save the access key and secret key for later use.

Set Up AWS CLI:I:

bash

Copy code 

aws configure

  • Enter your Access Key, Secret Key, region (e.g., us-east-1), and output format (e.g., json).

Creating a MongoDB Database on AWS

For our MERN application, we’ll use MongoDB Atlas as our database service for simplicity.

Sign up for MongoDB Atlas: Visit MongoDB Atlas and create an account.

Create a New Project: Click on “Create New Project.”

Build a Cluster:

  • Choose your preferred cloud provider (AWS) and region.
  • Select the cluster tier; the free tier should be sufficient for testing.
  • Click on “Create Cluster” and wait for it to be provisioned.

Connect to Your Database:

  • Click on “Connect” and choose “Connect Your Application.”
  • Copy the connection string; you will use this in your Node.js application.
  • Whitelist your IP address under the Network Access settings.

Setting Up the Node.js Backend

Create a New Node.js Project:

bash

Copy code 

mkdir my-mern-appcd my-mern-app

npm init -y 

Install Dependencies:

bash

Copy code

npm install express mongoose cors dotenv

Create Your Server:

  • Create an index.js file and set up a basic Express server:

javascript

Copy code

const express = require(‘express’);const mongoose = require(‘mongoose’);const cors = require(‘cors’);require(‘dotenv’).config();

const app = express();

app.use(cors());

app.use(express.json());

const PORT = process.env.PORT || 5000;

mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })

  .then(() => console.log(“MongoDB Connected”))

  .catch(err => console.error(err));

app.listen(PORT, () => {

    console.log(`Server is running on port ${PORT}`);

});

Add .env File:

  • Create a .env file in the root directory and add your MongoDB connection string:

makefile

Copy code

MONGO_URI=your_connection_string_here

Building and Deploying the React Frontend

Create Your React App:

  • In the same directory, run:

bash

Copy code

npx create-react-app clientcd client

Install Axios:

bash

Copy code

npm install axios

Build Your React App:

  • After developing your application, build it for production:

bash

Copy code

npm run build

Deploying to AWS S3:

  • Go back to the AWS Management Console and navigate to S3.
  • Create a new bucket and make sure to enable “Block all public access” unless you want to set specific permissions later.
  • Upload the contents of the build directory to your S3 bucket.

Enable Static Website Hosting:

  • In your S3 bucket settings, go to the “Properties” tab and enable static website hosting.
  • Set the index document to index.html and the error document to index.html.

Configuring Domain and SSL

  1. Register a Domain: Use AWS Route 53 or any domain registrar of your choice.
  2. Set Up DNS Records:
  • Point your domain to your S3 bucket by creating an A record in Route 53 that points to the S3 website endpoint.
  1. Configure SSL with AWS Certificate Manager:
  • Go to the Certificate Manager, request a certificate, and validate your domain.
  • Use AWS CloudFront for SSL termination and cache your S3 content.

Monitoring and Maintenance

  1. Monitor Application Performance: Use AWS CloudWatch for logging and monitoring your application.
  2. Set Up Alerts: Create alerts for CPU usage and errors to keep your application healthy.
  3. Regular Backups: Ensure that your MongoDB Atlas cluster is set to back up automatically.

Conclusion

Congratulations! You’ve successfully deployed your MERN application on AWS. You now have a scalable and maintainable application that can grow with your user base. Remember, the cloud is always evolving, so keep learning and exploring new AWS services that can enhance your application further.


Interactive Section
  • Did you follow along? Let us know your experience in the comments!
  • Have questions? Drop them below, and we’ll be happy to assist you.
  • Share your deployment success! Tag us on social media with your app link!

Now that you’ve got the knowledge, it’s time to unleash your MERN application on the world! Happy coding!

Comments are closed

0
    0
    Your Cart
    Your cart is emptyReturn to shop