Rahul's Dev Log

Deploying MERN Applications on AWS with a Unified Domain

Rahul Choudhary's photo
Rahul Choudhary
·

4 min read

Deploying a MERN (MongoDB, Express, React, Node.js) stack application on AWS involves hosting the frontend and backend on the same domain while ensuring scalability, security, and performance. This guide outlines the steps to achieve this using an Application Load Balancer (ALB) in AWS.

1. Architecture Overview

Components:

  • Frontend: A React application built into static files (index.html, CSS, JS), hosted on Amazon S3 and optionally served via CloudFront for caching and global delivery.

  • Backend: Node.js and Express application running on an EC2 instance or a container service like ECS.

  • Application Load Balancer (ALB): Manages path-based routing to direct traffic to either the frontend or backend.

  • Domain: Managed with any DNS provider, such as Route 53, GoDaddy, or Namecheap, directing traffic to the ALB.

2. Steps to Deploy

Step 1: Deploy the Backend

  1. Launch an EC2 Instance:

    • Use an Amazon Machine Image (AMI) with Node.js pre-installed.

    • Upload your backend code to the instance.

    • Ensure the backend listens on a specific port (e.g., 3000).

  2. Configure Security Group:

    • Allow traffic from the ALB (not directly from the public).

  3. Test the Backend:

    • Verify that the backend is running and accessible via the EC2 instance’s private IP address.

Step 2: Deploy the Frontend

  1. Host on S3:

    • Create an S3 bucket and upload the built static frontend files (index.html, CSS, JS).

    • Enable Static Website Hosting in the S3 settings.

  2. Optional: Use CloudFront:

    • Create a CloudFront distribution pointing to the S3 bucket for faster global delivery and caching.

  3. Note the Endpoint:

    • Record the S3 static website URL or the CloudFront distribution URL.

Step 3: Configure the Application Load Balancer

  1. Create an ALB:

    • Navigate to the EC2 Console > Load Balancers > Create Load Balancer.

    • Select Application Load Balancer and configure:

      • Listeners: Add HTTP (port 80) or HTTPS (port 443).

      • Availability Zones: Choose at least two zones for high availability.

  2. Set Up Target Groups:

    • Backend Target Group:

      • Register your backend EC2 instance.

      • Configure health checks for /health or a similar endpoint.

    • Frontend Target Group:

      • Use the S3 bucket URL or CloudFront distribution URL as the target.

  3. Set Listener Rules:

    • Path-based routing rules:

      • Rule 1: Forward /api/* to the backend target group.

      • Rule 2: Forward /* to the frontend target group.

    • Default rule: Route to the frontend target group.

  4. Enable SSL (Optional):

    • Use AWS Certificate Manager (ACM) to create an SSL certificate for your domain.

    • Update the listener to use HTTPS.

Step 4: Configure DNS

  1. Purchase and Manage the Domain:

    • Buy your domain from a registrar like Route 53, GoDaddy, Namecheap, or Google Domains.

  2. Obtain the ALB DNS Name:

  3. Add a Custom Domain Record:

    • Log in to your domain registrar’s DNS management panel.

    • Create a CNAME or A Record:

      • CNAME: Use this if you’re pointing a subdomain (e.g., www.example.com) to the ALB DNS name.

      • A Record: Some providers allow you to point directly to the ALB using an alias-like feature.

  4. Test the Domain:

    • Wait for DNS propagation (may take a few minutes to 24 hours).

    • Access your domain to verify it routes correctly to your AWS resources.

  5. Using Route 53 (Optional):

    • Route 53 simplifies integration with AWS services. Instead of manually adding CNAME or A Records, you can create an alias record pointing to your ALB.

3. Advanced Configurations

1. Host-Based Routing

  • Use different subdomains (e.g., api.example.com for the backend and www.example.com for the frontend).

  • Configure ALB listener rules based on the Host header.

2. Autoscaling for Backend

  • Use Auto Scaling Groups to handle varying traffic loads.

  • Integrate with the ALB to dynamically add or remove backend instances.

3. Security Enhancements

  • Use AWS Web Application Firewall (WAF) with the ALB to filter malicious traffic.

  • Implement HTTPS with TLS encryption.

4. Key Benefits of Using ALB

  • Path-Based Routing: Simplifies routing between frontend and backend services.

  • Scalability: Automatically adjusts to traffic load.

  • Integration: Works seamlessly with other AWS services like ECS, CloudFront, and Route 53.

  • SSL Support: Easily secure your application with HTTPS.

With this setup, your MERN application will be hosted on AWS, leveraging its scalability and reliability. By using an ALB and flexible DNS configuration, you ensure efficient traffic management between your frontend and backend, all under a unified domain. Let me know if you need help with any specific step!

MERN StackAWSLoad BalancingReactMongoDBExpressNode.jsdeployment