Deploy Your React App with AWS EC2

Hello folks, today I’m going to discuss with you about how to deploy our react or node application using a famous Amazon web service called, EC2. If you are a very beginner for Amazon web services let me explain a bit about why you should deploy your application using Amazon EC2 instance. It has so many features like, scalability, flexibility, cost-effectiveness, reliability and global reach. Ok, now I will walk you through step by step about this tutorial.

1. Set up an AWS EC2 instance

• Log in to the AWS Management Console. If you haven’t any create an account in AWS official web site.
• Navigate to EC2 and click on “Launch Instances.”
• Choose an Amazon Machine Image (AMI) that supports your preferred operating system.
• If your are a fresher to amazon EC2 you can create instance according to your preferences, like selecting instance type, configure the instance details, adding storage etc.
• And also configure security groups to allow inbound traffic to your application (e.g., HTTP/HTTPS) as your preferences.
• Now you have launched your instance successfully and then creating a new key pair or selecting an existing one.

2. Connect to your EC2 instance:

• Download the created private key (.pem) file for your key pair.
• To connect your key pair also you can use applications like, filezilla or putty.(if your are a windows user)
• Set appropriate permissions for the private key file using the following command in the terminal:

chmod 400 /path/to/key-pair.pem

• Connect to your instance using SSH. For example:

ssh -i /path/to/your-key-pair.pem ec2-user@your-instance-public-ip

3. Configure the EC2 instance

• Update the packages on your EC2 instance:

sudo yum update

4. Install Node.js and npm

• In here to install Node.js and npm inside your ec2 instance try those following commands.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash source ~/.nvm/nvm.sh nvm install node

5. Clone your React application repository

• Install Git if not already installed:

sudo yum install git

• Clone your React application repository:

git clone <repository-url>

6. Install project dependencies

• Reach the cloned repository of yours and install the project dependencies:

cd <repository> npm install

7. Build your React application

• Build the React application for production:

npm run build

8. Install a web server

• Install a web server to run your React application, such Nginx. You may take advantage of Nginx’s performance, scalability, caching, load balancing, and security features to ensure dependable and effective delivery of your application to customers while using it as a web server for your web app on Amazon EC2.

sudo yum install nginx

9. Configure Nginx

• To add configurations into nginx, try this following commands:

sudo nano /etc/nginx/nginx.conf

• Update the server block to include the following location block:

server {...location / {root/path/to/your/react/application/build;
index  index.html;
try_files $uri /index.html;}... }

• Save the file and exit the editor.

10. Start the Nginx server

• Start Nginx and enable it to automatically start on system boot:

sudo service nginx start sudo chkconfig nginx on

11. Access your React application

• In your Console, find your instance’s public IP address by searching your created ec2 instance.
• Then browse for your deployed application using that IP address or the domain associated with your EC2 instance. Congratulations! Now you are successfully deployed your react application using your EC2 instance. Remember to customize the steps according to your specific project requirements and configurations. Follow me for more.