PROJECT - Deploying a React-Django Application on AWS ECS ๐ŸŒ

PROJECT - Deploying a React-Django Application on AWS ECS ๐ŸŒ

ยท

4 min read

Introduction:

Containerization and cloud-based deployment are at the forefront of modern application development. In this comprehensive guide, we'll walk you through deploying a React application using an AWS ECS (Elastic Container Service) cluster container. This approach offers scalability, manageability, and reliability for your React app. Let's dive in! ๐ŸŒ

Key Features of This Project ๐ŸŒŸ

This project boasts several exciting features that make it a powerful choice for deploying your React applications:

  • Simplified Deployment: Containerization simplifies deployment, ensuring your app runs consistently across various environments.

  • Scalability: AWS ECS allows you to scale your application effortlessly as your user base grows.

  • Isolation: Containers provide isolation, preventing conflicts between your app and the underlying system.

  • Resource Efficiency: Containers use resources efficiently, enabling you to maximize the utilization of your infrastructure.

  • Version Control: Docker images and ECS task definitions offer version control for your app, making it easy to roll back if issues arise.

  • Security: AWS ECS provides robust security features to protect your application and data.

  • High Availability: ECS ensures high availability by distributing tasks across multiple instances.

  • Monitoring and Logging: AWS offers comprehensive monitoring and logging capabilities to keep an eye on your app's performance.

  • Cost Optimization: With AWS, you can optimize costs by scaling resources according to demand.

Now, let's embark on the journey of deploying your React app using AWS ECS. ๐Ÿšข

Prerequisites ๐Ÿ› ๏ธ

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

  • Clone the Repository: Start by cloning the application repository from GitHub. Locally and will use this code to send it to our ECR for our ease and You can do this using the following command:

      git clone https://github.com/chxtan/react_django_demo_app
    
  • Install Docker and AWS CLI:

    Docker is essential for containerization, and the AWS CLI allows us to interact with AWS services from the command line. You can download Docker here and the AWS CLI here.

  • Configure AWS:

    Run the aws configure command and enter your AWS access key, secret key, region, and output format when prompted. These credentials should belong to a user with the necessary permissions for the AWS services we'll be using.

  • Create a User with Programmatic Access:

    To create a user with programmatic access, head to the AWS Identity and Access Management (IAM) console and follow the instructions to create a user and generate access keys.

๐Ÿ”ง Setting Up the Elastic Container Registry (ECR)

  • Navigate to ECR: In the AWS console, go to the Elastic Container Registry (ECR) service.

  • Create a Public Repository: Click on "Create repository" and provide the required details for your repository. This is where your Docker images will be stored.

  • Repository Created: Once created successfully, you'll see a confirmation message like the one below:

๐Ÿณ Building and Pushing Docker Images

  • Push Docker Images: In your project directory, you'll find a set of commands provided under "View Push Command." Execute these commands on your EC2 instance. This will build and push your Docker images to the ECR repository.

  • After executing these commands, your Docker images will be pushed to the repository.

โš™๏ธ Configuring Amazon ECS

  • Create an ECS Cluster: Now, navigate to Amazon Elastic Container Service (ECS) in the AWS console and create an ECS cluster. This cluster will manage your containerized application.

  • Task Definitions: On the left-hand side, select "Task Definitions."

  • Configure Task Definition: Create a new task definition by specifying the task name, container name, and the URL of the Docker image from your ECR repository. Click "Create."

  • Active Task: You'll notice that the task status is now active, indicating that the task definition is configured correctly.

๐Ÿƒโ€โ™€๏ธ Running the Task

  • Run Task: Select the task and click on "Run Task."

  • Configure Cluster and Security Group: Choose the existing cluster (ecr_ecs) and create a new security group that allows traffic on port 8000.

  • Start the Task: Save the configuration, and the task inside the container's task definition will start running.

๐ŸŒ Accessing Your Application

  • Get Public IP: Once the task is running, copy the public IP of the container, appending port 8000 to it. Your site will now be live and accessible via this URL.

Congratulations! You've successfully deployed a React-Django application on AWS using Docker containers and Amazon ECS. This setup allows for scalability and efficient management of your application in a production environment. ๐ŸŽ‰

๐Ÿ” Checkout GitHub Repository for projects:

๐Ÿ”— github.com/sumanprasad007

๐Ÿ” Check out my YouTube channel - Prasad Suman Mohan:

๐Ÿ”— youtube.com/@sumanprasad007

Did you find this article valuable?

Support Prasad Suman Mohan by becoming a sponsor. Any amount is appreciated!

ย