Unlock the Potential of Cloud Computing: Deploy Your React App on EC2

In this comprehensive guide, we will take you on a journey through the process of deploying your React app on EC2 .🌐

We'll unlock the secrets of this powerful cloud platform 🚀and equip you with the knowledge and tools needed to conquer the challenges of deployment. 🎯

Table of Content

Introduction
Prerequisites
EC2 instance set up
Development of React App
Installing Git
Establishing SSH connection with EC2 instance
Installing dependencies and setting up the environment
Cloning, Building and Deployment of our React App in EC2
Conclusion

Introduction

In today's digital world, deploying web applications has become an essential step in bringing your ideas and making them accessible to users worldwide. One popular approach is hosting your React app on an Amazon EC2 (Elastic Compute Cloud) instance, which provides scalable and flexible cloud computing resources. This introduction will guide you through the process of deploying your React app on EC2, enabling you to showcase your application to the world 🌍.

In this guide, we will walk you through the necessary steps to set up and launch your React app on an EC2 instance. We'll cover the prerequisites, including having an AWS account and a built React app ready for deployment. We'll explore how to configure the EC2 instance, establish connectivity (ssh), and set up security measures to safeguard your application.

Let's dive in 📣

Prerequisites

You all have heard a name of Operating Systems like Windows, Linux, macOS, etc. But If I ask you what an Operating System is Composed of? Your answer would be CPU, RAM, Hard Disk and Networks like Routers and switches. Cool!😎

Let's go ahead and see more about OS.

Any operating system can be launched in three ways:

Bare Metal: In Bare Metal, Operating Systems like Windows, Linux and macOS runs directly on your hardware 💻 i.e. it has direct access to the hardware resources, like CPU, RAM (memory), storage, and networking.
Virtualization: In Virtualization, Operating Systems are known as Virtual Machines; and there is a virtualization layer that sits between the physical hardware and the virtual machines (VMs). you must have heard of Virtual Box 🧰;

yes, it serves as a virtualization layer.
Cloud: In Cloud, Operating Systems are known as Instances. AWS ☁️ provides more than 200+ services, and one of its services is EC2 (Elastic Compute Cloud). EC2 provides an operating system (instances).

What are the key benefits of EC2:

🚀Scalability: It handles an increasing amount of traffic without compromising performance or causing disruptions.
⚙️Flexibility: You can choose the operating system, storage, networking, security settings and other options.
🔄Integration with AWS Services: EC2 can easily integrate with other AWS services like Amazon S3 for storage and Amazon RDS for managing databases.
🌐Reliability and Availability: Multiple availability zones ensure High Reliability and Availability even if one of the zones experience issues.

💰Cost-Effective: It includes on-demand instances, reserved instances, and spot instances. You can choose the pricing model that best fits your budget and optimize your cost based on your application's usage.

⚠️ NOTE: You need to have an AWS account to access the AWS services, including EC2 for hosting your React app.

EC2 instance set up

Sign in to your AWS Management Console: Go to the AWS website (aws.amazon.com) and 🔑 sign in with your AWS account credentials.
Navigate to EC2: Once signed in, navigate to the EC2 service. You can find it by 🔍 searching for "EC2" in the AWS Management Console search bar.
Launch an Instance: In the EC2 Dashboard, click on the 🚀 "Launch Instance" button to start the instance creation process.
Name and tags: The "Name" field is a user-defined label that you can assign to your EC2 instance for easier 🆔 identification and 📊 management. It helps you give a meaningful name to the operating system based on its purpose or function, such as 🌐 "Web Server," 🗄️ "Database Server," or 👨‍💻 "Development Environment, while "Tags" provide additional metadata and attributes that can be used for categorization, organization, and management of your EC2 instances.
Choose an Amazon Machine Image (AMI): An AMI contains the operating system and software 💻 for your instance. Select the official AWS AMI (Amazon Linux).
Key Pair Selection: This🔑🔐 key pair will be used to securely connect to your instance via SSH(Secure Shell). Download and save the private key file (.pem) securely.
Configure Security Group: A security group acts as a 🛡️virtual firewall for your instance. Define inbound and outbound traffic rules to control 🔓network access to your instance.

check-in HTTPS and HTTP traffic from the internet.
Launch: click "Launch Instances" to start the instance.
Launch Successful 🎉
Monitor Your Instance: Your Instance is⚡ running and ✅Status Check is also passed.

Development of React App (Credit: [JavaScript Mastery]) 🚀👨‍💻🔧

I want to give credit to the YouTube video tutorial by [JavaScript Mastery], which was instrumental in helping me develop this React app. The tutorial titled '[React JS Full Crash Course 2023]' provided a comprehensive walkthrough of the development process. It includes

Installation of NodeJS and npm
Overview of React
Development of React App(Movie Search App).
Fetching API.

Here is what it looks like:

