Deploying a web application to the cloud is essential in making your app accessible to users worldwide. Amazon Web Services (AWS) provides a powerful and scalable cloud infrastructure, including Amazon S3 (Simple Storage Service), a highly reliable object storage service. In this tutorial, we will guide you on how to deploy React app to AWS S3, enabling you to take advantage of its simplicity and cost-effectiveness.
What are Amazon Web Services?
Amazon Web Services (AWS) are globally accepted popular cloud computing services. Amazon Web Services include mainly database, analytics, storage, and deployment.
The two most popular services of Amazon are:
1. AWS S3
AWS S3 is a simple storage service for storing and retrieving data that provides high scalability, durability, and security.
2. AWS EC2
AWS EC2 is an elastic compute cloud service that is secure and can cater to any workload virtually.
Which Service Is Right for You?
Choosing a service between AWS S3 and AWS EC2 will depend on your specific needs. If you are looking for a simple and cost-effective way to deploy React app, then AWS S3 is a good choice. If you are looking for a more flexible and scalable solution, then AWS EC2 is a good choice.
Here are some additional considerations that may help you decide which service to use:
- The size and complexity of your project: If you are working on a small project, then AWS S3 may be a good choice. However, if you are working on a large or complex project, then AWS EC2 may be a better choice.
- Your budget: AWS S3 is a more cost-effective option than AWS EC2. However, if you need the additional features that AWS EC2 provides, then the extra cost may be worth it.
- Your experience level: AWS S3 is easier to use than AWS EC2. However, if you are more experienced, then you may prefer to use AWS EC2 because it gives you more control over your infrastructure.
Why AWS S3 to Deploy React App to AWS?
AWS S3 and AWS EC2 both are popular Amazon web services for deploying React apps. However, according to your needs, one can be a better choice for you. Let’s explore this in detail;
What Benefits Does AWS S3 Offer?
AWS S3 provides a cost-effective solution for storing and retrieving any amount of data from anywhere on the web. Its web interface is very simple and easy to use. It offers many other benefits, which are as follows:
- You can store your React app’s build files and configure them to serve your app.
- AWS S3 is a fully managed service, which means that you don’t need to focus on managing the infrastructure, as Amazon itself takes care of it.
- It provides web hosting services for static web applications and websites.
- It also provides content delivery options, data backup from on-premises systems, and data archiving for long-term storage.
- Amazon S3 is highly scalable and provides secure storage options. The security features include encryption, access control, and auditing.
- AWS S3 is available in over 20 regions around the world, which means that your data is always close to your users.
If you are interested in web applications that incorporate augmented reality, then I recommend reading this article, “Web-based AR Vs. App-based AR”
Step-By-Step Guide to Deploy React App to AWS S3
Now that you have learned all about AWS S3 let’s explore how to use it to deploy React App. Below is a step-by-step guide for you to better understand the deployment process on AWS S3.
Step 1: Create a React App
If you don’t have already created a React app, then first, you have to create it. Then, you can deploy react app to AWS. You can simply create a new React app by following the command below:
npx create-react-app
Step 2: Set Up AWS S3
To set up AWS S3, first, you have to create an S3 bucket in AWS. For this purpose, you should have an AWS account. But don’t worry if you haven’t one because you can create a free AWS account easily.
After creating an account, find the S3 service in your account.
Select the service and create a bucket by clicking the “Create bucket” button. Enter a name for your bucket.
Step 3: Configure AWS S3 to Host a Static Web App
Once your bucket has been created, configure AWS S3 to host a static web application. For this purpose, follow the steps below:
- Click on the Properties tab.
- Scroll down to the Static website hosting section and select the Enable static website hosting checkbox.
- Enter your website’s root directory.
- Click on the Save button.
Step 4: Create CloudFront Distribution
For creating the CloudFront distribution, follow the commands mentioned below:
- Go to the CloudFront service.
- Click on the Create Distribution button.
- Select the Web distribution type.
- Enter a name for your distribution and select a region.
- Click on the Create Distribution button.
Step 5: Deploy React App to AWS S3
Once your distribution has been created, you can deploy React app to AWS S3 by following the steps below:
- Click on the Domain Name tab.
- Copy the distribution domain name.
- Go to your React app’s root directory.
- Run the following command to build your app:
npm run build
- Upload the contents of the build folder to your S3 bucket.
- Go to the CloudFront distribution’s Origins tab.
- Click on the Edit Origin button.
- Enter the S3 bucket’s endpoint in the Origin Domain Name field.
- Click on the Save button.
Your React app is now deployed to AWS.
Step 6: Accessing Your React App from the Web
You can access your React web app by going to the distribution domain name that you copied in Step 5.
Final Thoughts
There are many ways to deploy React app to AWS. However, we have covered only one way, which is through AWS S3 service. Other ways are through AWS EC2, AWS Amplify, and AWS Elastic Beanstalk. The best choice among them depends on your specific needs. In our coming blogs, we will discuss other methods to deploy React app to AWS. So, stay tuned.
