Are you ready to deploy your React application to the world? AWS EC2 is a popular choice for hosting web applications due to its scalability, flexibility, and reliability. In this beginner's guide, we'll walk you through the steps required to deploy a React application on an EC2 instance on AWS.
Prerequisites:
An AWS account
Installed and configured with AWS CLI
A React application that you want to deploy
Step 1: Launch an EC2 instance
The first step is to launch an EC2 instance on AWS. Here's how you can do it:
Log in to your AWS console and navigate to the EC2 service.
Click on the "Launch Instance" button to start the instance launch wizard.
Choose "Ubuntu Server" as the Amazon Machine Image (AMI).
Creating or Selecting a Key Pair for EC2 Instance:
During the instance launch process, you will be prompted to either select an existing key pair or create a new one. A key pair is a set of public and private keys that are used to securely connect to the EC2 instance via SSH.
If you already have a key pair, you can select it during the instance launch process. If not, you can create a new key pair by following these steps:
In the "Configure Instance" step of the launch wizard, scroll down to the "Advanced Details" section.
Click on the "Select" button next to "Key Pair" to open the "Create a new key pair" dialog box.
Enter a name for the key pair and click on the "Create Key Pair" button.
The private key file will be downloaded automatically. Make sure to save it in a safe location on your local machine.
Note: The private key file should be kept secure and should not be shared with anyone. You will need this key to connect to the EC2 instance via SSH.
Once you have created or selected a key pair, you can continue with the instance launch process.
Select an instance type and configure the instance details as per your requirements.
In the "Configure Security Group" step, create a new security group and add rules to allow inbound traffic on port 22 (for SSH access) and ports 80 and 443 (for HTTP and HTTPS traffic).
Review the instance details and launch the instance.
Step 2: Connect to the instance
Open a terminal window on your local machine.
Use the SSH command to connect to your EC2 instance using the public IP address or DNS name of the instance. The command should be in the following format:
Execute the below command in the same directory where we key(secret-key.pem) was downloaded.
ssh -i <path-to-private-key> ubuntu@<public-ip-address> ssh -i "secret-key.pem" ubuntu@ec2-3-108-41-225.ap-south-1.compute.amazonaws.com
Hurray, Now we are connected to the remote server(ec2 instance) 🥳
Step 3: Install Node.js and Git
Now that you are connected to the instance, the next step is to install Node.js and Git. Here's how you can do it:
Once you are connected to the instance, run the following command to update the package repository:
sudo apt-get update
Install Node.js and Git using the following commands:
sudo apt-get install nodejs sudo apt-get install npm sudo apt-get install git
Step 4: Clone your React application
After installing Node.js and Git, the next step is to clone your React application from the Git repository. Here's how you can do it:
Clone your React application from the Git repository using the following command:
git clone https://github.com/shaikahmadnawaz/react-portfolio
Install the node packages:
npm install
Step 5: Start your application
npm start
In your browser instead of localhost:3000 add this 3.108.41.225:3000
PublicIPv4address:port
Click on security groups, then go-to inbound rules and add one like below and include the port in it, this is required.
Inbound rules in Security Groups for EC2 are a set of network access rules that control incoming traffic to your EC2 instances. They allow you to specify which protocols, ports, and IP addresses are allowed to connect to your instances.
The project is deployed on AWS 🎉
Don't forget to terminate that instance after work, or else you will be billed 😅
Conclusion
In conclusion, deploying a React application on AWS EC2 is an excellent way to showcase your web application to the world. With the scalable infrastructure and flexibility provided by AWS, you can ensure that your application is available and performing well for your users.
In this beginner's guide, we have walked through the step-by-step process of launching an Ubuntu EC2 instance, installing Node.js and Git, cloning your React application, and finally, testing your application. By following these instructions, you are now equipped to deploy your own React applications on AWS EC2.
So, what are you waiting for? Take the plunge and deploy your React application on AWS EC2 today. Share your creativity, ideas, and innovations with the world. Start building your online presence and engaging with your users on a robust and reliable platform.
Remember, the journey doesn't end here. AWS offers a wide range of services and tools to enhance your application's performance, security, and scalability. Explore options like AWS Elastic Beanstalk, AWS CodeDeploy, and AWS CloudFront to further optimize and automate your deployment process.
Now it's your turn to dive into the world of AWS and unleash the full potential of your React applications. Happy deploying!
If you have any questions or need further assistance, feel free to leave a comment below. We are here to support you on your deployment journey.
And don't forget to connect with us on social media to stay updated with the latest tips, tutorials, and guides:
Connect with us on LinkedIn: shaikahmadnawaz
Follow us on Twitter: shaikahmadnawaz
We also encourage you to check out our GitHub repository for more code samples and projects:
- Explore our GitHub: shaikahmadnawaz
If you found this guide helpful, please consider sharing it with your friends and colleagues who might also benefit from it. Together, let's empower more developers to deploy their React applications on AWS EC2 and make a mark in the digital landscape.