Installing Git and Cloning our React App in EC2: 📥🔗🌐

Visit the official Git website at https://git-scm.com/download/win. Click on the "Click here to download" button to start the download.

Run the installer, Select installation options & Complete the installation:

Once the download is complete, locate the downloaded installer file (usually named "Git-X.X.X.X-64-bit.exe") and double-click on it to run the installer. Leave every installation option as the default. Proceed with the installation by clicking "Next" or "Install".
Verify the installation: Open your git bash and type git --version

Establishing SSH connection with an EC2 instance:🔑💻

Now, Open git bash and redirect to the path where your key pair(react_app.pem) was downloaded.

Key pair is like a password so we have to protect it so nobody can access it. For that, we have to change some permission.

The command chmod o-rwx react_app.pem is used to modify the file permissions of the react_app.pem file, specifically removing read, write, and execute permissions for other users (those who are not the owner or in the file's group).

Let's break down the command:

chmod: It is the command used to change file permissions in Unix-like systems.
o-rwx: Removes read, write, and execute permission for others, preventing them from reading, writing and executing the file.

After running the command, the react_app.pem file will have restricted permissions for other users, ensuring that they cannot read, write, or execute the file.

Establishing SSH connection with an EC2 instance:

The command $ssh -i react_app.pem ec2-user@3.6.86.151 is used to establish an SSH connection to a remote machine with the following parameters:

`ssh`: ssh stands for Secure Shell. It is used for secure remote login, secure file transfer, and secure command execution between two computers over an unsecured network. SSH provides a secure channel for communication by encrypting the data being transmitted.
`-i react_app.pem`: It specifies the private key file (react_app.pem) to be used for authentication.
`ec2-user`: It is the username that will be used to log in to the remote machine. This username may vary depending on the operating system and configuration of the remote machine.

Note: In Amazon Linux, the default username is ec2-user
`@3.6.86.151`: It specifies the IP address or DNS name of the remote machine that you want to connect to. In this case, 3.6.86.151 represents the IP address of the remote machine.

Check the Public IP address:

Installing dependencies and setting up the environment: 🌐💻🚀

First thing first, switch to the root account using the command:

$ sudo su -

Install required dependencies:

Update package repositories: Before installing dependencies, it's a good practice to update the package repositories on your EC2 instance. This ensures you have the latest package information and versions. Run the following command to update the repositories.

# sudo yum update
Install Node.js and npm: Install Node.js and npm using the following commands:

# sudo yum install -y nodejs

# sudo yum install -y npm

The -y flag is used to automatically answer "yes" to any prompts during the installation process.

Install Git: When it comes to cloning a repository, Git provides the necessary tools and commands to retrieve a copy of a repository from a remote source, such as GitHub or another Git hosting platform.

Switch to the root account:
$ sudo su -
Checking Git is installed by running the command:
# git --version
Installing git using the following command:
# sudo yum install git

Install Process Manager and serve Package Globally: After Installing git, Install the followings packages:

Install the PM2 process manager for Node.js globally:

# npm install -g pm2

Install the serve package globally:

# npm install -g serve

Cloning our React App in EC2: 📦🔗💻

Make a directory name react_app:

# mkdir react_app

Change directory to react_app:

# cd react_app

Clone the React app from GitHub: Use the git clone command to clone your React app repository from GitHub onto your EC2 instance.

# git clonehttps://github.com/devpeak/MovieLand.git

List items in react_app:

# ls

Change directory to Movieland:

# cd Movieland

Install node modules:

# npm install

Build the React app:

# npm run build

Edit Inbound Rules: Follow the steps shown below in the figures:

4.1: Tap 'Security'

4.2: Tap security groups in blue text (sg-0... launch-wizard-4)

4.3: Edit Inbound Rules.

4.4: Configure rules by clicking on *Add Rule** and Selecting the Type, Port range, and source. Make sure you have the same Inbound Rules* as given below in the image. Then finally Tap Save Rules.
Serve a static build directory: By running serve -s build, the serve command will start a server and serve the static files from the build directory. It automatically sets up routes and handles requests for those files, including the index.html file for client-side routing.

Copy your public IP address and add a port number following :(colon). In my case it becomes 3.111.186.205:3000

Now Paste this IP address with the Port number in the Browser's search Bar.

Let's search Batman in the search bar and see the result.

NOTE: public IP address changes when you stop your instance and restart it.

Conclusion: ✅

In conclusion, hosting a React app on EC2 offers scalability and flexibility. By following the steps outlined, you can deploy your app, ensure security, and optimize performance for an enhanced user experience. Utilize AWS and React to create impactful web applications.

Thank you 🙏 for joining this journey of exploring how to deploy your React app on EC2. If you have any questions or feedback, please don't hesitate to reach out.

Unleash the Power of Cloud Computing: Deploying Your React App on EC2